首先，写一个基础的表格。(参考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);

}

}

};

然后，实现表格列配置模板，用于设置列的显示与隐藏。

这里使用一组复选框，默认选中所有可供配置的表格列。

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;

}

})

}

}

}

}