Author:Mr.柳上原
在用 antd Table 组件写一个产品选择框功能的时候,遇到了 antd Table 组件的 selectedRows 在翻页后再勾选新的 item ,不会保留上一页已勾选的 item ,而是基于当前页面的 dataSource 重新记录当前的勾选项(注: selctedRowKeys 没有这个问题,可以正常的跨页记录总体的勾选项的 key )。
尝试使用onSelect 和 onSelectAll 方法解决问题。
import * as _ from 'lodash'; // lodash的深拷贝函数_.cloneDeep
onSelect = (record:any,selected:any,selectedRows:any,nativeEvent:any) => {
console.log("record:",record);
console.log("selected:",selected);
console.log("selectedRows:",selectedRows);
console.log("nativeEvent:",nativeEvent);
if(selected){
let productListSelectedRowsPlus = this.state.productListSelectedRowsPlus;
productListSelectedRowsPlus.push(record);
this.setState({productListSelectedRowsPlus});
}
if(!selected){
let productListSelectedRowsPlus = this.state.productListSelectedRowsPlus;
let delIndex = null;
for(let i=0;i<productListSelectedRowsPlus.length;i++){
if(productListSelectedRowsPlus[i].id==record.id){
delIndex = i;
break;
}
}
console.log(delIndex);
productListSelectedRowsPlus.splice(delIndex,1);
this.setState({productListSelectedRowsPlus});
}
}
onSelectAll = (selected:any,selectedRows:any,changeRows:any) =>{
console.log("selected:",selected);
console.log("selectedRows:",selectedRows);
console.log("changeRows:",changeRows);
if(selected){
let productListSelectedRowsPlus = this.state.productListSelectedRowsPlus;
this.setState({productListSelectedRowsPlus:productListSelectedRowsPlus.concat(changeRows)});
}
if(!selected){
let productListSelectedRowsPlus = _.cloneDeep(this.state.productListSelectedRowsPlus);
let delIndex = [];
for(let i=0;i<productListSelectedRowsPlus.length;i++){
for(let j=0;j<changeRows.length;j++){
if(changeRows[j].id==productListSelectedRowsPlus[i].id){
delIndex.push(i);
break;
}
}
}
console.log(delIndex);
for(let k=0;k<delIndex.length;k++){
delete productListSelectedRowsPlus[delIndex[k]];
}
let pureProductListSelectedRowsPlus = productListSelectedRowsPlus.filter((item:any)=>{
return item != undefined;
})
this.setState({productListSelectedRowsPlus:pureProductListSelectedRowsPlus});
}
}
onProductListSelectedRowKeysChange = (productListSelectedRowKeys:any,productListSelectedRows:any) => {
let a = _.cloneDeep(this.state.productListSelectedRows);
this.setState({
productListSelectedRowKeys,
productListSelectedRows
});
};