关于如何在ElementUI中实现统计Table筛选结果数量
在开发单位自己的系统时,领导提了这个需求,在看了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筛选结果数量的更多相关文章
- 如何在ElementUI中的Table控件中使用拼音进行排序
本人使用版本是1.4.7 在这个版本中对应全是String的column进行排序并不是按照拼音的方式排列的. 这里我贴一下源代码就可以看出是为什么了: export const orderBy = f ...
- 如何在react中实现一个table切换?
废话不说,直接贴代码,供新手参考 <!DOCTYPE html> export default class TabComponent extends Component { constru ...
- element-ui 中的table的列隐藏问题
element-ui 中的table和bootstrap中的table的某些设置还是有一定的差别的.之前用bootstrap做的表格,想要实现简短列和详细列的切换.因为详细列实在有太多列了,拉动滚动条 ...
- (转)如何在Linux中统计一个进程的线程数
如何在Linux中统计一个进程的线程数 原文:http://os.51cto.com/art/201509/491728.htm 我正在运行一个程序,它在运行时会派生出多个线程.我想知道程序在运行时会 ...
- 使用element-ui中table expand展开行控制显示隐藏
问题讲解:在使用vue版本的ElementUI中的table功能的时候还是遇到了一些问题,可以说饿了么团队在这个UI框架的文档撰写已经非常不错了,不过还是有一些方法乍一看让人摸不着头脑,有些table ...
- vue如何循环渲染element-ui中table内容
对于大多数前端开发者来说,vuejs+element-ui是开发后台管理系统过程中必不可少的技术框架.而后台管理系统中,最常见的形式就是表格和表单,以便用来增删改查. element-ui中table ...
- element-ui中table渲染的快速用法
element-ui中对table数据的渲染有一些模板式的操作,基本按照模板渲染数据即可 基本模板样式如下 <el-table :data="studentData.rows" ...
- Element-UI中关于table表格的样式操作
项目中使用到element-ui组件库,经常需要操作表格,编辑样式的过程中遇到一些问题,官网针对table给出了很多的api,自己可以自定义,基本能满足产品需求,但是没有给出具体的案例,网上的资料也比 ...
- 如何在 Linux 中查看可用的网络接口
在我们安装完一个 Linux 系统后最为常见的任务便是网络配置了.当然,你可以在安装系统时进行网络接口的配置.但是,对于某些人来说,他们更偏爱在安装完系统后再进行网络的配置或者更改现存的设置.众所周知 ...
随机推荐
- CF1029E
一个看起来就不对的贪心居然是正解... 但仔细思考一下,这种贪心倒的确找不到反例.. 贪心思想:每次找出离根节点最远的点,然后由根节点向这个点的父节点连边,一直连到所有点都能被覆盖即可,这样构造出的一 ...
- 怎样在win7 IIS中部署网站
怎样在win7 IIS中部署网站? IIS作为微软web服务器的平台,可以轻松的部署网站,让网站轻而易举的搭建成功,那么如何在IIS中部署一个网站呢,下面就跟小编一起学习一下吧. 第一步:发布IIS文 ...
- javascript 将毫秒值转换为天-小时-分钟-秒钟
var start_timeMS = new Date(start_date).getTime(); var end_timeMS = new Date(end_date).getTime(); va ...
- java用swing画可以行走的乌龟
代码如下: import java.awt.Color;import java.awt.Graphics;import java.awt.event.KeyEvent;import java.awt. ...
- 51 Nod 1240 莫比乌斯函数
1240 莫比乌斯函数 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 收藏 关注 莫比乌斯函数,由德国数学家和天文学家莫比乌斯提出.梅滕斯(Mertens)首先使 ...
- k-近邻算法-优化约会网站的配对效果
KNN原理 1. 假设有一个带有标签的样本数据集(训练样本集),其中包含每条数据与所属分类的对应关系. 2. 输入没有标签的新数据后,将新数据的每个特征与样本集中数据对应的特征进行比较. a. 计算新 ...
- Bootstraptable源码
// @author 文志新 http://jsfiddle.net/wenyi/47nz7ez9/3/ /**关于插件的通用构造 * * 构造函数PluginName($trigger,option ...
- JAVA-ORM框架整理➣Mybatis操作MySQL
概述 在Java中,对数据库操作的框架很多,上节概述Hibernate的简单使用,这里简单整理Mybatis的使用.Mybatis也是简单的数据库操作框架,通过IOC方式,获取操作类对象,进行数据的操 ...
- phpMyAdmin 安装教程全攻略
管理MYSQL数据库的最好工具是PHPmyAdmin,现在最新版本是phpMyAdmin 2.9.0.2,这是一个国际上开源的软件,一直在更新版本,你可以从 http://www.phpmyadmin ...
- String类型的转型
字符串类型的转型在java中常用的方法有标题中的三种. 简单介绍: 1.toString,需要保证调用这个方法的类.方法.变量不为null,否则会报空指针. 2.String.valueOf.这个方法 ...