背景: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>
)
},复制代码
效果如下图: