Я использую компонент 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} />
);
}
}