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>
            )
    },复制代码

效果以下图：

参考连接