關於如何在ElementUI中實現統計Table篩選結果數量

在開發單位自己的系統時，領導提了這個需求，在看了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;});
        }