【vxe-table】多选筛选项对列表的列进行动态的显示与隐藏

需求：
列表的组成部分由：一些固定的列，如:姓名，工号，以及 需要动态显示与隐藏的列，如：出勤、旷工、事假、病假等假勤类型
1、通过多选框多选，展示选中的列，未选中的不展示
2、当多选框全部清空的时候，展示原来的所有列

   <el-form-item label="假勤类型:">
            <MutiSelect
              v-model="attendanceTypeArr"
              :dictOption="dictOptions.attendance_type"
              @change="val => mutiChange(val, 'attendanceType')"
              style="width: 140px"
            ></MutiSelect>
          </el-form-item>

 	<VxeTable            
      :vxe-table-id="vxeTableId"
      :columns="isNew ? newColumns : columns"
      :dataSource="dataSource"
    ></VxeTable>

data

      newColumns: [],
      columns: [],
      dataSource: [],

    // 假勤类型多选事件
    mutiChange(val, type) {
      if (type == 'attendanceType') {
        let matchedLabels = []
        this.dictOptions.attendance_type.forEach(item => {
          // 遍历val中的每个v
          val.forEach(v => {
            // 如果item.dictValue等于v，将item.dictLabel添加到matchedLabels数组中
            if (item.dictValue === v) {
              matchedLabels.push(item.dictLabel)
            }
          })
        })
        let filteredColumns = this.columns.filter(column => {
          // 检查列的title是否包含matchedLabels中的值
          return (
            matchedLabels.some(label => column.title.includes(label)) || ['userCode', 'userName', 'deptName', 'postName', 'userType'].includes(column.field)
          )
        })
        // 此时filteredColumns数组中包含了过滤后的列定义
        this.isNew = true
        this.newColumns = filteredColumns
        if (val.length == 0) {
          this.newColumns = this.columns
        }
      }
    },