elementUI table 表格 表头增加悬浮提示内容

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

<!-- 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部分
  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")]
      );
    },
  }