Element-ui自定義table表頭、修改列標(biāo)題樣式、添加tooltip、:render-header使用
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è)提示,我們開(kāi)始嘗試著做:
還是以上面的代碼為例,剛開(kāi)始我想直接用‘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)也很方便
補(bǔ)充:
最近有個(gè)需求,需要在每次對(duì)el-table的單項(xiàng)進(jìn)行勾選時(shí),使用@select-change去調(diào)取后臺(tái)接口,更改表格數(shù)據(jù)。
然而,el-table的selection列有個(gè)大bug。
首先,獲取后的數(shù)據(jù)對(duì)于el-table的selection列來(lái)說(shuō),沒(méi)有字段props可以去接收,這就導(dǎo)致沒(méi)有數(shù)據(jù)是選中的,會(huì)直接觸發(fā)@select-change方法,回調(diào)參數(shù)val為[]。
其次,selection需要使用toggleSelection方法去更改,當(dāng)更改時(shí),又一次觸發(fā)@select-change方法,這顯然不符合需求。
因此,需要自定義table的表頭信息,設(shè)置為el-checkbox。
代碼如下
// 自定義表頭select
renderHeader(h, {column, $index}) {
return h("span", {}, [
h('el-checkbox',{
props: {
checked: this.allchecked
},
on:{
change: this.updateAllSelected // 選中事件
}
})]);
},
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
一起寫一個(gè)即插即用的Vue Loading插件實(shí)現(xiàn)
這篇文章主要介紹了一起寫一個(gè)即插即用的Vue Loading插件實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
vue實(shí)現(xiàn)網(wǎng)易云音樂(lè)純界面
這篇文章主要為大家介紹了vue實(shí)現(xiàn)網(wǎng)易云音樂(lè)純界面過(guò)程詳解,附含詳細(xì)源碼,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07
vue.js中v-on:textInput無(wú)法執(zhí)行事件問(wèn)題的解決過(guò)程
大家都知道vue.js通過(guò)v-on完成事件處理與綁定,但最近使用v-on的時(shí)候遇到了一個(gè)問(wèn)題,所以下面這篇文章主要給大家介紹了關(guān)于vue.js中v-on:textInput無(wú)法執(zhí)行事件問(wèn)題的解決過(guò)程,需要的朋友可以參考下。2017-07-07
Vue實(shí)現(xiàn)版本檢測(cè)與升級(jí)提示
在現(xiàn)代Web應(yīng)用開(kāi)發(fā)中,版本檢測(cè)與升級(jí)提示是提升用戶體驗(yàn)的重要環(huán)節(jié),本文將詳細(xì)介紹如何在Vue應(yīng)用中實(shí)現(xiàn)這一功能,有需要的小伙伴可以參考一下2025-04-04
解決echarts中橫坐標(biāo)值顯示不全(自動(dòng)隱藏)問(wèn)題
這篇文章主要介紹了解決echarts中橫坐標(biāo)值顯示不全(自動(dòng)隱藏)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
使用vue腳手架(vue-cli)搭建一個(gè)項(xiàng)目詳解
這篇文章主要介紹了vue腳手架(vue-cli)搭建項(xiàng)目,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05

