第一种情况:
使用modal组件通过table选择数据,翻页后再次选择keyArray和selectRows均被覆盖,之前的数据丢失
rowSelection新增preserveSelectedRowKeys: true解决
<Table
rowSelection={{
selectedRowKeys,
preserveSelectedRowKeys: true,
onChange: onSelectChange,
}}
size="small"
columns={columns}
dataSource={tableData}
pagination={false}
loading={tableLoading}
rowKey="accountId"
bordered
scroll={{ x: "auto", y: 500 }}
></Table>
第二种情况
关闭modal后再次打开modal回显选中的数据,此时再次选择数据会丢失其他页的数据,表现为其他页的selectRows为undefined,
出现的原因为,table组件仅持有了selectedRowKeys,selectRows则通过selectedRowKeys去table数据查找,其他页的数据丢失查找不到,则返回undefined。
解决办法为通过keyArray,在业务侧维护:selectRows,弃用table组件的selectRows
const onSelectChange = (keyArray: any, selectRows: any) => {
console.log('keyArray:',keyArray,'selectRows:', selectRows);
let tempSelectRows:any = [...selectTableData];
let tempkeyArray:any = [...keyArray];
//深拷贝,避免影响原数据
let tempTableData:any = JSON.parse(JSON.stringify(tableData));
//处理新增数据
tempkeyArray.forEach((item: any, index: number) => {
let keyIndex = selectedRowKeys.findIndex((key: any) => {return key == item});
if(keyIndex == -1){
tempSelectRows.push(tempTableData.find((row: any) => row.accountId == item));
}
})
//处理删除数据
tempSelectRows = tempSelectRows.filter((item: any, index: number) => {
let keyIndex = tempkeyArray.findIndex((key: any) => {return key == item.accountId});
return keyIndex != -1
})
//处理序号
tempSelectRows.forEach((item: any, index: number) => {
item.index = index + 1;
});
//处理最大长度
if (keyArray.length > MAX_SELECT_NUM) {
message.error(`单次最多可选择${MAX_SELECT_NUM}个用户`);
setSelectedRowKeys(keyArray.slice(0, MAX_SELECT_NUM));
setSelecttableData(tempSelectRows.slice(0, MAX_SELECT_NUM));
} else {
setSelectedRowKeys(keyArray);
setSelecttableData(tempSelectRows);
}
};