table多选框翻页多选,前页数据被清空解决方法

2019-10-30  本文已影响0人  家有饿犬和聋猫
image.png

多选框翻页 多选的时候有bug,当选了第一页的数据,再选第二页的数据,第一页的数据selectedRows会被清空。第一个参数selectedKeys 数据是正确的。
解决方案:1 把选中的数据手动存起来

nameSelectChange = (selectedRowKeys, newSelectedRows) => {
       let oldRows = this.state.nameSelectedRows;     //oldRows 是对象
       // 加数据
       newSelectedRows.length > 0 && newSelectedRows.map(
           p=>{
               if( oldRows[p.id] === undefined){
                   oldRows[p.id] = p;
               }
           }
       );
       // 删除数据时筛选key存在的数据
       let newRows = {};
       selectedRowKeys.map(
           p=>{
               newRows[p] = oldRows[p];
           }
       );
       this.setState({ 
           nameSelectedKeys: selectedRowKeys,
           nameSelectedRows: newRows
       }, ()=>{
           let v = {
               selectedRowKeys,
               nameRows: Object.values(newRows)    //把对象变为数组
           };
         //传到父组件保存
           this.props.selectedNames(v); 
       });
       
   };

解决方案:2 前提是有表格的所有数据,根据key值来筛选选中的数据

 onSelectChange = (selectedRowKeys, selectedRows) => {
        let data = this.state.dataSource;
        let selectedRowsData = [];
        data.map(
            p=>{
                selectedRowKeys.map(
                    k=>{
                        if(p.id === k){
                            selectedRowsData.push(p);
                        }
                    }
                );
                
            }
        );
        this.setState({ policyKey: selectedRowKeys });
        let v = {
            policyKey: selectedRowKeys,
            selectedRowsData
        };
        this.props.selectedFile(v);
    };

备注:多选框行数据的key值设为id,方便数据回显。

上一篇 下一篇

猜你喜欢

热点阅读