首先,写一个基础的表格。(参考element-ui基础表格)
export default {
data() {
return {
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
}
],
};
},
};
然后,优化模板。
将表格的列数据tableColumns定义在data中,在模板中通过v-for指令遍历列数据。
v-for="column in tableColumns"
:key="column.prop"
:prop="column.prop"
:label="column.label"
>
export default {
data() {
return {
tableColumns: [
{
prop: "date",
label: "日期",
},
{
prop: "name",
label: "姓名",
},
{
prop: "address",
label: "地址",
},
],
};
},
};
其次,优化列数据tableColumns,给每一个column添加show属性,用于表示列的显示与隐藏。默认为true,即默认展示所有列。
export default {
data() {
return {
tableColumns: [
{
prop: "date",
label: "日期",
show: true
},
{
prop: "name",
label: "姓名",
show: true
},
{
prop: "address",
label: "地址",
show: true
},
],
};
},
};
再次,添加一个computed属性bindTableColumns,用于过滤出需要展示的列,并绑定到模板上。
这样,后续对列的配置都只会操作tableColumns中列的显示与隐藏属性show,bindTableColumns会自动更新,页面也会自动重新渲染。
v-for="column in bindTableColumns"
:key="column.prop"
:prop="column.prop"
:label="column.label"
>
export default {
computed: {
bindTableColumns() {
return this.tableColumns.filter((column) => column.show);
}
}
};
然后,实现表格列配置模板,用于设置列的显示与隐藏。
这里使用一组复选框,默认选中所有可供配置的表格列。
请选择表格需要展示的列:
v-for="column in columns"
:key="column.prop"
:label="column.prop"
>{{ column.label }}
>
export default {
computed: {
/* 这里使用了getter和setter,这样写的好处是不用自己手动监听复选框的选中事件 */
checkedTableColumns: {
get() {
// 返回选中的列名
return this.bindTableColumns.map(column => column.prop);
},
set(checked) {
// 设置表格列的显示与隐藏
this.tableColumns.forEach(column => {
// 如果选中,则设置列显示
if(checked.includes(column)) {
column.show = true;
} else {
// 如果未选中,则设置列隐藏
column.show = false;
}
})
}
}
}
}