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

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

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

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

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

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

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

而后开始实现：

首先，写一个根底的表格。（参考 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>

而后，优化模板。

将表格的列数据 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>

其次，优化列数据 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>

再次，增加一个 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>

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

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

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

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

前言

需要

思路

开发

状态

实现

在线示例：