Ant Design 表格排序与筛选使用指南【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/antde/ant-designAnt Design 表格组件内置排序和筛选能力。数据一多用户总想按金额、时间找目标。读完这篇你能配出一个可排序、可筛选的 Table也知道参数怎么交给后端。 什么时候用表格排序和筛选先判断数据量再决定排序放在哪。数据在几千行以内、一次加载完把 sorter 写成函数组件在本地完成排序简单直接。数据量大或走后端分页把 sorter 设为 true排序参数发给服务端处理别在前端硬算。筛选项之间是“或”的关系比如标签、来源用多选筛选一次勾多个。筛选项互相排斥比如订单状态设filterMultiple: false做成单选。⚡ 30秒看懂 Table 的排序与筛选配置用途sorter给列加排序按钮。函数表示本地排序true 表示服务端排序filters定义该列筛选菜单的选项每项有 text 和 valueonFilter判断某行是否保留返回 true 才留下filterMultiple筛选是否多选默认 truefalse 为单选onChange分页、排序、筛选变化时触发依次接收 pagination、filters、sorter从空表格到可排序可筛选表格路径很短准备数据每行给唯一 key给目标列加 sorter 或 filters渲染 Table 并挂上 onChange。把 age 列设为可排序const columns [{ title: 年龄, dataIndex: age, sorter: (a, b) a.age - b.age, }];给 name 列加筛选菜单并指定单选const columns [{ title: 姓名, dataIndex: name, filters: [{ text: 姓李的, value: 李 }], onFilter: (value, record) record.name.indexOf(value) 0, filterMultiple: false, }];需要服务端处理时在 onChange 里取三个参数发给后端function onChange(pagination, filters, sorter) { fetchData({ page: pagination.current, filters, sorter }); }最后Table columns{columns} dataSource{data} onChange{onChange} /即可分页参数写在 pagination 属性里。⚠️ 排序筛选常见坑与处理排序不触发。现象是点箭头后顺序不变原因多为 sorter 函数没返回数字。返回 a - b 或 b - a 即可交给后端排序时记得改成sorter: true。服务端参数缺失。现象是后端收不到排序字段原因通常是 onChange 里只取了前两个参数。sorter 是第三个参数取它的 field 和 order 一起传给接口。筛选值不唯一。filters 里两项 value 相同时选中状态会串。保证同一列的 value 各不相同。大数据量卡顿。几千行以上还做本地排序筛选每次点击都要全量计算。优先开启分页或把排序、筛选都交给服务端。进阶选择远程数据把 dataSource 换成请求结果分页、排序、筛选全部由 onChange 驱动参考 ajax 示例。自定义筛选默认的勾选菜单不够用比如要做区间输入时可以自行替换下拉区域并处理确认、重置逻辑filterDropdown 是新版文档里对应这类定制的属性名。多列排序当前版本同一时刻只允许一列排序。需要组合排序时在 onChange 里收集多列状态自己拼查询条件。继续学习Table 文档完整属性表排序筛选示例本文配置的最小 demo远程数据示例分页加排序的完整流程相关组件Pagination 分页、Checkbox 勾选可配合筛选菜单使用【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/antde/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考