在ant设计中对dataSource执行过滤器函数后，在组件表中获取过滤数据

Question

在Ant-desigin中使用Table组件时，我想在dataSource上执行filter函数后获取表中的filterd数据，但我找不到获取它的方法。有一个名为onChange的函数，它只能获取无法获取过滤数据的过滤条件。

Answer 1

我有点找到了办法。 title组件上的道具footer和<Table />采用的功能可以提供过滤后的数据。

<Table
  footer={currentPageData => {
    console.log(currentPageData); // <-- This is an array of the filtered dataSource.
    return null;
  }}
/>

Answer 2

向表添加 onChange 函数（示例代码为ts，如果使用js，请稍作调整。然后可以检查调试结果：dataSource的总大小为54，filtered 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}
      />
    )
  }

Answer 3

您可以在onChange内轻松添加<Table/>属性。创建具有4个参数的函数：pagination, filters, sorter, extra，而您要查找的数据为extra.currentDataSource。

onChange={
     (pagination, filters, sorter, extra) => {
          console.log(extra.currentDataSource)
     } 
}