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>
            )
    },複製代碼

效果以下圖：

參考連接