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

Posted 2020-10-17 湛蓝玫瑰

在开发单位自己的系统时，领导提了这个需求，在看了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;});
        }