antd table rowSelection多选框(可选择列表)

可选择列表

如上图，是antd的可选择列表，我们如何将普通列表变成可选择列表呢，这就用到了一个很重要的属性rowSelection。

rowSelection

如下图，rowSelection属性是一个对象，他有很多的参数。

下面是antd官网截图，关于rowSelection的功能配置。

指定可选择列的属性作为key

注意：其中有个很重要的点,就是selectedRowKeys默认取得是列表的第一项，如果你想指定key,就要在table增加rowKey={record => record.id}，id可以换成record的任意值。

// selectedRowKeys表示所选择列的key是一个字符串,selectedRows表示所选列的信息，是一个数组
 rowSelectionChange = (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    this.setState({
      selectedRowKeys: selectedRowKeys
    })

  }

render() {
    const { form } = this.props;
    const {
      tabData,
    } = this.state;

    const rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
        this.rowSelectionChange(selectedRowKeys, selectedRows)
      },
    };
    return (
      <Fragment>
          <Row style={{maxHeight: 100, overflowY: "auto" }}>
             <Table
               columns={this.columns}
               dataSource={tabData}
               pagination={false}
               scroll={{ x: "max-content" , }}
               rowSelection={rowSelection}
               rowKey={record => record.id}
             />
           </Row>
      </Fragment>
    );
  }