近期要實(shí)現(xiàn)一個(gè)el-table的表頭自定義功能，可以根據(jù)復(fù)選框的選中或者不選實(shí)現(xiàn)表格列的顯示隱藏桩撮，自定義展示表格列表，通過網(wǎng)上的一些例子來實(shí)現(xiàn)了一下。
實(shí)現(xiàn)的效果如下：
WechatIMG15.jpeg
WechatIMG14.jpeg
代碼如下：
1. table表格部分
<el-table
border
:data="list"
stripe
max-height="460"
>
<af-table-column
type="selection"
fixed
width="55">
</af-table-column>
<af-table-column
v-for="(item,index) in tableHeader"
v-if="colData[index].istrue"
:key="item.key"
show-overflow-tooltip
:label="item.label"
:header-align = "headFormat"
:resizable = "resizable"
>
<template slot-scope="scope">
{{scope.row[item.key]}}
</template>
</af-table-column>
</el-table>
2.數(shù)據(jù)部分
data () {
return {
list: [
{
id: '上海市普陀',
zbh: '上海市普陀',
kind: '上海市普',
qd: '上海市普',
user: '上海市普',
id1: '1上海市普',
}
],
colOptions: ['上海市普', '上海市普22', '核心存款時(shí)點(diǎn)', '所屬機(jī)構(gòu)編號1'], // 多選框的選擇項(xiàng)
colSelect: ['上海市普', '上海市普22', '核心存款時(shí)點(diǎn)', '所屬機(jī)構(gòu)編號1'], // 多選框已選擇的內(nèi)容痢艺，即表格中顯示的列
// istrue屬性存放列的狀態(tài)
colData: [
{ title: '上海市普', istrue: true },
{ title: '上海市普22', istrue: true },
{ title: '核心存款時(shí)點(diǎn)', istrue: true },
{ title: '所屬機(jī)構(gòu)編號1', istrue: true }
],
tableHeader: [
{ label: '上海市普', key: 'zbh' },
{ label: '上海市普22', key: 'kind' },
{ label: '核心存款時(shí)點(diǎn)', key: 'qd' },
{ label: '所屬機(jī)構(gòu)編號1', key: 'id1' }
]
}
}
3.方法
watch: {
colOptions(newVal, oldVal) {
if (newVal) { // 如果有值發(fā)生變化，即多選框的已選項(xiàng)變化
var arr = this.colSelect.filter(i => newVal.indexOf(i) < 0) // 未選中
this.colData.filter(i => {
if (arr.indexOf(i.title) !== -1) {
i.istrue = false
} else {
i.istrue = true
}
})
}
}
}
