監聽 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>