广州开发网站建设,北京电力交易中心,泰州网站设计咨询,Wordpress数据大了会爆需求#xff1a; 列表的组成部分由#xff1a;一些固定的列#xff0c;如:姓名#xff0c;工号#xff0c;以及 需要动态显示与隐藏的列#xff0c;如#xff1a;出勤、旷工、事假、病假等假勤类型 1、通过多选框多选#xff0c;展示选中的列#xff0c;未选中的不展示…需求 列表的组成部分由一些固定的列如:姓名工号以及 需要动态显示与隐藏的列如出勤、旷工、事假、病假等假勤类型 1、通过多选框多选展示选中的列未选中的不展示 2、当多选框全部清空的时候展示原来的所有列 el-form-item label假勤类型:MutiSelectv-modelattendanceTypeArr:dictOptiondictOptions.attendance_typechangeval mutiChange(val, attendanceType)stylewidth: 140px/MutiSelect/el-form-itemVxeTable :vxe-table-idvxeTableId:columnsisNew ? newColumns : columns:dataSourcedataSource/VxeTabledata 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}}},
