在开发单位自己的系统时,领导提了这个需求,在看了ElementUI发现并没有实现这个功能。
遂向官方求解,得回复:自己在filter-method 中实现。于是便有了思路。
这里本人使用了一个比较暴力的方法,仅供参考:
1、给所有column的filter-method事件绑定一个对应方法:
filterMethodsXXX(value, row){ if(row.brandName === value) { if(this.filterArray.filterXXXSet.indexOf(row.id)===-1){ this.filterArray.filterXXXSet.push(row.id); } return true; }else{ return false; } }
意思就是给每个column设置一个数组用于存储筛选结果。
2、在Table的filter-change事件中绑定一个方法,使用使用ES6 中的Set 数据结构进行交集操作(数组为空则跳过计算)
filterChange(filters){ let tempSet = new Set(this.filterArray.filterBrandNameArray); for (let key in this.filterArray) { if(this.filterArray[key].length===0){ continue; } tempSet = new Set(this.filterArray[key].filter(x => tempSet.has(x))); }
最终tempSet的长度即为统计值。
let a = new Set([1, 2, 3]); let b = new Set([3, 5, 2]); // 交集 let intersectionSet = new Set([...a].filter(x => b.has(x))); // [2,3]
之后发现其实可以用array的indexOf来做,没必要用Set,于是:
let tempSet = this.filterArray.filterBrandNameArray; for (let key in this.filterArray) { if(this.filterArray[key].length===0){ continue; } tempSet = this.filterArray[key].filter(x => {return tempSet.indexOf(x)!==-1;}); }
时间: 2024-10-08 13:41:31