当前位置：首页 > news >正文

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

news 2025/8/13 13:04:17

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

   <el-form-item label="假勤类型:"><MutiSelectv-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中的每个vval.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 = truethis.newColumns = filteredColumnsif (val.length == 0) {this.newColumns = this.columns}}},