前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >关于element-ui表格的renderHeader 的方法的研究

关于element-ui表格的renderHeader 的方法的研究

作者头像
用户4344670
发布2019-08-28 11:12:54
4.9K0
发布2019-08-28 11:12:54
举报
文章被收录于专栏:vue的实战
原始的表格中没有icon的显示,但是有一个 renderHeader方法可以实现。

自定义的表格中的label要加一个 icon。用于浮动显示。

原始.png

一个小问号的实现

目标显示实现

代码
代码语言:javascript
复制
/// 注意:   :render-header="renderHeader"
                    <el-table-column prop="auditResultName" label="拦截状态" :render-header="renderHeader" align="center"  width>
                      <el-tooltip effect="dark" content="我是提示的消息" placement="top">
                        <i class="el-icon-question"></i>
                      </el-tooltip>
                      <template slot-scope="scope">
                        <!-- 0,成功 2:失败  -->
                        <font
                          v-if="scope.row.auditResult == 0"
                          color="#0d88fa"
                        >{{scope.row.auditResultName}}</font>
                        <font
                          v-if="scope.row.auditResult ==2 "
                          color="#fa7c0d"
                        >{{scope.row.auditResultName}}
                        </font>
                      // 通过不同的 auditResult 来显示不同的颜色
                 
                      </template>


                    </el-table-column>
下面是具体的方法:在methods: { }
代码语言:javascript
复制
  renderHeader(h, { column, $index }) {
        return h(
          'el-tooltip',  //  标签的名称
          {
            props: {  //标签的参数 通过不同的标签 显示不同的文字
              content: (function() {
            //如何拿到 label的文字?? 通过column.label来拿
                let label = column.label
                switch (label) {
                  case '拦截状态':
                    return '我是提示文字'
                    break
                  case '提示2':
                    return '提示文字2'
                    break
                  case '提示3':
                    return '提示文字3'
                    break
                }
              })(),
              placement: 'top',
              // effect: "light",  //  默认为黑色主题
            },
            ///下面的意思是往el-tooltip 标签里面添加内容 column.label(拿到自己定义的显示内容: 拦截状态 )   
            domProps: {
              innerHTML: column.label +     '<span class="el-icon-question" style="color: #409eff;margin-left:                     
                 10px "></span>'
            }
          },
          [h('span')]
        )
      },
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019.05.06 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 原始的表格中没有icon的显示,但是有一个 renderHeader方法可以实现。
  • 代码
  • 下面是具体的方法:在methods: { }
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档