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

效果如下圖：

參考連結