vue实现动态控制el-table表格列的展示与隐藏
本文实例为大家分享了vue动态控制el-table表格列的展示与隐藏的具体代码,供大家参考,具体内容如下
1.引入el-table组件,这里我直接用官网的示例代码
<template> <div class="page"> <el-popover width="60" trigger="click"> <el-checkbox-group v-model="columnSelecteds"> <el-checkbox v-for="item in columnHeaders" :label="item.title" :key="item.title" ></el-checkbox> </el-checkbox-group> <el-button slot="reference" icon="el-icon-more" circle style="margin-left: 100px;"></el-button> </el-popover> <el-table :data="tableData" ref="dataTable" stripe style="width: 100%"> <el-table-column v-if="columnHeaders[0].isShow" prop="date" label="日期"></el-table-column> <el-table-column v-if="columnHeaders[1].isShow" prop="name" label="姓名"></el-table-column> <el-table-column v-if="columnHeaders[2].isShow" prop="address" label="地址"></el-table-column> </el-table> </div> </template>
页面效果图:
2.数据绑定与监听
<script> export default { name: 'ElTableTest', data() { return { // 表格数据 tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }], //表头信息 columnHeaders: [ {index: 0, title: "日期", isShow: true}, {index: 1, title: "姓名", isShow: true}, {index: 2, title: "地址", isShow: true} ], //已选择的项 columnSelecteds: ["日期","姓名", "地址"] } }, watch: { /** * @title 监听列显示隐藏 */ columnSelecteds(newArrayVal) { // 计算为被选中的列标题数组 var nonSelecteds = this.columnHeaders .filter(item => newArrayVal.indexOf(item.title) == -1) .map(item => item.title) // 根据计算结果进行表格重绘 this.columnHeaders.filter(item => { let isNonSelected = nonSelecteds.indexOf(item.title) != -1 if (isNonSelected) { // 隐藏未选中的列 item.isShow = false this.$nextTick(() => { this.$refs.dataTable.doLayout() }) } else { // 显示已选中的列 item.isShow = true this.$nextTick(() => { this.$refs.dataTable.doLayout() }) } }) } } } </script>
监听到已选择和未选择的列,调用doLayout()方法对表格进行重绘。
最终效果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)