在使用Ant-desigin中的Table组件时,我想在dataSource上执行filter函数后获取表中的filterd数据,但是我找不到获取它的方法。有一个名为onChange的函数,它只能获得过滤条件,而不能获得过滤后的数据。
发布于 2018-05-10 12:41:19
我找到了一种方法。<Table />
组件上的属性title
和footer
接受一个函数,该函数提供过滤后的数据。
<Table
footer={currentPageData => {
console.log(currentPageData); // <-- This is an array of the filtered dataSource.
return null;
}}
/>
发布于 2018-12-20 06: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}
/>
)
}
发布于 2020-10-21 04:16:10
您可以很容易地在<Table/>
中添加onChange
属性。创建一个具有4个参数的函数:pagination, filters, sorter, extra
,您要查找的数据是extra.currentDataSource
。
onChange={
(pagination, filters, sorter, extra) => {
console.log(extra.currentDataSource)
}
}
https://stackoverflow.com/questions/50074789
复制相似问题