element table 表头显示 tooltip

背景：element-ui 的 table 组件，表头直接调用 column 的 label 就可以生成

         但是我们有的时候需要在表头上添加一些需求.比如加个 tooltip

解决方法：需要用到 render-header 以及 jsx 语法

1.安装依赖

 npm i babel-helper-vue-jsx-merge-props babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx --s

2.修改 .babelrc 文件

"plugins": ["transform-runtime", "transform-vue-jsx"]

接着就可以用 jsx 语法了～

<el-table-column class-name="status-col" label="head1" width="150" align="center" :render-header="renderHead">

renderHead (h,{column}) {
     return(
            <el-tooltip class="tooltip"
            effect="light"
            placement="top">
            <ul slot="content">
              <li>这是 tooltip </li>
            </ul>
             <div>head1
             </div>
            </el-tooltip>
            )
    },

效果如下图：

参考链接