前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >react-开发经验分享-解决antd Table组件selectedRows翻页后不保留上一页已选中items的问题

react-开发经验分享-解决antd Table组件selectedRows翻页后不保留上一页已选中items的问题

作者头像
Mr. 柳上原
发布2022-10-28 11:30:27
6860
发布2022-10-28 11:30:27
举报
文章被收录于专栏:菜鸟前端工程师

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
         });
        
    };
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-10-14,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档