zoukankan      html  css  js  c++  java
  • 关于如何在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;});
            }
  • 相关阅读:
    13.4 对锁和字段风格的事件的微小改变
    JavaWeb-session相关常用的方法
    JavaWeb-UUID
    JavaWeb-seession原理
    JavaWeb-HttpSession入门
    JavaWeb-Cookie的路径
    JavaWeb-Cookie的生命
    JavaWeb-Cookie介绍
    JavaWeb-JSP原理
    JSP文件生成的java文件和class文件所在的路径(eclipse和tomcat)
  • 原文地址:https://www.cnblogs.com/blueroses/p/8032952.html
Copyright © 2011-2022 走看看