不知道大家是不是在AntDesign的某一个列表想要做一个批量导出或者操作的时候,发现只要选择下一页,即使选中的ids 都有记录下面,但是就是不回显
后来问了chatGPT,对方的回答是:
在Ant Design的DataTable组件中,当进行分页操作时,会重新渲染表格内容,这会导致之前选中的行数据和选中状态丢失。
于是最后想到了一个办法处理,通过onTableChange时间来控制
代码如下:
bash
private onTableChange = (newSelectedRowKeys: string[]) => {
console.log(newSelectedRowKeys);
const { selectedRowKeys } = this.state;
setTimeout(() => {
this.dispatch(
actions.tableRowSelectionChangeAction(
this.tableId,
map(selectedRowKeys, (value) => {
return value;
})
)
);
}, 300);
};
private onTableRowSelectAll = (
selected: boolean,
selectedRows: any[],
unSelectedRows: any[]
) => {
const { selectedRowKeys } = this.state;
if (selected) {
const addRows = selectedRows.filter((item: any) => {
return !selectedRowKeys.includes(item.id);
});
const addRowsRowIds = map(addRows, 'id');
this.setState({ selectedRowKeys: [...selectedRowKeys, ...addRowsRowIds] });
} else {
const deleteIds: any = map(unSelectedRows, 'id');
const deleteRows = selectedRowKeys.filter((item: any) => {
return !deleteIds.includes(item);
});
this.setState({ selectedRowKeys: [...deleteRows] });
}
};
private onTableSelect = (record: any, selected: boolean) => {
const { selectedRowKeys } = this.state;
if (selected) {
this.setState({
selectedRowKeys: [...selectedRowKeys, record.id],
});
} else {
this.setState({
selectedRowKeys: selectedRowKeys.filter((key) => key !== record.id),
});
}
};
使用onTableChange 因为它是几个方法中最后一个执行的方法,也是必触发的方法,然后通过dispatch,对表的selectedRowKeys重新处理
bash
this.dispatch(
actions.tableRowSelectionChangeAction(
this.tableId,
map(selectedRowKeys, (value) => {
return value;
})
)
);
如果对大家有帮助,留下个小爱心吧😄