Author：Mr.柳上原
- 付出不亚于任何人的努力
- 愿我们所有的努力，都不会被生活辜负
- 不忘初心，方得始终
在用 antd Table 组件写一个产品选择框功能的时候，遇到了 antd Table 组件的 selectedRows 在翻页后再勾选新的 item ，不会保留上一页已勾选的 item ，而是基于当前页面的 dataSource 重新记录当前的勾选项（注： selctedRowKeys 没有这个问题，可以正常的跨页记录总体的勾选项的 key ）。
尝试使用onSelect 和 onSelectAll 方法解决问题。
代码语言：javascript复制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
});
};
