react使用antd组件，实现表格的跨页多选和全选

最新推荐文章于 2024-04-02 08:27:30 发布

·小新

最新推荐文章于 2024-04-02 08:27:30 发布

阅读量2.9k

点赞数 2

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/q1054007919/article/details/125324356

版权

 const rowSelection = {
            selectedRowKeys, selectedRows,
            // onChange: (selectedRowKeys, selectedRows) => {
            //     this.setState({selectedRowKeys, selectedRows});
            //     this.props.getParamsHandle(selectedRows);
            // },
            onSelect: (record, selected) => {
                this.onSelectHandle(record, selected)
            },
            onSelectAll: (selected, selectedRows, changeRows) => {
                this.onSelectAll(selected, selectedRows, changeRows);
            }
        };

 onSelectHandle = (record, selected, selectedRow) => {
        const {selectedRowKeys, selectedRows} = this.state;
        let arr = [];
        let list = [];
        if (selected) {
            arr = Array.from(new Set([...selectedRowKeys, record.id]));
            list = Array.from(new Set([...selectedRows, record]));
        } else {
            arr = selectedRowKeys.filter(item => {
                return item !== record.id
            });
            list = selectedRows.filter(item => item.id !== record.id)
        }
        this.setState({selectedRowKeys: arr, selectedRows: list});
        // this.setState({selectedRowKeys: arr, selectedRows: list}, () => console.log(selectedRowKeys));
        this.props.getParamsHandle([record])
    }
    /*用户手动选择/取消选择所有行的回调*/
    onSelectAll = (selected, selectedRow, changeRows) => {
        let {selectedRowKeys, selectedRows} = this.state;
        if (selected) {
            let addSelected = [];
            let addRows = [];
            for (const item of changeRows) {
                addSelected.push(item.id);
                addRows.push(item);
            }
            selectedRowKeys = [...addSelected, ...selectedRowKeys];
            selectedRows = [...addRows, ...selectedRows];
            this.setState({
                selectedRowKeys: [...addSelected, ...selectedRowKeys],
                selectedRows: [...addRows, ...selectedRows]
            })
        } else {
            const subCheckedKeys = selectedRowKeys.filter((id) => {
                return !changeRows.some((item) => {
                    return item.id === id
                })
            })
            const subCheckedRows = selectedRows.filter((id) => {
                return !changeRows.some((item) => {
                    return item.id === id
                })
            })
            this.setState({selectedRowKeys: [...subCheckedKeys,], selectedRows: [...subCheckedRows]})
        }
        this.props.getParamsHandle([...selectedRows])
    }