Ant Design - Как я могу получить количество строк таблицы после фильтрации? - PullRequest
Новая
       15

Ant Design - Как я могу получить количество строк таблицы после фильтрации?

0 голосов
/ 03 сентября 2018

Я использую компонент Table из Ant-design для поиска, фильтрации и сортировки большого набора данных, но у меня проблема с «Выбрать все данные».

Например, если я установлю флажок в верхней части таблицы, будут выбраны только отображаемые строки на экране. Поэтому, если я изменю страницу, остальные строки не будут выбраны. Если я хочу выбрать все данные, мне нужно сделать выбор и использовать rowSelection.selections.

Как вы можете видеть на этом примере, выдержка из сайта ant.design ниже, предлагаемое решение состоит в том, чтобы записать непосредственно все ключи строки, которые мне нужно выбрать, но если я отфильтровал непосредственно перед одним столбцом, я не могу знать состояние моего источника данных 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} />
    );
  }
}

1 Ответ

0 голосов
/ 21 января 2019

Вы можете попробовать этот реквизит на Table

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

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

currentDataSource может быть тем, что вы хотите.

...