1. Problem
The React antd tag is used <Table>to record the selected row ID and row content like this:
<Table
dataSource={data.list}
rowSelection={
{
selectedRowKeys: selectedIdsInSearchTab,
onChange: this.onSelectChange,
}} // 表格是否可复选，加 type: 'radio',是单选，去掉是多选
columns={this.getColumns()}
rowKey={record => record.id}
pagination={false}
loading={loading}
size="middle"
bordered
scroll={
{ x: 1100 }}
/>
There are this.onSelectChangemethods, as follows:
// 复选框选中后的方法
onSelectChange = (selectedIds, selectedRows) => {
const { dispatch } = this.props;
dispatch({
type: 'SelectTableJS/updateSelectedIdsInSearchTab',
selectedIds,
selectedRows,
});
};
Then SelectTableJS.js, there are variables that save the selected id and selected row data:
export default {
namespace: 'SelectTableJS',
state: {
selectedIdsInSearchTab:[],
selectedRowsInSearchTab:[],
},
=====================================
reducers: {
updateSelectedIdsInSearchTab(state, action) {
return {
...state,
selectedIdsInSearchTab: action.selectedIds || state.selectedIds,
selectedRowsInSearchTab: action.selectedRows || state.selectedRows,
};
},
},
These two variables can be obtained when used on other pages:
@connect(({ SelectTableJS }) => ({
SelectTableJS,
}))
===========================
render() {
const {
SelectTableJS: { selectedIdsInSearchTab,selectedRowsInSearchTab },
} = this.props;
However, when using it, you will find that if certain rows are selected in multiple pages of the table, the array that records the selected ID in the end is correct, selectedIdsInSearchTabbut the array that records the content of the selected row selectedRowsInSearchTab is incorrect. Only the rows selected on the current page of the table are , the contents of the selected rows in other pages are lost.
2. Investigation process
After investigation, it was found that this was a bug in the framework and could not be modified.
Reference article:
https://blog.csdn.net/yoyoyo8888/article/details/132324571
3. Solution
Because we really need data for selected rows in multiple pages, and only the ID is not enough, we added 2 buttons to the table:
1. In this way, the user can first select the data of the current page, and then click the Add button to add the selected rows of the current page to the array prepared by himself.
2. The user turns the page, selects the data again, and clicks the Add button again to add the selected rows on the current page to the array he prepared.
3. Note that the array needs to be deduplicated and cannot be selected repeatedly.
4. Pay attention to the empty array test.
5. If you make a wrong selection, you can only click the clear button first and then select again.
4. Remarks
1. The remaining problem is that if the user selects data on multiple pages and then clicks the Add button, only the data on the current page will be added to the array prepared by the user, and the data selected on the previous page will not be added.
2. It can be optimized later. Because the ID is complete, you can query the background interface through the ID, obtain the content of each row, and add it to the array? (It would be better to optimize it so that only the id is enough, without other content in each line)