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

原始的表格中没有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')]
        )
      },

icon label methods png 表格

0 人点赞