element-ui 怎么在表格头部添加一个Tooltip

我想实现的效果如下图：

微信截图_20191029171825.png

找了一下element的说明文档,里面有个属性render-header

image.png

我看网上都是写原生的createElement,非常的不方便,我们用另外一种方法

先安装相关的插件：

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

之后在.babelrc文件里面加入

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

然后就可以使用jsx的语句了

然后在methods中定义方法

handleHelp(){
     return(
         
             
推送开关状态 
        
    )
}

下面的css按需引入即可

.el-table th div.tooltip {
    display: block;
    position: unset;
    font-size: unset;
    opacity: unset;
}
.el-table th div.el-tooltip {
    display: block;
    line-height: unset;
}
.el-tooltip__popper {
    max-width: 250px;
}