在开发单位自己的系统时,领导提了这个需求,在看了ElementUI发现并没有实现这个功能。

遂向官方求解,得回复:自己在filter-method 中实现。于是便有了思路。

这里本人使用了一个比较暴力的方法,仅供参考:

1、给所有column的filter-method事件绑定一个对应方法:

     filterMethodsXXX(value, row){
if(row.brandName === value) {
if(this.filterArray.filterXXXSet.indexOf(row.id)===-){
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;});
}

关于如何在ElementUI中实现统计Table筛选结果数量的更多相关文章

  1. 如何在ElementUI中的Table控件中使用拼音进行排序

    本人使用版本是1.4.7 在这个版本中对应全是String的column进行排序并不是按照拼音的方式排列的. 这里我贴一下源代码就可以看出是为什么了: export const orderBy = f ...

  2. 如何在react中实现一个table切换?

    废话不说,直接贴代码,供新手参考 <!DOCTYPE html> export default class TabComponent extends Component { constru ...

  3. element-ui 中的table的列隐藏问题

    element-ui 中的table和bootstrap中的table的某些设置还是有一定的差别的.之前用bootstrap做的表格,想要实现简短列和详细列的切换.因为详细列实在有太多列了,拉动滚动条 ...

  4. (转)如何在Linux中统计一个进程的线程数

    如何在Linux中统计一个进程的线程数 原文:http://os.51cto.com/art/201509/491728.htm 我正在运行一个程序,它在运行时会派生出多个线程.我想知道程序在运行时会 ...

  5. 使用element-ui中table expand展开行控制显示隐藏

    问题讲解:在使用vue版本的ElementUI中的table功能的时候还是遇到了一些问题,可以说饿了么团队在这个UI框架的文档撰写已经非常不错了,不过还是有一些方法乍一看让人摸不着头脑,有些table ...

  6. vue如何循环渲染element-ui中table内容

    对于大多数前端开发者来说,vuejs+element-ui是开发后台管理系统过程中必不可少的技术框架.而后台管理系统中,最常见的形式就是表格和表单,以便用来增删改查. element-ui中table ...

  7. element-ui中table渲染的快速用法

    element-ui中对table数据的渲染有一些模板式的操作,基本按照模板渲染数据即可 基本模板样式如下 <el-table :data="studentData.rows" ...

  8. Element-UI中关于table表格的样式操作

    项目中使用到element-ui组件库,经常需要操作表格,编辑样式的过程中遇到一些问题,官网针对table给出了很多的api,自己可以自定义,基本能满足产品需求,但是没有给出具体的案例,网上的资料也比 ...

  9. 如何在 Linux 中查看可用的网络接口

    在我们安装完一个 Linux 系统后最为常见的任务便是网络配置了.当然,你可以在安装系统时进行网络接口的配置.但是,对于某些人来说,他们更偏爱在安装完系统后再进行网络的配置或者更改现存的设置.众所周知 ...

随机推荐

  1. PyCharm设置字体风格

    设置字体风格:File—Setting—Editor-Color Scheme-Color Scheme Font-把Scheme设置为:WarmNeon

  2. json数据转为Map集合

    我是利用Gson来弄得Gson gson = new Gson();//显得出HashMap的类型Type type = new TypeToken<HashMap<String, Str ...

  3. 论文阅读笔记十七:RefineNet: Multi-Path Refinement Networks for High-Resolution Semantic Segmentation(CVPR2017)

    论文源址:https://arxiv.org/abs/1611.06612 tensorflow代码:https://github.com/eragonruan/refinenet-image-seg ...

  4. chart API笔记

    1. 参数说明 http://chart.apis.google.com/chart? chs=250x100 &chd=t:60,40 &cht=p3 &chl=Hello| ...

  5. Could not create SSL/TLS secure channel.

    解决办法: ServicePointManager.Expect100Continue = true;ServicePointManager.SecurityProtocol = SecurityPr ...

  6. python-中缀表达式转前缀表达式

    作完了中缀前缀,作一个归纳吧. https://www.cnblogs.com/unixfy/p/3344550.html # coding = utf-8 class Stack: def __in ...

  7. GO语言标准库—命令行参数解析FLAG

    flag包是Go语言标准库提供用来解析命令行参数的包,使得开发命令行工具更为简单 常用方法 1.flag.Usage 输出使用方法,如linux下ls -h的帮助输出 2.flag.Type(参数名, ...

  8. (5).NET CORE微服务 Micro-Service ---- 熔断降级(Polly)

    一. 什么是熔断降级 熔断就是“保险丝”.当出现某些状况时,切断服务,从而防止应用程序不断地尝试执行可能会失败的操作给系统造成“雪崩”,或者大量的超时等待导致系统卡死. 降级的目的是当某个服务提供者发 ...

  9. device not found解决方案

    今天在使用cordova tools进行真机调试的,报了一个错:device not found; 字面意思就是没有发现设备,这时候可以首先尝试重启adb服务 C:\Users\username\Ap ...

  10. JMeter通过自定义jar调用和BeanShell源码

    自定义jar包引用 原始java代码,代码的作用的是根据指定的字符串,生成执行长度的随机字符串 package com; import java.util.Random; public class r ...