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

75次阅读

共计 2650 个字符,预计需要花费 7 分钟才能阅读完成。

前言

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

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

需要

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

思路

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

正文完
 0