关于如何在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;});
        }
时间: 2024-10-08 13:41:31

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

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

废话不说,直接贴代码,供新手参考 export default class TabComponent extends Component { constructor(props){ super(props); this.state = { }; } render(){ return ( <TabController> <div name="one"> 第一部分 </div> <div name="two"> 第二部分

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

element-ui 中的table和bootstrap中的table的某些设置还是有一定的差别的.之前用bootstrap做的表格,想要实现简短列和详细列的切换.因为详细列实在有太多列了,拉动滚动条还有一段距离.所以希望能够切换到简短列可以方便的看见比较重要的几列的内容.用之前的方法<bootstrap>的话,非常简单,直接设置display的显示和隐藏就可以了. 但是放在element-ui中来就不可行了.每一列根本不能直接设置样式,你给每一列设置class-name从而设置样式的话,可能

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

对于大多数前端开发者来说,vuejs+element-ui是开发后台管理系统过程中必不可少的技术框架.而后台管理系统中,最常见的形式就是表格和表单,以便用来增删改查. element-ui中table的使用 ——当el-table元素中注入data对象数组后,在el-table-column中用prop属性来对应对象中的键名即可填入数据,用label属性来定义表格的列名.可以使用width属性来定义列宽. 相当于是要枚举出所有需要展示的参数,这种情况在参数比较少的情况下是比较方便的,但是在有很多

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

element-ui中对table数据的渲染有一些模板式的操作,基本按照模板渲染数据即可 基本模板样式如下 <el-table :data="studentData.rows" style="width: 100%" stripe :header-cell-style="{background:'#e1e4eb'}" > <el-table-column prop="studentName" label=&q

为何在查询中索引未被使用 (Doc ID 1549181.1)

* 为何在查询中索引未被使用 (Doc ID 1549181.1) To Bottom 文档内容 用途   排错步骤   快速检查   表上是否存在索引?   索引是否应该被使用?   索引本身的问题   索引列或者索引的前置列是否在单表(non-join)查询的 Where 条件中(predicate list)?   索引列是否用在连接谓词中(join predicates)?   索引列在 IN 或者多个 OR 语句中?   索引列是否被函数修改?   隐式类型转换(implicit ty

【转】如何在 Linux 中查看可用的网络接口

原文:https://www.cnblogs.com/qianpangzi/p/10563979.html 查看ubuntu系统当前的可用的网络接口.方法如下 ----------------------------------------------------------------------------------------- 在我们安装完一个 Linux 系统后最为常见的任务便是网络配置了.当然,你可以在安装系统时进行网络接口的配置.但是,对于某些人来说,他们更偏爱在安装完系统后再进

如何在SQLServer中处理每天四亿三千万记录

首先声明,我只是个程序员,不是专业的DBA,以下这篇文章是从一个问题的解决过程去写的,而不是一开始就给大家一个正确的结果,如果文中有不对的地方,请各位数据库大牛给予指正,以便我能够更好的处理此次业务. 项目背景 这是给某数据中心做的一个项目,项目难度之大令人发指,这个项目真正的让我感觉到了,商场如战场,而我只是其中的一个小兵,太多的战术,太多的高层之间的较量,太多的内幕了.具体这个项目的情况,我有空再写相关的博文出来. 这个项目是要求做环境监控,我们暂且把受监控的设备称为采集设备,采集设备的属性

如何在mysql中存储音乐和图片文件

如何在mysql中存储音乐和图片文件? 果你想把二进制的数据,比如说图片文件和HTML文件,直接保存在你的MySQL数据库,那么这篇文章就是为你而写的! 我将告诉你怎样通过HTML表单来储存这些文件,怎样访问和使用这些文件. 本文概述: 在mysql中建立一个新的数据库 一个怎样储存文件的例子程序 一个怎样访问文件的例子程序 在mysql中建立一个新的database 首先,你必须在你的mysql中建立一个新的数据库,我们将会把那些二进制文件储存在这个数据库里.在例子中我会使用下列结构,为了建立

我是如何在SQLServer中处理每天四亿三千万记录的

首先声明,我只是个程序员,不是专业的DBA,以下这篇文章是从一个问题的解决过程去写的,而不是一开始就给大家一个正确的结果,如果文中有不对的地方,请各位数据库大牛给予指正,以便我能够更好的处理此次业务. 项目背景 这是给某数据中心做的一个项目,项目难度之大令人发指,这个项目真正的让我感觉到了,商场如战场,而我只是其中的一个小兵,太多的战术,太多的高层之间的较量,太多的内幕了.具体这个项目的情况,我有空再写相关的博文出来. 这个项目是要求做环境监控,我们暂且把受监控的设备称为采集设备,采集设备的属性