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获取数据,调用生成数据方法
javascript 复制代码
 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
javascript 复制代码
/**
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存储数据
js 复制代码
const [filterOptions, setFilterOptions] = useState<{ [key: string]: Option[] }>({});
  1. 可以看一下groupedOptions的数据格式,最后需要的就是
    {text:'2023-01',value:'2023-01'} 前面的key是用于不同列分组的

2.准备筛选函数

js 复制代码
// 通用的过滤函数
  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

js 复制代码
  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'),
    },
   .....

结束

理论上应该讲完了,可能还有更方便快捷的方法。

有疑问或想法可以评论区留言。

相关推荐
叫我王员外就行6 分钟前
Vue第一篇:组件模板总结
前端·javascript·vue.js
Dragon Wu44 分钟前
前端框架 react 性能优化
前端·javascript·react.js·性能优化·前端框架·react
CodeDevMaster1 小时前
Python办公自动化:用xlrd轻松读取Excel文件
python·excel
努力小贼2 小时前
Vue小项目(开发一个购物车)
前端·javascript·vue.js
Eternity-5273 小时前
第十章JavaScript的应用
开发语言·javascript·ecmascript
呼啦啦啦啦啦啦啦啦3 小时前
每日刷题(有效括号序列,滑动窗口最大值,最小的K个数,寻找第K大)
java·前端·javascript
dr李四维3 小时前
应用商店双弹窗“APP在向用户申请权限时未同步告知用户申请此权限的理由”驳回uni-app应用上线的解决方法
前端·javascript·笔记·uni-app·产品运营·bug·产品经理
秋田君3 小时前
实现 UniApp 右上角按钮“扫一扫”功能实战教学
前端·javascript·uni-app
ZZZ_zzz5553 小时前
Spring—Bean工厂进一步学习
javascript·学习·spring
PleaSure乐事4 小时前
JS/JSP/JSX的区别与关联
前端·javascript·react.js·前端框架·jsp·jsx