table组件可以对每列设置筛选,也可以自定义筛选项,这里记录一下自己在一次开发中对自定义筛选项的使用
table的自定义筛选,也就是大概如下的效果:
// 自定义筛选无非就是自己放置一个input,可供用户输入
// 再拿取到用户输入的值,进行后续的查询、过滤等操作
// filterDropdown方法,提供setSelectedKeys、selectedKeys来实现input输入框在table组件中的受控
// filterDropdown的更多属性可见这个链接,antd的官网也有该链接:https://github.com/ant-design/ant-design/blob/ecc54dda839619e921c0ace530408871f0281c2a/components/table/interface.tsx#L79
// 如果你想在table外部也获取到input输入的值,可以使用 useRef 来实现
// const searchInput = useRef<any>(null);
{
title: 'Name',
dataIndex: 'name',
key: 'name',
//filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters,close }) => {
filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => {
return (
<div style={{ padding: 8 }}>
// 表单的受控是通过setSelectedKeys函数与selectedKeys来实现的,会把值透传到table的onChange事件中
<Input
//ref={searchInput}
// placeholder={`Search ${dataIndex}`}
value={selectedKeys[0]} //input输入框的取值
// 当input输入框变化时,调用setSelectedKeys来设置值,实现受控
onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
// onPressEnter={() => handleSearch(selectedKeys as string[], confirm, dataIndex)}
style={{ marginBottom: 8, display: 'block' }}
/>
<Space>
<Button
type="primary"
// onClick={() => handleSearch(selectedKeys as string[], confirm, dataIndex)}
// 当调用 confirm 设置closeDropdown为 true时
// 会触发table的onChange事件,会在事件中拿到上面input中的值
// 可以在onChange 事件中,走网络请求来实现远程的搜索
onClick={() => confirm({ closeDropdown: true })}
icon={<SearchOutlined />}
size="small"
style={{ width: 90 }}
>
远程搜索
</Button>
<Button
onClick={() => clearFilters?.()}
size="small"
style={{ width: 90 }}
>
清空
</Button>
<Button
type="link"
size="small"
onClick={() => {
// confirm({ closeDropdown: false });
// setSearchText((selectedKeys as string[])[0]);
// setSearchedColumn(dataIndex);
// 每一关闭筛选项会出发table的onChang事件,会在该事件中拿到上面input输入的值
// 本地筛选,配合下面的 onFilter事件来完成
// 在onFilter 事件回调中 根据用户输入的筛选条件,过滤掉之后,返回新的值给table
confirm({ closeDropdown: true })
}}
>
本地筛选
</Button>
<Button
type="link"
size="small"
onClick={() => {
// 注意这里,官网文档会解构出一个close方法用户关闭筛选项
// 现在已经已经没有close 方法了 使用如下方法关闭
// close();
confirm({ closeDropdown: true })
}}
>
关闭
</Button>
</Space>
</div>
)
},
// 本地模式下,确定筛选的运行函数 可以在这里进行本地数据的筛选
onFilter: (value, record) =>
record[dataIndex]
.toString()
.toLowerCase()
.includes((value as string).toLowerCase()),
// 自定义 filter 图标
filterIcon: (filtered: boolean) => (
<SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />
),
},