ElementUI 中 table 表格自定義表頭 Tooltip 文字提示

table表格需要增加提示文案說明，沒有現成的屬性新增，我們可以通過render-header來渲染表頭。

程式碼如下：

<el-table-column
        align="center"
        label="價格"
        :render-header="renderTipsHeader"
      >
        <template slot-scope="scope">
          {{ scope.row.amount }}
        </template>
</el-table-column>

renderTipsHeader：

renderTipsHeader (h,{column}) {
      return h(
        'div',[ 
             h('span', column.label),
             h('el-tooltip',{
　　　　      props:{
　　　　　　　　effect:'dark',
　　　　　　　　content:'提示文案',
　　　　　　　　placement:'top'
　　　　　　},　　　 
　　　　 },[
                 h('i', {
                     class:'el-icon-question',
                     style:'color:#409EFF;margin-left:5px;'
                 })
            ])
        ]
    );
 }

效果如圖：

render-header 列標題 Label 區域渲染使用的 Function 
Function(h, { column, $index }) 

感興趣可以列印出來看看，這裡還有更復雜的應用–github.com/Darkerxi/ElementUI-Tabl...

---

參考文章：
element-ui自定義table表頭，修改標題樣式、新增tooltip及 :render-header使用簡介

本作品採用《CC 協議》，轉載必須註明作者和本文連結