通过点击checkbox来控制table其他列的显示与隐藏
展示表格时有太多的列,避免展示不开出现滑动条,为了美观只展示一部分的数据,其他的根据用户自己需求想要展示或者隐藏,所以想用checkbox开控制table列
tableData: [],//表格数据
tableHead: [],//表格所有列数据,列数据的唯一来源
checklist: [],//checkbox数据,即暂时隐藏起来的数据
bindTableColumns:[] // 绑定到模板上的列数据,即需要展示的列数据
checkboxVal:[] //选中的列数据
html
<el-checkbox-group v-model="checkboxVal" >
<el-checkbox v-for="item in checklist" :label="item.Lable" :key="item.ID">{{item.Lable }}</el-checkbox>
</el-checkbox-group>
//表格展示,根据获取的数据自行修改
<el-table :data="tableData">
<el-table-column v-for="(item,i) in bindTableColumns" :key="item.ID" :prop="item.Name"
:label="item.Label" >
</el-table-column>
</el-table>
js
<script>
export default {
data() {
return {
tableData: [],
tableHead: [],
checklist: [],
};
},
//我的数据格式
/* tableHead: [{
ID: 1,
Label: '日期',
IsNulls: false,//初始隐藏
Name: 'date'
}, {
ID: 2,
Label: '地点',
IsNulls: false,//初始隐藏
Name: 'address'
},
{
ID: 3,
Label: '姓名',
IsNulls: true, //初始显示
Name: 'name'
}],*/
//我将tableHead分成了两部分 bindTableColumns和checkList,其中bindTableColumns为初始展示部分即IsNulls为true的部分,checkList为隐藏部分即IsNulls为false的部分
computed: {
bindTableColumns: {
get() {
return this.tableHead.filter((column) => column.IsNulls);
},
set(val) {},
},
checkboxVal: {
get() {
// 返回选中的列名
return this.bindTableColumns.map(column => column.Label);
},
set(checked) {
// 设置表格列的显示与隐藏
this.tableHead.forEach(column => {
// 如果选中,则设置列显示
if (checked.includes(column.Label)) {
column.IsNulls = true;
} else {
// 如果未选中,则设置列隐藏
column.IsNulls = false;
}
})
}
}
},
};
</script>
我的tableHead请求后端时自己带了刚开是否显示隐藏的属性(IsNulls),如果没有就自己循环添加一个字段,方便后续使用