在开发单位自己的系统时,领导提了这个需求,在看了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. Vuex状态管理模式的面试题及答案

    转载:点击查看原文 1.vuex有哪几种属性? 答:有五种,分别是 State. Getter.Mutation .Action. Module 2.vuex的State特性是? 答: 一.Vuex就 ...

  2. Duplicate 复制数据库 搭建Dataguard

    1 操作系统环境 此处隐藏具体信息 System IP-address db_name db_version Comment         Target DB         Auxiliary D ...

  3. Tensorflow 中的优化器解析

    Tensorflow:1.6.0 优化器(reference:https://blog.csdn.net/weixin_40170902/article/details/80092628) I:  t ...

  4. UI开发总结

    1. bootstrap tooltip 修改内容 <i class="ace-icon fa fa-user" id="test-tooltip" ti ...

  5. python 把类当作 装饰器

    # class Test(object): # def __call__(self): # print('-----test----') # t= Test()# t() 调用主要有个__call__ ...

  6. SpringMVC之使用ResponseEntity,java接口返回HttpStatus

    Post请求 一般情况下,在非必须的情况下,使用Jquery实现post请求,而后台返回一般都需要手动封装ResponseUtil,和使用@ResponseBody注解来实现返回.然而我们书上学到的关 ...

  7. Tarjan算法【强连通分量】

    转自:byvoid:有向图强连通分量的Tarjan算法 Tarjan算法是基于对图深度优先搜索的算法,每个强连通分量为搜索树中的一棵子树.搜索时,把当前搜索树中未处理的节点加入一个堆栈,回溯时可以判断 ...

  8. (二)Makefile——自动编译、清理、安装软件

    每次都要敲击冗长的编译命令,每次都要清理之前的编译中间结果和最终结果,在安装软件时复制剪切大量的动态库,在卸载软件时删除很多的动态库和配置文件.好吧,我被逼向了makefile. helloworld ...

  9. Python_time模块

    time模块:用于时间的访问和转换 UTC:协调世界时(世界统一时间) 时间戳:是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总 ...

  10. keepalived当主节点切换时脚本通知 lvs

    脚本 在keepalived.conf中添加 mail  查看邮件 实验dr实验模型 给director 做主从 4台服务器 rip:192.168.0.103 rip2:192.168.0.104 ...