关于如何在ElementUI中实现统计Table筛选结果数量

在开发单位自己的系统时,领导提了这个需求,在看了ElementUI发现并没有实现这个功能。

遂向官方求解,得回复:自己在filter-method 中实现。于是便有了思路。

这里本人使用了一个比较暴力的方法,仅供参考:

1、给所有column的filter-method事件绑定一个对应方法:

     filterMethodsXXX(value, row){
if(row.brandName === value) {
if(this.filterArray.filterXXXSet.indexOf(row.id)===-){
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;});
}
上一篇:《Caffe下跑AlxNet之数据处理过程》


下一篇:Oracle表空间数据文件迁移