关于table:elementui表格组件table实现列的动态显示与隐藏

前言

在开发后盾管理系统中，表格是常常用到的数据展现形式。然而，有时候表格展现的列过多，会呈现一屏展现不下，须要手动滚动滚动条查看的状况。

其实，在零碎理论应用的过程中，不同用户关注的列不同，并不是肯定要展现所有的列。因而，能够开发一个可能配置表格须要展现的列的性能，这样只展现关注的列，不关注的列就无需在页面上展现，进步用户的应用体验。

需要

要求能够动静配置表格中须要展现的列，默认展现所有列。

思路

1. 将列数据定义在 data 中，而后动静绑定列数据到模板上
2. 提供一组用于设置列展现的复选框，默认选中所有列，即默认展现所有列
3. 选中或勾销选中某个列时，更新模板中动静绑定的列数据，实现页面只显示须要展现的列

开发

状态

首先依据思路，能够确定几个状态：

• tableData 表格数据
• tableColumns 表格所有列数据，列数据的惟一起源
• bindTableColumns 绑定到模板上的列数据，即须要展现的列数据
• checkedTableColumns 复选框中选中的列数据

实现

而后开始实现：

1. 首先，写一个根底的表格。（参考 element-ui 根底表格）

   <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: "上海市普陀区金沙江路 1518 弄",
           },
           {
             date: "2016-05-04",
             name: "王小虎",
             address: "上海市普陀区金沙江路 1517 弄",
           },
           {
             date: "2016-05-01",
             name: "王小虎",
             address: "上海市普陀区金沙江路 1519 弄",
           }
         ],
       };
     },
   };
   </script>

2. 而后，优化模板。

   将表格的列数据 tableColumns 定义在 data 中，在模板中通过 v-for 指令遍历列数据。

   <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>

3. 其次，优化列数据 tableColumns，给每一个column 增加 show 属性，用于示意列的显示与暗藏。默认为true，即默认展现所有列。

   <script>
   export default {data() {
       return {
         tableColumns: [
           {
             prop: "date",
             label: "日期",
             show: true
           },
           {
             prop: "name",
             label: "姓名",
             show: true
           },
           {
             prop: "address",
             label: "地址",
             show: true
           },
         ],
       };
     },
   };
   </script>

4. 再次，增加一个 computed 属性bindTableColumns，用于过滤出须要展现的列，并绑定到模板上。

   这样，后续对列的配置都只会操作 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>

5. 而后，实现表格列配置模板，用于设置列的显示与暗藏。

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

   <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，这样写的益处是不必本人手动监听复选框的选中事件 */
         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 = hide;
               }
             })
           }
         }
       }
     }
   </script>

在线示例：

CodePen: element-ui table 表格组件设置展现列的显示与暗藏