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;});
            }
  • 相关阅读:
    C# if else 使物体在X轴循环移动
    Jmeter之csv、用户自定义变量以及Query Type分析
    jmeter实战之笔记整理
    Badboy参数化
    Jmeter之Badboy录制脚本及简化脚本http请求
    jmeter之jdbc请求
    性能测试
    接口自动化学习--testNG
    接口自动化学习--mock
    Git工具使用小结
  • 原文地址:https://www.cnblogs.com/blueroses/p/8032952.html
Copyright © 2011-2022 走看看