根据checkbox勾选动态渲染表头
2019-04-29
思路
首先表头是个数组,在渲染el-table-column
时,
遍历表头数组取得所有可以渲染的column
设置v-if
来控制column的显示隐藏,通过判断遍历的表头是否已被checkbox选中
当checkbox变更后,触发方法使v-if
获得的值取反,并修改表头数组的值
这里仅贴出核心代码
checkbox组件
<!-- 勾选属性 -->
<div id="checkbox"
>
<span v-for="title in header"
:key="title"
v-if="hackReset">
<el-checkbox :label="title"
v-if="title=='NAME'?false:true"
@change="handleChange(select_show,title)"></el-checkbox>
</span>
</div>
table组件
<!-- 表格 -->
<el-table :data="tabledata">
<el-table-column :label="title"
v-for="title in header"
:key="title"
v-if="isInArray(select_show,title)">
<template slot-scope="scope">
<div v-if="title === 'NAME'">
<span v-for="(v,k) in scope.row[title]"
:key="k" />
</div>
<div v-else>
{{scope.row[title]}}
</div>
</template>
</el-table-column>
</el-table>
methods
methods: {
handleSelected() {
this.header = []
// 第一个表头始终是'NAME'
this.header.push('NAME')
// 设置表头
数组
for (const i in this.selected) {
this.header.push(this.selected[i].join('/'))
}
// 强制刷新checkbox状态
this.hackReset = false
this.$nextTick(() => {
this.hackReset = true
this.select_show = ['NAME']
})
},
// 判断value是否在arr中
isInArray(arr, value) {
for (var i = 0; i < arr.length; i++) {
if (value === arr[i]) {
return true
}
}
return false
}
,
// 如果已经被选中过,删除;否则添加
handleChange(arr, value) {
if (this.isInArray(this.select_show, value)) {
var index = arr.indexOf(value)
if (index > -1) {
arr.splice(index, 1)
}
} else {
this.select_show.push(value)
}
}
}
标题:根据checkbox勾选动态渲染表头
作者:fish2018
地址:https://www.devopser.org/articles/2019/04/29/1556527529497.html