ant design中对dataSource执行过滤功能后获取组件表中过滤后的数据

Posted 2023-02-18

【中文标题】ant design中对dataSource执行过滤功能后获取组件表中过滤后的数据

【英文标题】：Get filtered data in component table after executing the filter function on dataSource in ant design

【发布时间】：2018-10-09 00:43:52

【问题描述】：

在Ant-desigin中使用Table组件时，我想在dataSource上执行过滤功能后得到过滤后的数据，但是我找不到获取方法。有个函数叫onChange，只能获取过滤条件，不能获取过滤后的数据。

【问题讨论】：

请发布您的代码。

我不确定为什么在这里发布代码实际上会有所帮助。我正在寻找一种方法来做同样的事情。您可以定义过滤器以及它们在组件中的工作方式以使过滤变得容易，但 Jochen 所问的（我也想知道）是，如何从 <Table> 中获取过滤后的数据。例如：假设我有一个 <Table> 和一个包含 50 个对象的 dataSource 数组，在设置我的过滤器后，<Table> 只显示 20 个对象。现在我想在其他地方使用这 20 个对象的数组。

【参考方案1】：

一种情况，onChange解决方案不起作用。

在表上设置过滤器，onChange 将被调用，因此您可以获得过滤行的正确计数。 使用来自某种 ajax 调用的数据重新加载表，并且因为 fitler 仍然存在，所以数据将被过滤。但是 onChange 没有被调用，所以在重新加载表后没有机会获得正确的计数。

【参考方案2】：

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

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

【讨论】：

此答案应标记为已接受。这帮助我弄清楚我错过了什么。

【参考方案3】：

在Table中添加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
      />
    )
  

【参考方案4】：

我找到了一个方法。 <Table /> 组件上的 props title 和 footer 采用提供过滤数据的函数。

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

【讨论】：

这样看来currentPageData是当前页面的数据，当过滤后的数据覆盖多个页面时，这种方法可能行不通。因此，如果我想获取所有过滤后的数据，无论它覆盖多少页，我可以采取哪种方式？Thx