在ant设计中对dataSource执行filter函数后，获取元件表中过滤后的数据
在ant设计中对dataSource执行filter函数后，获取元件表中过滤后的数据
提问于 2018-04-28 17:05:51
在使用Ant-desigin中的Table组件时，我想在dataSource上执行filter函数后获取表中的filterd数据，但是我找不到获取它的方法。有一个名为onChange的函数，它只能获得过滤条件，而不能获得过滤后的数据。
回答 4
Stack Overflow用户
发布于 2018-05-10 20:41:19
我找到了一种方法。<Table />组件上的属性title和footer接受一个函数，该函数提供过滤后的数据。
<Table
footer={currentPageData => {
console.log(currentPageData); // <-- This is an array of the filtered dataSource.
return null;
}}
/>Stack Overflow用户
发布于 2018-12-20 14:55:15
将onChange函数添加到表中(示例代码为ts，如果您使用的是js，请做一些调整。您可以检查调试结果:总dataSource大小为54，过滤后的dataSource大小为40，分页不会影响结果
handleChange = (pagination: any, filters: any, sorter: any, extra: { currentDataSource: Array<any>[] }) => {
console.log('Various parameters', extra.currentDataSource);
this.setState({
filteredInfo: extra['currentDataSource']
});
}
renderTable = (columns: Array<object>, dataSource: Array<any>) => {
return (
<Table
dataSource={dataSource}
columns={columns}
expandedRowRender={(record) => (<Markdown source={record['description']} className="brz-mentor-markdown" />)}
onChange={this.handleChange as any}
/>
)
}
Stack Overflow用户
发布于 2020-10-21 12:16:10
您可以很容易地在<Table/>中添加onChange属性。创建一个具有4个参数的函数：pagination, filters, sorter, extra，您要查找的数据是extra.currentDataSource。
onChange={
(pagination, filters, sorter, extra) => {
console.log(extra.currentDataSource)
}
} 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50074789
复制相关文章
相似问题
腾讯云开发者
