Antd的table筛选，表头columns的filters过滤清空

最新推荐文章于 2024-09-15 09:15:00 发布

spicyboiledfish

最新推荐文章于 2024-09-15 09:15:00 发布

阅读量1.2w

点赞数 2

分类专栏： antd table 文章标签： filters

本文链接：https://blog.csdn.net/SpicyBoiledFish/article/details/109117612

版权

本文介绍了在使用Ant Design的Table组件时遇到的筛选功能问题，当点击清除按钮，Table组件的列过滤条件（filters）未能正确清空，导致数据展示错误。解决方案在于利用filteredValue属性，初始化state为filteredInfo，设置columns的filteredValue属性，并在Table的onChange事件中更新filteredInfo。查询按钮操作时，通过setFilteredInfo(null)来清除所有筛选条件。

摘要由CSDN通过智能技术生成

Form +Table 实现了自定义筛选菜单的功能。具体可以参考 https://ant.design/components/table-cn/#components-table-demo-custom-filter-panel。

但是此功能会有bug：

选择相应的搜索条件后，点击“搜索”按钮，Table 会渲染相应的数据，且Table 表头也有自带的过滤功能（实际上是column的filters属性起的作用）；然后再点击“清除”按钮，所有的搜索条件和表头里filters过滤的条件都要被清除。但是 Table 组件表头column里的过滤条件未清空。导致重新发起请求时，table列表展示的仍然是上次带了filters的筛选条件，并没有清空。

解决方案：filteredValue。具体API参考：https://2x.ant.design/components/table-cn/

具体源码：

// 初始化state：filteredInfo
const [filteredInfo, setFilteredInfo] = useState(null);
// columns: 赋属性filteredValue
const columns = [{
  title: 'Cluster',
  dataIndex: 'clusterName',
  .