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

2022年01月15日 阅读数:2
这篇文章主要向大家介绍监听 el-table 列的显示与隐藏,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

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

​ 🎲🎲🎲vue

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

    • 🪶使用 按钮 对话框 复选框 watch监听 实现
    • 🪶还有其它的方法,如下列举用 watch 监听的方法
  • 代码区域this

    • 🎑按钮表格对话框spa

      <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>
      
    • 🎑监听表格code

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