关于如何在elementui中实现统计table筛选结果数量

湛蓝玫瑰 湛蓝玫瑰     2022-10-05     621

关键词:

在开发单位自己的系统时,领导提了这个需求,在看了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;});
        }

 

java示例代码_关于如何在Spring应用程序中实现Hibernate DAO的一些疑问

java示例代码_关于如何在Spring应用程序中实现Hibernate DAO的一些疑问 查看详情

如何在hibernate中实现对两个表的查询数据?

】如何在hibernate中实现对两个表的查询数据?【英文标题】:howtoimplementquerydataontwotablesinhibernate?【发布时间】:2012-06-1502:48:24【问题描述】:如何在hibernate中实现这个查询?selecttab1.namefromtable1tab1,table2tab2wheretable1.id=table2.id【问... 查看详情

有没有关于如何在安卓应用程序中实现“页面翻转”的教程? [关闭]

】有没有关于如何在安卓应用程序中实现“页面翻转”的教程?[关闭]【英文标题】:Arethereanytutorialsoutthereonhowtoimplement"page-flip"intoanandroidapp?[closed]【发布时间】:2011-07-1208:17:43【问题描述】:更具体地说,我正在寻找一... 查看详情

如何在 Wildfly Web 应用中实现 LDAP 登录

...要使用LDAP编写应用程序,但我遇到了困难。我读了一本关于在WildFly中开发的书,但那里没有关于LDAP的信息。【问题讨论】:【参考方案1 查看详情

如何在 exoplayer 中实现 OkHttpDataSourceFactory?

...ry?【问题讨论】:【参考方案1】:我翻遍了,我找不到关于如何实现OkHttpDataSourceFact 查看详情

POPCNT如何在硬件中实现?

】POPCNT如何在硬件中实现?【英文标题】:HowisPOPCNTimplementedinhardware?【发布时间】:2015-05-0209:15:37【问题描述】:根据http://www.agner.org/optimize/instruction_tables.pdf,POPCNT指令(返回32位或64位寄存器中设置的位数)在现代Intel和AMD处... 查看详情

vue2.0在table中实现全选和反选

...sp; 小颖今天在跟着慕课网学习vue的过程中,顺便试试如何在table中实现全选和反选,页面的css样式是直接参考慕课网的样式写的,js是小颖自己写哒,欢迎大家吐槽和点赞,嘻嘻   & 查看详情

如何在后端自定义查询中实现分页

】如何在后端自定义查询中实现分页【英文标题】:Howtoimplementpaginationincustomqueryinbackand【发布时间】:2016-02-2319:31:05【问题描述】:我想在我的自定义查询中实现分页,就像在提供的查询中一样。我想提供行数和页数。我尝试... 查看详情

如何在排名查询中实现分页?

...题描述】:我正在尝试使用MySQL进行排名。我找到了一篇关于它的好文章,没有使用自连接(rankingwithoutselfjoin)。SELECTscore_id,student_name,score,@prev:=@curr,@curr:=score,@rank:=IF 查看详情

如何在表单中实现 MDL 数据可选表

】如何在表单中实现MDL数据可选表【英文标题】:HowtoimplementanMDLdata-selectabletableinsideaform【发布时间】:2017-03-1122:47:23【问题描述】:我有一个MDL可选表:<formaction="/counselors/$counselor->id/badges/add"method="post"><tableclass="mdl-dat... 查看详情

如何在 iOS 中实现错误栏?

...描述】:我是iOS编程和学习课程的新手。其中一个作业是关于实现一个错误栏,它会在没有网络时显示。它还说不要使用UIAlertView。有人可以指出资源如何做这样的事情吗?我什至不知道要搜索什么。我尝试了implementingerrorbar和... 查看详情

如何在ant的table中实现图片的渲染(代码片段)

<a-tablerowKey="id":dataSource="bookDataSource":columns="columns":rowSelection="selectedRowKeys:selectedRowKeys,onChange:onSelectChange,columnTitle:columnTitle":pagination="false"><templateslot="operation"slot-scope="text,reco... 查看详情

如何在 Scala 中实现 Kafka Consumer

...尝试在scala中实现一个kafka消费者。我已经看过一百万篇关于如何用Java进行操作的教程,甚至有些(likethisone)说它是针对scala的,但它是用Java编写的。有谁知道我在哪里可以找到如何用Scala编写它的示例?我才 查看详情

Table - Ant Design - 在 Virtual table ant design 中实现过滤器

】Table-AntDesign-在Virtualtableantdesign中实现过滤器【英文标题】:Table-AntDesign-ImplementfilterinVirtualtableantdesgin【发布时间】:2020-12-0422:24:58【问题描述】:在ant设计的虚拟表中实现过滤器时遇到了一些麻烦。当我在列配置上应用过滤... 查看详情

如何在 UITableView 的索引列表中实现放大镜? [关闭]

】如何在UITableView的索引列表中实现放大镜?[关闭]【英文标题】:HowtoimplementamagnifyingglassintheindexlistofanUITableView?[closed]【发布时间】:2019-10-0916:42:41【问题描述】:我想在Swift中的UITableView的索引列表中实现一个放大镜。它应该... 查看详情

如何在 PaginatedDataTable Flutter Web 中实现搜索

...会根据用户输入的关键字显示数据......我一直在搜索一些关于它的文章,但我还没有找到. 查看详情

如何在 Flutter 中实现应用内购买订阅?

...还没有官方维护的应用内购买插件。但是Flutter中有很多关于应用内购买的插件。哪个是最好的?如何实施?这些安全吗? 查看详情

在 python scipy 中实现 Kolmogorov Smirnov 测试

...ipy【发布时间】:2011-12-1518:44:51【问题描述】:我有一个关于N个数字的数据集,我想测试它的正态性。我知道scipy.stats有一个kstestfunction但是没有关于如何使用它以及如何解释结果的示例。有哪位熟悉的可以给我一些建议吗?根... 查看详情