elementUI table 表格 自定义表头内容（加列名解释）

使用element UI的 table 组件创建的表格，需要给每一个列名加上字段解释，鼠标悬停的时候，显示出解释的文字，鼠标移出的时候文字隐藏，页面效果如图：

鼠标放上去会显示提示文字：

方法一： element UI官方提供了自定义表头的方法

参考element UI官方文档 自定义表头内容

• 通过给表格的列

  el-table-column

  使用

  <template slo t= "header"

  来自定义表头内容

  

• 代码如下：

<el-table-column prop="name" show-overflow-tooltip>
  <template slot="header">
    <el-tooltip
      class="item"
      effect="dark"
      content="标签名称的解释文字"
      placement="top-start"
    >
      <span><i class="el-icon-question"></i> 标签名称 </span>
    </el-tooltip>
  </template>
</el-table-column>
           

方法二：使用

render-header

方法

• 第一步 为表格中需要添加说明的列 绑定

  render-header

  方法

• 

<!-- html 部分-->
<el-table
    :data="tableData"
    style="width: 100%"
    :row-class-name="tableRowClassName">
    <el-table-column
      prop="date"
      label="日期"
      :render-header="renderHeader"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      :render-header="renderHeader"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
      :render-header="renderHeader"
    </el-table-column>
  </el-table>
           

• 第二步 在js中增加

  render-header

  对应的方法

// js部分
  methods:{
//在表格列标题中增加图标，解释相应字段
    renderHeader(h, { column, $index }) {
     //通过h方法渲染表头内容，参数 column 是表格的 列 对象
      return h(
        "el-tooltip",       //"el-tooltip" 是你要使用的元素标签，这里使用了elementUI 自带的 el-tooltip 提示标签,这个提示标签就可以实现鼠标移入显示文字，移出隐藏文字
        {
          props: {
            content: (function () {
              //这个
              let property = column.property;
              //通过判断 列 绑定的字段 来为不同的列名 加上不同的文字说明
               switch (property) {
                //日期
                case "date":
                  return "这个是日期的解释。";
                  break;
                //姓名
                case "name":
                  return "姓名的解释。";
                  break;            
                //地址
                case "address":
                  return "地址的解释。";
                  break;          
              }
            })(),
            placement: "top",
          },
          //最后展示的内容是 icon 图标 + 列的 label
          domProps: {
            innerHTML: `<span class="el-icon-question"></span>  ${column.label}`,
          },
        },
        [h("span")]
      );
    },
  }
  
           

把代码折叠起来，帮助理解一下

说明：elementUI 官方推荐使用方法一，使用方法二控制台会出现警告消息：

element-ui.common.js?5c96:14326 [Element Warn][TableColumn]Comparing to render-header, scoped-slot header is easier to use. We recommend users to use scoped-slot header.

（与renderheader相比，scoped-slot header更容易使用。我们建议用户使用scoped-slot header。）

实际情况中，根据需要选择。