1. Use antD onChange Function(selectedRowKeys, selectedRows)

Note that the rowKey value of the Table must be unique; otherwise, unexpected surprises may occur, such as selecting the peer data on the next page

2. The interface supports paging and fuzzy query and multiple selection

Without further ado, get right to the code

onSelectionChange = (selectedRowKeys, selectRows) = > {
        let {dataSource, selectedRows} = this.state
        console.log("selectedRowKeys", selectedRowKeys)
        console.log("selectedRows", selectRows)
        let allSelectedRows = selectedRows.slice(0)

        / / step 1
        dataSource.forEach(item= > {
            if(selectedRowKeys.indexOf(item.id) >= 0 ) {
                allSelectedRows.push(item)
            }
        })

        // Step 2 Because it is paging, if a selected one has been deleted, it needs to be filtered out
        allSelectedRows = allSelectedRows.filter(item= > selectedRowKeys.indexOf(item.id) >= 0)

        // Step 3 Filter the duplicate data added in Step 1
        let returnList = []
        allSelectedRows.forEach(item= > {
           if(returnList.filter(returnItem= > returnItem.id === item.id ).length === 0 ){
                returnList.push(item)
           }
        });

        this.setState({selectedRowKeys , selectedRows: returnList })
    }
Copy the code

Log (“selectedRowKeys”, selectedRowKeys); Console. log(“selectedRows”, selectRows) is typed on the console, let’s see

SelectRows is the data selected for the current page;

SelectedRowKeys are all selectedRowKeys

If there is another better way, welcome to leave a comment