element-ui下表格头部字段hover显示tips信息

记录一下表格头部加hover之后显示tips信息
循环，或单独的el-table-column都可以哦

// 组件内在render-header属性中定义
<el-table-column prop="tableDate" label="日期" :render-header="(h, { column }) => hoverTips(h, { column })"></el-table-column>

可全局（全局下hoverTips(h, { column },tableHeadTips)）亦可单独组件，下面是全局的

// 对应表头字段展示的tips信息也可在data中定义
const tableHeadTips = {
  '日期':'这是表头日期的tips',
  '姓名':'这是表头姓名的tips',
  '地址':'这是表头地址的tips'
}
hoverTips(h, { column }) {
  const tips = tableHeadTips[column.label];
    return tips ? h("div", [
      h('span', column.label),
      h("el-tooltip",{
          props: {
              effect: 'dark',
              content: tips,
              placement: 'top',
          },
      },
      [   h('i', {
          class: 'el-icon-question',
          style: 'color:#056271; margin-left:5px;',
          }),
      ]),
  ]) : h("div", [h('span', column.label)]);
}

全局下如果有相同的表头名字，可在用的组件下传值

//定义
export function hoverTips(h, { column },tableHeadTips){//和上面一致}
//组件内定义调用
data(){return{
tableHeadTips: {
  '日期':'这是表头日期的tips',
  '姓名':'这是表头姓名的tips',
  '地址':'这是表头地址的tips'
}}
hoverTips(h, { column },this.tableHeadTips)  //调用

周六也要加油哦！！！