乐趣区

关于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 中列的显示与暗藏属性 showbindTableColumns 会自动更新,页面也会主动从新渲染。

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

退出移动版