antd的table默认选中和点击选中

class User extends Interval {
    constructor(props) {
        super(props);
        this.state = {
            synCode: [],
        }
    }

    render() {
        console.log(this.state.synCode);
        const _this = this;
        const rowSelection = {
            getCheckboxProps(record) {
                return {
                    defaultChecked: record.leader === 1, // 配置默认勾选的列 （Bealean）
                };
            },
            onChange(selectedRowKeys) {
                console.log('新来的',selectedRowKeys);
                // console.log('原来的',_this.state.synCode);
                _this.setState({synCode: selectedRowKeys})

            },
        };
       
        return (
            <Table rowKey={record => record.id} rowSelection={rowSelection} columns={columns} dataSource={this.state.data} />
        );
    }
}

 

 

在 <Table/> 组件中有 rowSelection={rowSelection} 方法，可以让Table的第一列成为联动的选择框。

API中说到通过 rowSelection.selectedRowKeys 来控制选中项。比较坑的是，selectedRowKeys 控制的只是dataSource当前的顺序编号。

一定要加上rowKey="id"或者rowKey={record => record.id}，后来经过多次调试发现很多BUG都跟这个参数有关，不然会导致联动的选择框状态异常。id可以自定义为dataSource中的某个值。
————————————————
版权声明：本文为CSDN博主「永不消失的彩虹」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/xlszzck/article/details/82462699

来源：CSDN

作者：x_u_xiang

链接：https://blog.csdn.net/x_u_xiang/article/details/104739143