【Antd】Table组件数据重新渲染后筛选项如何清空
先来说一下我遇到的场景：
如上图，在点击操作按钮之后，会重新请求列表数据，列表数据更新。这个时候如果我先筛选了Age列， 再点击操作按钮更新数据会发现，列表上渲染的数据是经过筛选之后的，筛选项并没有被清空，依旧那么亮眼。
为了更好的描述，我把操作按钮换成了Tab页，可以先来对比一下两个页面：
嘿嘿，我太懒了，大家能区分就行。上图都是没有筛选的情况，如果我筛选之后再切换Tab，就变成了：
筛选条件并没有被清空，但这种情况下，我们希望在切换tab的时候筛选项是清空的， 这个时候就需要合理的使用filteredValue这个属性。
在使用这个属性之前，先来说明一下这个例子的两个前置条件。
- 前端分页
- 前端筛选
为什么要特意强调这个？
因为不同使用场景会有差异，如果是后端分页，那么切换页码的时候，筛选条件清不清空，完全取决于需求（正常场景下也不会清空，不然不是意味着永远看不到第二页的筛选数据？）。但前端分页就不一样了，我不需要重新获取列表数据，所以切换分页的时候没有必要清空筛选条件。
前端筛选还是后端筛选的主要差别在于是不是后端分页。如果是后端分页，前端分页只能从当前页的数据里筛选，而后端分页筛选的是所有数据里符合条件的。
好了，切入正题，在数据源改变之后如何清空筛选项呢？
上代码：
import React, { useEffect, useState, useMemo } from 'react';
import { Table, Tabs } from 'antd';
const { TabPane } = Tabs;
const data1 = [];
const data2 = [];
for (let i = 0; i < 100; i++) {
data1.push({
key: i,
name: `张大 ${i}`,
age: i,
address1: `address1 ${i}`,
address2: `address2 ${i}`,
address3: `address3 ${i}`,
address4: `address4 ${i}`,
address5: `address5 ${i}`,
address6: `address6 ${i}`,
});
data2.push({
key: i,
name: `张小 ${i}`,
age: i,
address1: `address1 ${i}`,
address2: `address2 ${i}`,
address3: `address3 ${i}`,
address4: `address4 ${i}`,
address5: `address5 ${i}`,
address6: `address6 ${i}`,
});
}
export default () => {
const [filteredValue, setFilteredValue] = useState(null);
const [dataSource, setDataSource] = useState([]);
const [tabKey, setTabKey] = useState('1');
useEffect(() => {
setDataSource(data1);
}, []);
const onTabChange = (key) => {
setTabKey(key);
// 改变数据源
if (key === '2') {
setDataSource(data2);
} else {
setDataSource(data1);
}
setFilteredValue(null);
};
const onTableChange = (pagination, filters) => {
setFilteredValue(filters);
};
const columns = useMemo(() => ([
{
title: 'Full Name',
width: 150,
dataIndex: 'name',
key: 'name',
fixed: 'left',
},
{
title: 'Age',
width: 200,
dataIndex: 'age',
key: 'age',
filters: [
{
text: '已成年',
value: '1',
},
{
text: '未成年',
value: '0',
}
],
filteredValue: filteredValue && filteredValue['age'],
onFilter: (value, record) => {
if (value === '1' && record.age >= 18) {
return true;
}
if (value === '0' && record.age < 18) {
return true;
}
return false;
}
},
{
title: 'Column 1',
dataIndex: 'address1',
key: 'address1',
minWidth: 200,
},
{
title: 'Column 2',
dataIndex: 'address2',
key: 'address2',
width: 200,
},
{
title: 'Column 3',
dataIndex: 'address3',
key: 'address3',
width: 150,
},
{
title: 'Column 4',
dataIndex: 'address4',
key: 'address4',
minWidth: 200,
},
{
title: 'Column 5',
dataIndex: 'address5',
key: 'address5',
width: 200,
},
{
title: 'Column 6',
dataIndex: 'address6',
key: 'address6',
fixed: 'right',
width: 150,
}
]), [filteredValue]);
return (
<>
)
}我这里是自己造的假数据，在做业务的时候，替换成接口就好啦！这里也是仅做参考了。
喔，这里还要多说一句，虽然我在这里将filteredValue设置为空，解决了这个问题。但是，我们内部封装的组件新增了一些属性，设置为空会有问题。比如，这个全选（看了一下源码，里面使用了sort方法，但我这个null又不是数组，肯定会报错，这里仅仅是拿我们团队内部的封装举个栗子）：
当然，如果大家有需求，也可以自己写全选项，注意其他复选项和全选的关联即可。
以上图为例：
- 勾选了已生成、未生成，全选自动勾上；
- 勾选全选，已生成、未生成自动勾上，
- 前提是全选，取消已生成或者未生成中的一个，全选的勾去掉
不过，如果只是使用antd中的筛选组件，用上面的方法清空筛选项是没有问题哦！
有其他想法的小伙伴，欢迎大家留言呀！