• 关于如何在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;});
            }
  • 相关阅读:
    excel生成数据地图
    利用web of science做论文综述
    机器学习算法一览图
    什么是机器学习?
    机器学习十大算法(二)
    机器学习十大算法(一)
    django传值出现二进制乱码(基于python3)
    解决mysql的动态添加字段以及数据的方法(基于python3.6)
    odoo权限控制
    win32service的解决办法(pywin32)
  • 原文地址:https://www.cnblogs.com/blueroses/p/8032952.html
Copyright © 2020-2023  润新知