element-ui自定義table表頭，修改標題樣式、添加tooltip及 :render-header使用簡介

修改列標題樣式
1.在列標題後面加一個圖標。

以element-ui官方文檔一個table表格爲例，咱們在地址的後面加一個定位標誌的圖標，代碼以下：

<template>
　　<el-table 　　　　:data="tableData2" 　　　　style="width: 100%" 　　　　:row-class-name="tableRowClassName">
　　　　<el-table-column 　　　　　　prop="date" 　　　　　　label="日期" 　　　　　　width="180">
　　　　</el-table-column>
　　　　<el-table-column 　　　　　　prop="name" 　　　　　　label="姓名" 　　　　　　width="180">
　　　　</el-table-column>
　　　　<el-table-column 　　　　　　prop="address" 　　　　　　label="地址" 　　　　　　:render-header="renderHeader"> // 加入render事件
　　　　</el-table-column>
　　</el-table>
</template>
<script> export default { 　　methods: { 　　　　// render 事件
　　　　renderHeader (h,{column}) { // h即爲cerateElement的簡寫，具體可看vue官方文檔
　　　　　　return h( 　　　　　　　　'div',[ 　　　　　　　　　　h('span', column.label), 　　　　　　　　　　h('i', { 　　　　　　　　　　　　class:'el-icon-location', 　　　　　　　　　　　　style:'color:#409eff;margin-left:5px;' 　　　　　　　　　　}) 　　　　　　　　], 　　　　　　); 　　　　} 　　}, 　　data() { 　　　　return { 　　　　　　tableData2: [{ 　　　　　　　　date: '2016-05-02', 　　　　　　　　name: '王小虎', 　　　　　　　　address: '上海市普陀區金沙江路 1518 弄', 　　　　　　}, { 　　　　　　　　date: '2016-05-04', 　　　　　　　　name: '王小虎', 　　　　　　　　address: '上海市普陀區金沙江路 1518 弄' 　　　　　　}, { 　　　　　　　　date: '2016-05-01', 　　　　　　　　name: '王小虎', 　　　　　　　　address: '上海市普陀區金沙江路 1518 弄', 　　　　　　}, { 　　　　　　　　date: '2016-05-03', 　　　　　　　　name: '王小虎', 　　　　　　　　address: '上海市普陀區金沙江路 1518 弄' 　　　　　　}] 　　　　} 　　} } </script>

 

效果以下：

2.在列標題後面添加一個單選框

仍是以上面的代碼爲例，只寫關鍵代碼：

// render 事件
renderHeader (h,{column}) { // h即爲cerateElement的簡寫，具體可看vue官方文檔
    return h( 　　　　'div',[ 　　　　　　h('span', column.label), 　　　　　　h('el-checkbox',{ 　　　　　　　　style:'margin-left:5px', 　　　　　　　　on:{ 　　　　　　　　　　change:this.select // 選中事件 
　　　　　　　　} 　　　　　　}) 　　　　], 　　); }, // 添加選中事件
select (data) { 　　console.log(data); } 

效果以下：

3.在表頭添加一個Tooltip

如今有一個需求，要在列表表題後面添加一個提示，咱們開始嘗試着作，仍是以上面的代碼爲例，剛開始我想直接用‘el-tooltip’，應該不是很難，而後就是這樣：

renderHeader (h,{column}) { return h( 'div', [ h('span', column.label), h('el-tooltip',[ h('i', { class:'el-icon-question', style:'color:#409eff;margin-left:5px;' }) ],{ content: '這是一個提示' }) ] ); } 

 

運行後發現，基本樣式出來了，可是提示沒有，效果以下：

這樣確定不能知足咱們的要求，後來通過本身不斷的嘗試，發現這樣寫就能夠了

　

renderHeader (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;' }) ],{ content: '這是一個提示' }) ] ); } 

 

　

原文出處：https://www.cnblogs.com/jmwlhj/p/11004378.html