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

可选择列表

antd table rowSelection多选框(可选择列表)_第1张图片
如上图,是antd的可选择列表,我们如何将普通列表变成可选择列表呢,这就用到了一个很重要的属性rowSelection。

rowSelection

如下图,rowSelection属性是一个对象,他有很多的参数。
在这里插入图片描述
下面是antd官网截图,关于rowSelection的功能配置。antd table rowSelection多选框(可选择列表)_第2张图片

指定可选择列的属性作为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>
    );
  }

你可能感兴趣的:(antd,antd)