javascript - Ant Design - 过滤后如何获取表格行数？

Question

我使用 Ant-design 的 Table 组件来搜索、过滤和排序一大组数据，但是“选择所有数据”有问题。

例如，如果我单击表格顶部的复选框，则仅选择屏幕上的显示行。因此，如果我更改页面，则不会选择其他行。如果我想选择我需要自定义选择和使用的所有数据rowSelection.selections。

正如您在下面的ant.design 网站的示例摘录中看到的那样，建议的解决方案是直接编写我需要选择的行的所有键，但是如果我在一个列之前进行了过滤，我就无法知道我的状态道具数据源。

所以我的问题是：我怎样才能知道屏幕上当前可用的所有数据？

例如，如果最初有10页，然后我过滤排序，现在有2页，如何获取新数据集的数组。

提前致谢。

class App extends React.Component {
  state = {
    selectedRowKeys: [], // Check here to configure the default column
  };

  onSelectChange = (selectedRowKeys) => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    this.setState({ selectedRowKeys });
  }

  render() {
    const { selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
      hideDefaultSelections: true,
      selections: [{
        key: 'all-data',
        text: 'Select All Data',
        onSelect: () => {
          this.setState({
            selectedRowKeys: [...Array(46).keys()], // 0...45
          });
        },
      }, {
        key: 'odd',
        text: 'Select Odd Row',
        onSelect: (changableRowKeys) => {
          let newSelectedRowKeys = [];
          newSelectedRowKeys = changableRowKeys.filter((key, index) => {
            if (index % 2 !== 0) {
              return false;
            }
            return true;
          });
          this.setState({ selectedRowKeys: newSelectedRowKeys });
        },
      }, {
        key: 'even',
        text: 'Select Even Row',
        onSelect: (changableRowKeys) => {
          let newSelectedRowKeys = [];
          newSelectedRowKeys = changableRowKeys.filter((key, index) => {
            if (index % 2 !== 0) {
              return true;
            }
            return false;
          });
          this.setState({ selectedRowKeys: newSelectedRowKeys });
        },
      }],
      onSelection: this.onSelection,
    };
    return (
      <Table rowSelection={rowSelection} columns={columns} dataSource={data} />
    );
  }
}

标签： javascriptreactjsreact-reduxantd

Answer 1

你可以试试这个道具Table

onChange: Callback executed when pagination, filters or sorter is changed

Function(pagination, filters, sorter, extra: { currentDataSource: [] })

这currentDataSource可能是你想要的东西。