前言

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

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

需要

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

思路

  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表格组件设置展现列的显示与暗藏