Question

我使用Ant设计的Table组件搜索，过滤和排序大量数据，但“选择所有数据”存在问题。

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

如您在本示例中所见，摘录自以下ant.design website，提议的解决方案是直接写我需要选择的所有行键，但是如果我仅在第一列之前进行过滤，我将无法知道props数据源的状态。

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

例如，如果最初有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} />
    );
  }
}

Answer 1

您可以在Table上试用此道具

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

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

currentDataSource可能就是您想要的东西。

蚂蚁设计-过滤后如何获得表格行数？

1 个答案: