React Antd ProTable 如何设置类似于Excel的筛选框

React Antd ProTable 如何设置类似于Excel的筛选框

目标:在web页面的table表格中完成类似于EXCEL的Filter筛选功能。

示例图:点击标题列上方的漏斗状图标,即可对数据进行筛选。
页面实现

ProTable 前景提要

ProTable API中有说明,是有filter筛选功能的

参数说明类型默认值版本
filters表头的筛选菜单项object[]--
onFilter本地模式下,确定筛选的运行函数function--

个人理解:
filters 设置被筛选的数据,数据形式是object
onFilter 设置筛选的函数方法就是自定义一个函数方法用于筛选

理论阶段

根据 前景提要可知,设置筛选需要两个设置。

1.数据准备

  • 既然要筛选,那必须是所有数据在里面,且是去除重复后的数据。这样子才算筛选。
    那重点就是数据去重存储

  • 可以看到我是有多列需要筛选,那还是抽象封装一个方法数据去重,和存储的方法来调用方便低调用和维护。

2.筛选函数

  • 就是你选择了筛选框的数据,你要自定义匹配方式,成功就是true,失败就是false。
    页面就会显示匹配成功的数据。

  • 也是封装方法都用这个匹配方法即可

实践阶段

1.数据准备

  1. 首先在ProTable中使用request获取数据,调用生成数据方法
 request={async (params, sorter, filter) => {const r = await queryData(current_table, { ...params, sorter, filter });//获取的数据为r,若有数据则,生成筛选数据。if (r?.data) {generateFilterOptions(r.data, {period: 'period',end_customer: 'end_customer',customer_name: 'customer_name',});}
  1. 编写生成数据方法generateFilterOptions
/**
3. data 原数据 propertyMappings 筛选模板*/function generateFilterOptions(data: any[],propertyMappings: { [key: string]: string },handleNullForKeys?: string[],): void {const groupedOptions: { [key: string]: Option[] } = {};// 遍历数据,直接构建分组选项data.forEach((item) => {Object.entries(propertyMappings).forEach(([targetKey, sourceKey]) => {let value = item[sourceKey];if (handleNullForKeys?.includes(targetKey) && value === null) value = '';if (!groupedOptions[targetKey]) {groupedOptions[targetKey] = [];}// 确保每个值只添加一次,利用 Set 去重const valueSet = new Set(groupedOptions[targetKey].map((option) => option.value));if (!valueSet.has(value)) {groupedOptions[targetKey].push({ key: targetKey, text: String(value), value });}});});// 将生成的选项设置到状态中setFilterOptions(groupedOptions);}
  1. 用useState存储数据
const [filterOptions, setFilterOptions] = useState<{ [key: string]: Option[] }>({});
  1. 可以看一下groupedOptions的数据格式,最后需要的就是
    {text:‘2023-01’,value:‘2023-01’} 前面的key是用于不同列分组的
    在这里插入图片描述

2.准备筛选函数

// 通用的过滤函数const genericOnFilter = (dataIndex: string) => (value: any, record: any) => {if (value !== null) {if (value === '') {return record[dataIndex] === '';}if (record[dataIndex] !== null && (typeof value === 'string' || typeof value === 'number')) {return String(record[dataIndex]).indexOf(String(value)) === 0;}} else {return record[dataIndex] === null;}return false;};

因为null可能或出错,还有空字符串不能使用indexof所以写出这样。
value 是筛选选中的数据,record[dataIndex]是列的数据.
匹配上需要显示的数据就返回true,不需要的就返回false

3.开始使用

上面所说的API都是ProTable 的column API

  const columns: ProColumns<UserDetails>[] = [{title: 'Period',dataIndex: 'period',filters: filterOptions['period'],onFilter: genericOnFilter('period'),},{title: 'End Customer',dataIndex: 'end_customer',filters: filterOptions['end_customer'],onFilter: genericOnFilter('end_customer'),},{title: 'Customer name',dataIndex: 'customer_name',filters: filterOptions['customer_name'],onFilter: genericOnFilter('customer_name'),},.....

结束

理论上应该讲完了,可能还有更方便快捷的方法。
有疑问或想法可以评论区留言。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/36778.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

解决所有终端中文输出乱码的问题

一、系统自带的cmd.exe 以及 Git的bash.exe、sh.exe、git-bash.exe和git-cmd.exe&#xff0c;和PowerShell默认使用“当前系统区域设置”设定好的936 (ANSI/OEM - 简体中文 GBK)语言编码。 1、[当前代码页] 的936 (ANSI/OEM - 简体中文 GBK) 是导致中文乱码的原因 在控制面板→…

网络抓包分析工具

摘要 随着网络技术的快速发展&#xff0c;网络数据的传输和处理变得日益复杂。网络抓包分析工具作为网络故障排查、性能优化以及安全审计的重要工具&#xff0c;对于提升网络管理的效率和准确性具有重要意义。本文旨在设计并实现一款高效、易用的网络抓包分析工具&#xff0c;…

期末测试一

字符数组的排序注意的问题 &#xff1a; 1.对于输入字符的时候 如果给出了要输入几个字符 n >>>>> for ( i 0 ; i < n ;i ) { scanf("%c",&ch); } 如果说直到输入到换行符结束 >>>>>>while ( ch! \ n ) 这个需要额…

CSS|04 复合选择器伪类选择器属性选择器美化超链接

基本选择器&#xff1a;见上篇基本选择器 复合选择器选择器1,选择器2{属性:值;} 多元素选择器&#xff0c;同时匹配选择器1和选择器2&#xff0c;多个选择器之间用逗号分隔举例&#xff1a; p,h1,h2{margin:0px;}E F{属性:值;} 后代元素选择器&#xff0c;匹配所有属于E元素后…

基于长短时记忆网络LSTM的TE过程故障诊断(MATLAB R2021B)

实验所用 TE 仿真过程的数据集是网上公开的数据集&#xff0c;该数据集中的训练集和测试集分别包含 20 种故障工况和一种正常工况数据&#xff0c;其中所采集的每个样本信号包含 41 个测量变量和 11 个控制变量&#xff0c;所以每个时刻采集到的样本有 52 个观测变量。 TE 仿真…

NoSQL之Redis配置与管理

目录 一、关系型数据库和非关系型数据库 1.关系型数据库 2.非关系型数据库 3.关系型数据库和非关系型数据库区别 二、Redis 1.Redis简介 2.Redis 的优点 3.Redis 使用场景 4.Redis的数据类型 5.哪些数据适合放入缓存中&#xff1f; 6.Redis为什么这么快&#xff1f;…

ActiveMQ camel

游览器输入地址: http://127.0.0.1:8161/admin/ 访问activemq管理台 账号和密码默认为: admin/admin# yml配置的密码也是如下的密码 activemq:url: failover:(tcp://localhost:61616)username: adminpassword: adminComponent public class ActiveMqReceiveRouter extends Rout…

AudioLM音频生成模型

GPT-4o (OpenAI) AudioLM&#xff08;Audio Language Model&#xff09;是一种生成音频的深度学习模型。它可以通过学习语言模型的结构来生成连贯和高质量的音频信号。这类模型通常应用于语音合成、音乐生成和音频内容生成等领域。以下是一些与AudioLM相关的核心概念和技术细…

【JavaEE进阶】Spring AOP使用篇

目录 1.AOP概述 2.SpringAOP快速入门 2.1 引入AOP依赖 2.2 编写AOP程序 3. Spring AOP详解 3.1 Spring AOP 核心概念 3.1.1切点(Pointcut) 3.1.2 连接点 (Join Point) 3.1.3 通知(Advice) 3.1.4 切面(Aspect) 3.2 通知类型 3.3PointCut 3.4 切面优先级 3.5 切点表…

基于经典滑膜控制的永磁同步电机调速系统MATLAB仿真

滑膜控制器 取PMSM状态变量为&#xff1a; ωref为目标转速&#xff0c;ωm为电机输出转速。将此式求导得&#xff1a; 定义系统滑模面函数为&#xff1a; 对滑模面函数求导 在电机实际控制时&#xff0c;滑模控制方法存在高频抖振问题&#xff0c;则需要选取合适的指数趋近率…

web前端——css(一篇教会网页制作)

目录 一、基本语法 1.行内样式表 2.内嵌样式表 3.外部样式表 二、选择器 1.标签选择器 2.类选择器 3.id 选择器 4.通配选择器 三、常见修饰 1.文本 2.背景 3.列表 4.伪类 5.透明度 6.块级、行级、行级块标签 7.div 和 span 四、盒子模型&#xff08;重点&…

【PostgreSQL】守护数据安全:事务与数据完整性管理

目录 事务管理&#xff1a;确保操作的原子性 事务的概念与重要性 事务的启动与提交 事务的回滚&#xff08;ROLLBACK&#xff09;&#xff08; 数据一致性与隔离级别 隔离级别的解释 设置隔离级别 错误处理与事务的高级策略 异常处理&#xff08;SAVEPOINT & EXCE…

25届最近5年重庆邮电大学自动化考研院校分析

重庆邮电大学 目录 一、学校学院专业简介 二、考试科目指定教材 三、近5年考研分数情况 四、近5年招生录取情况 五、最新一年分数段图表 六、历年真题PDF 七、初试大纲复试大纲 八、学费&奖学金&就业方向 一、学校学院专业简介 二、考试科目指定教材 1、考试…

[数据集][目标检测]电缆钢丝绳线缆缺陷检测数据集VOC+YOLO格式1800张3类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;1800 标注数量(xml文件个数)&#xff1a;1800 标注数量(txt文件个数)&#xff1a;1800 标注…

单例模式(下)

文章目录 文章介绍步骤安排及单例讲解step1&#xff1a;注册单例类型&#xff08;main.cpp&#xff09;step2&#xff1a;定义类和私有构造函数&#xff08;keyboardinputmanager.h&#xff09;step3:&#xff08;keyboardinputmanager.cpp&#xff09;step4&#xff1a;在qml中…

【2024最新华为OD-C/D卷试题汇总】[支持在线评测] 特殊加密算法(200分) - 三语言AC题解(Python/Java/Cpp)

&#x1f36d; 大家好这里是清隆学长 &#xff0c;一枚热爱算法的程序员 ✨ 本系列打算持续跟新华为OD-C/D卷的三语言AC题解 &#x1f4bb; ACM银牌&#x1f948;| 多次AK大厂笔试 &#xff5c; 编程一对一辅导 &#x1f44f; 感谢大家的订阅➕ 和 喜欢&#x1f497; &#x1f…

Rust 跨平台-Android 和鸿蒙 OS

1. 安装 rustup rustup 是 Rust 的安装和版本管理工具 $ curl --proto https --tlsv1.2 https://sh.rustup.rs -sSf | sh 该命令会安装 rusup 和最新的稳定版本的 Rust&#xff1b;包括&#xff1a; rustc Rust 编译器&#xff0c;用于将 Rust 代码编译成可执行文件或库。 ca…

技术速递|Visual Studio Code 的 .NET MAUI 扩展现已正式发布

作者&#xff1a;Maddy Montaquila 排版&#xff1a;Alan Wang 今天&#xff0c;我们非常高兴地宣布 .NET MAUI VS Code 扩展插件结束了预览阶段&#xff0c;并将包含一些期待已久的新功能 - 包括 XAML IntelliSense 和 Hot Reload&#xff01; 什么是 .NET MAUI 扩展插件&…

GuLi商城-商品服务-API-三级分类-删除-页面效果

一步步学习Vue太慢了&#xff0c;准备跳过前端的学习&#xff0c;直接使用前端完整的项目 下载依赖npm install&#xff0c;会报错&#xff0c;排查了好久 我安装的是Node14&#xff0c;所以必须要安装4.14 Vscode终端输入&#xff1a;npm install node-sass4.14 输入&#x…

【博士每天一篇文献-综述】A survey on few-shot class-incremental learning

阅读时间&#xff1a;2023-12-19 1 介绍 年份&#xff1a;2024 作者&#xff1a;田松松&#xff0c;中国科学院半导体研究所&#xff1b;李璐思&#xff0c;老道明大学助理教授&#xff1b;李伟军&#xff0c;中国科学院半导体研究所AnnLab&#xff1b; 期刊&#xff1a; Neu…