首先，寫一個基礎的表格。(參考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;

}

})

}

}

}

}

總結

以上是生活随笔為你收集整理的表格html5 隐藏字段,element-ui表格组件table实现列的动态显示与隐藏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。