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

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

作者: 家有饿犬和聋猫 | 来源:发表于2019-10-30 10:46 被阅读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,方便数据回显。

    相关文章

      网友评论

          本文标题:table多选框翻页多选,前页数据被清空解决方法

          本文链接:https://www.haomeiwen.com/subject/vycovctx.html