antd table的筛选函数怎么写
时间: 2024-02-21 13:57:30 浏览: 118
详解使用element-ui table组件的筛选功能的一个小坑
Antd Table 的筛选函数 `onFilter` 接收两个参数,分别是筛选菜单中选中的值 `value` 和当前行的数据项 `record`,需要返回一个 boolean 类型的值,用于确定当前行是否显示在表格中。
例如,在某个列上设置了筛选菜单,选项分别为 `男` 和 `女`,并且数据项中有一个 `gender` 属性表示性别,我们可以这样写筛选函数:
```jsx
onFilter: (value, record) => record.gender === value
```
上面的筛选函数会将筛选菜单中选中的值 `value` 和当前行的 `gender` 属性进行比较,如果相同则返回 `true`,否则返回 `false`。这样,只有性别为选中的值的行会被显示在表格中。
另外,如果需要在多个列上进行筛选,可以使用 `filterMultiple` 属性将其设置为 `true`,然后在筛选函数中将多个条件连接起来。例如:
```jsx
filterMultiple: true,
onFilter: (value, record) => record.gender === value || record.age === value
```
上面的筛选函数会将筛选菜单中选中的值 `value` 和当前行的 `gender` 或 `age` 属性进行比较,只要其中有一个相同,则返回 `true`,否则返回 `false`。这样,只有性别或年龄为选中的值的行会被显示在表格中。
阅读全文