监听 el-table 列的显示与隐藏

监听 el-table 列的显示与隐藏

​ 🎲🎲🎲

• 监听el-table列的显示与隐藏

  • 🪶使用 按钮 对话框 复选框 watch监听 实现
  • 🪶还有其它的方法，以下列举用 watch 监听的方法

• 代码区域

  • 🎑按钮表格对话框

    <template>
    		 <div>
            // 按钮
            <el-button @click="filter()" size="small" type="success">筛选列</el-button>
           
            // 表格
             <el-table
                    ref="table"
                    :data="list"
                    height="250"
                    border
            >
                <el-table-column
                        align="center"
                        prop="date"
                        label="日期"
                        v-if="columnHeaders[0].isShow">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="name"
                        label="姓名"
                        v-if="columnHeaders[1].isShow">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="address"
                        label="地址"
                        v-if="columnHeaders[2].isShow">
                </el-table-column>
             </el-table>
           
            // 对话框
              <el-dialog
                    title="筛选列"
                    :visible.sync="filterDialog"
                    width="50%">
                <el-checkbox-group v-model="columnSelected">
                    <el-checkbox v-for="item in columnHeaders" :label="item.title" :key="item.index"></el-checkbox>
                </el-checkbox-group>
                <span slot="footer">
                </span>
            </el-dialog>
         </div>
    </template>
    

  • 🎑监听表格

    <script>
      export default{
        data(){
          return{
            // 表格数据
            list:[
              {
                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 弄'
              }
            ],
            // 对话框是否显示
            filterDialog: false,
            // 表格列已经选择项
            columnSelected: [],
            // 筛选表格的表头信息 index 排序 title 表头 isShow 是否展示
            columnHeaders: [
                {index: 0, title: "日期", isShow: true},
                {index: 1, title: "姓名", isShow: true},
                {index: 2, title: "地址", isShow: true},
            ],
          }
        },
        watch: {
          // 监听列表显示隐藏
          columnSelected(newArrayVal) {
                // 计算为被选中的列标题数组
                let nonSelecteds = this.columnHeaders.filter(item => newArrayVal.indexOf(item.title) == -1).map(item => item.title);
                // 根据计算结果进行表格重绘
                this.columnHeaders.filter((item, i) => {
                    let isNonSelected = nonSelecteds.indexOf(item.title) != -1;
                    if (isNonSelected) {
                        // 修改选中的 columnHeaders 里面 isShow 和 title 的状态
                        this.columnHeaders[i].isShow = false;
                        this.columnHeaders[i].title = item.title;
                        // 隐藏未选中的列
                        item.isShow = false;
                        this.$nextTick(() => {
                            this.$refs.table.doLayout();
                        })
                    } else {
                        // 修改未选中的 columnHeaders 里面 isShow 和 title 的状态
                        this.columnHeaders[i].isShow = true;
                        this.columnHeaders[i].title = item.title;
                        // 显示已选中的列
                        item.isShow = true;
                        this.$nextTick(() => {
                            this.$refs.table.doLayout();
                        })
                    }
                })
            }
        },
        methods: {
          // 筛选列
          filter() {
                // 默认全部选中
                // 注意：对话框第 1 次打开时复选框需要默认全部选中，仅仅是第 1 次
                // 判断 columnHeaders 数组中的 isShow 是否全是 true
                // 有 1 个是 false 的都不是第 1 次 打开对话框
                let flag = this.columnHeaders.map(item => {
                    return item.isShow
                }).indexOf(false);
                if (flag == -1) {
                    this.columnSelected = this.columnHeaders.map(item => {
                        return item.title;
                    });
                }
                this.filterDialog = true;
            }
        }
      }
    </script>