關(guān)注我的個(gè)人博客:pinbolei.cn桩卵，獲取更多內(nèi)容
**由于Element-ui官方在2.4.11及以后的版本中添加了自定義表頭的方法验靡，如果你的Element-ui版本是在2.4.11以上，建議參考我的另一篇博客element-ui table列表自定義表頭吸占，修改列標(biāo)題樣式晴叨、添加tooltip
**
render-header
render-header在官方文檔中的介紹是這樣的：
| 參數(shù) | 說(shuō)明 | 類型 | 可選值 | 默認(rèn)值 |
|---|---|---|---|---|
| render-header | 列標(biāo)題 Label 區(qū)域渲染使用的 Function | Function(h, { column, $index }) | --- | --- |
修改列標(biāo)題樣式
1.在列標(biāo)題后面加一個(gè)圖標(biāo)。
以element-ui官方文檔一個(gè)table表格為例矾屯，我們?cè)诘刂返暮竺婕右粋€(gè)定位標(biāo)志的圖標(biāo)兼蕊，代碼如下：
...
<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>
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>
<script>
export default {
methods: {
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
},
// render 事件
renderHeader (h,{column}) { // h即為cerateElement的簡(jiǎn)寫，具體可看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: '上海市普陀區(qū)金沙江路 1518 弄',
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄',
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}]
}
}
}
</script>
...
效果如下：
2.在列標(biāo)題后面添加一個(gè)單選框
還是以上面的代碼為例件蚕，只寫關(guān)鍵代碼：
...
// render 事件
renderHeader (h,{column}) { // h即為cerateElement的簡(jiǎn)寫孙技，具體可看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.在表頭添加一個(gè)Tooltip
我們經(jīng)常會(huì)遇到一些奇怪的需求，但是即使再奇怪我們也不能認(rèn)輸排作，現(xiàn)在有一個(gè)需求牵啦，要在列表表題后面添加一個(gè)提示，我們開始嘗試著做：
還是以上面的代碼為例妄痪，剛開始我想直接用‘el-tooltip’哈雏，應(yīng)該不是很難，然后就是這樣：
...
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: '這是一個(gè)提示'
})
]
);
}
...
運(yùn)行后發(fā)現(xiàn)，基本樣式出來(lái)了裳瘪，但是提示沒(méi)有
根據(jù)element-ui 關(guān)于tooltip的文檔土浸，我發(fā)現(xiàn)不管是effect, content還是placement 對(duì)tooltip都不管用，既然硬上不管用彭羹，就曲線救國(guó)黄伊，通過(guò)組件的方法，先造個(gè)輪子再走路
// 寫一個(gè)PromptMessage的組件派殷，并全局注冊(cè)
<template>
<div class="tooltip">
<el-tooltip effect="dark" placement="right">
<div slot="content"> // 插槽还最，可提供多行的提示信息
<p v-for="item in messages" :key="item">
{{item}}
</p>
</div>
<i class="el-icon-question" style="color:#409eff;margin-left:5px;font-size:15px;"></i>
</el-tooltip>
</div>
</template>
<script>
export default {
props:['messages']
};
</script>
然后在render-header事件中使用組件
...
renderTip (h,{column}) {
return h(
'div',{
style:'display:flex;margin:auto;'
},
[
h('span', column.label),
h('prompt-message', {
props: {messages: ["這是住址信息"]}
})
]
);
}
...
這次我們發(fā)現(xiàn)，果然造的輪子還是挺不錯(cuò)的
JSX語(yǔ)法
或許你會(huì)發(fā)現(xiàn)毡惜，這個(gè)原生的createElement 寫起來(lái)并不簡(jiǎn)單拓轻，而且很費(fèi)事，我們也可以采用JSX的方式虱黄，這個(gè)在Vue官方文檔中有提到
查看文檔悦即，可以找到安裝使用的方法
安裝完成后想要再實(shí)現(xiàn)tooltip就簡(jiǎn)單了
...
renderTip (h,{column}) {
return (
<el-tooltip class="tooltip" effect="dark" placement="right">
<ul slot="content">
<li>這是第一個(gè)提示</li>
<li>這是第二個(gè)提示<li>
</ul>
<i class="el-icon-question"></i>
</el-tooltip>
);
}
...
這樣看著很好理解，寫起來(lái)也很方便
