antd table自定义筛选
时间: 2023-10-06 12:08:06 浏览: 183
antd通过 filterDropdown 自定义按某天时间搜索功能
如果你想要在 antd table 中自定义筛选,可以通过在 `columns` 中设置 `filterDropdown` 和 `onFilter` 属性来实现。具体步骤如下:
1. 在 `columns` 中设置 `filterDropdown` 属性,该属性值为一个自定义的筛选框组件。例如:
```javascript
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
filterDropdown: ({
setSelectedKeys, selectedKeys, confirm, clearFilters,
}) => (
<div style={{ padding: 8 }}>
<Input
placeholder="Search name"
value={selectedKeys[0]}
onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
onPressEnter={confirm}
style={{ width: 188, marginBottom: 8, display: 'block' }}
/>
<Button
type="primary"
onClick={confirm}
icon={<SearchOutlined />}
size="small"
style={{ width: 90, marginRight: 8 }}
>
Search
</Button>
<Button onClick={clearFilters} size="small" style={{ width: 90 }}>
Reset
</Button>
</div>
),
onFilter: (value, record) => record.name.toLowerCase().includes(value.toLowerCase()),
sorter: (a, b) => a.name.length - b.name.length,
sortDirections: ['descend', 'ascend'],
},
// 其他列
];
```
上述代码中,我们自定义了一个筛选框组件,其中包含了一个 `Input` 和两个 `Button`,分别用于输入关键字、搜索和清空筛选条件。`setSelectedKeys` 和 `selectedKeys` 用于维护当前的筛选条件,`confirm` 和 `clearFilters` 分别用于确认筛选和清空筛选条件。
2. 在 `columns` 中设置 `onFilter` 属性,该属性值为一个函数,用于根据当前的筛选条件过滤数据。例如:
```javascript
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
filterDropdown: ({
setSelectedKeys, selectedKeys, confirm, clearFilters,
}) => (
// 自定义筛选框组件
),
onFilter: (value, record) => record.name.toLowerCase().includes(value.toLowerCase()),
// 其他属性
},
// 其他列
];
```
上述代码中,我们定义了一个 `onFilter` 函数,该函数根据当前的筛选条件(即 `value`)和当前行的数据(即 `record`)来判断当前行是否应该被筛选出来。
3. 在 `Table` 组件中设置 `filterDropdownVisible` 和 `onFilterDropdownVisibleChange` 属性,用于控制筛选框的显示和隐藏。例如:
```javascript
const App = () => {
const [data, setData] = useState([]);
const handleTableChange = (pagination, filters, sorter) => {
console.log('params', pagination, filters, sorter);
};
const handleFetchData = () => {
// 发起数据请求
};
return (
<Table
columns={columns}
dataSource={data}
onChange={handleTableChange}
filterDropdownVisible={true}
onFilterDropdownVisibleChange={(visible) => {
if (visible) {
handleFetchData();
}
}}
/>
);
};
```
上述代码中,我们设置了 `filterDropdownVisible` 属性为 `true`,表示默认显示筛选框。同时,当筛选框的显示状态发生变化时,我们会触发 `onFilterDropdownVisibleChange` 回调函数,该函数中我们可以通过发起数据请求来获取最新的筛选条件。
阅读全文