前言
在開發(fā)后臺管理系統(tǒng)中，表格是經(jīng)常用到的數(shù)據(jù)展示方式。然而，有時(shí)候表格展示的列過多，會出現(xiàn)一屏展示不下，需要手動滾動滾動條查看的情況。
其實(shí)，在系統(tǒng)實(shí)際使用的過程中，不同用戶關(guān)注的列不同，并不是一定要展示所有的列。因此，可以開發(fā)一個(gè)能夠配置表格需要展示的列的功能，這樣只展示關(guān)注的列，不關(guān)注的列就無需在頁面上展示，提高用戶的使用體驗(yàn)。
需求
要求可以動態(tài)配置表格中需要展示的列，默認(rèn)展示所有列。
思路
- 將列數(shù)據(jù)定義在
data中，然后動態(tài)綁定列數(shù)據(jù)到模板上 - 提供一組用于設(shè)置列展示的復(fù)選框，默認(rèn)選中所有列，即默認(rèn)展示所有列
- 選中或取消選中某個(gè)列時(shí)，更新模板中動態(tài)綁定的列數(shù)據(jù)，實(shí)現(xiàn)頁面只顯示需要展示的列
開發(fā)
狀態(tài)
首先根據(jù)思路，可以確定幾個(gè)狀態(tài)：
-
tableData表格數(shù)據(jù) -
tableColumns表格所有列數(shù)據(jù)，列數(shù)據(jù)的唯一來源 -
bindTableColumns綁定到模板上的列數(shù)據(jù)，即需要展示的列數(shù)據(jù) -
checkedTableColumns復(fù)選框中選中的列數(shù)據(jù)
實(shí)現(xiàn)
然后開始實(shí)現(xiàn)：
-
首先，寫一個(gè)基礎(chǔ)的表格。（參考element-ui基礎(chǔ)表格）
<template> <el-table :data="tableData"> <el-table-column prop="date" label="日期"> </el-table-column> <el-table-column prop="name" label="姓名"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { date: "2016-05-02", name: "王小虎", address: "上海市普陀區(qū)金沙江路 1518 弄", }, { date: "2016-05-04", name: "王小虎", address: "上海市普陀區(qū)金沙江路 1517 弄", }, { date: "2016-05-01", name: "王小虎", address: "上海市普陀區(qū)金沙江路 1519 弄", } ], }; }, }; </script> -
然后，優(yōu)化模板。
將表格的列數(shù)據(jù)
tableColumns定義在data中，在模板中通過v-for指令遍歷列數(shù)據(jù)。<template> <el-table :data="tableData"> <el-table-column v-for="column in tableColumns" :key="column.prop" :prop="column.prop" :label="column.label" > </el-table-column> </el-table> </template> <script> export default { data() { return { tableColumns: [ { prop: "date", label: "日期", }, { prop: "name", label: "姓名", }, { prop: "address", label: "地址", }, ], }; }, }; </script> -
其次，優(yōu)化列數(shù)據(jù)
tableColumns，給每一個(gè)column添加show屬性，用于表示列的顯示與隱藏。默認(rèn)為true，即默認(rèn)展示所有列。<script> export default { data() { return { tableColumns: [ { prop: "date", label: "日期", show: true }, { prop: "name", label: "姓名", show: true }, { prop: "address", label: "地址", show: true }, ], }; }, }; </script> -
再次，添加一個(gè)
computed屬性bindTableColumns，用于過濾出需要展示的列，并綁定到模板上。這樣，后續(xù)對列的配置都只會操作
tableColumns中列的顯示與隱藏屬性show，bindTableColumns會自動更新，頁面也會自動重新渲染。<template> <el-table :data="tableData"> <el-table-column v-for="column in bindTableColumns" :key="column.prop" :prop="column.prop" :label="column.label" ></el-table-column> </el-table> </template> <script> export default { computed: { bindTableColumns() { return this.tableColumns.filter((column) => column.show); } } }; </script>
-
然后，實(shí)現(xiàn)表格列配置模板，用于設(shè)置列的顯示與隱藏。
這里使用一組復(fù)選框，默認(rèn)選中所有可供配置的表格列。
<template> <div> <label>請選擇表格需要展示的列：</label> <el-checkbox-group v-model="checkedTableColumns"> <el-checkbox v-for="column in columns" :key="column.prop" :label="column.prop" >{{ column.label }}</el-checkbox > </el-checkbox-group> </div> </template> <script> export default { computed: { /* 這里使用了getter和setter，這樣寫的好處是不用自己手動監(jiān)聽復(fù)選框的選中事件 */ checkedTableColumns: { get() { // 返回選中的列名 return this.bindTableColumns.map(column => column.prop); }, set(checked) { // 設(shè)置表格列的顯示與隱藏 this.tableColumns.forEach(column => { // 如果選中，則設(shè)置列顯示 if(checked.includes(column)) { column.show = true; } else { // 如果未選中，則設(shè)置列隱藏 column.show = false; } }) } } } } </script>
