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

最新推荐文章于 2025-06-18 17:57:21 发布

MYG_G

最新推荐文章于 2025-06-18 17:57:21 发布

阅读量2.2w

点赞数 5

CC 4.0 BY-SA版权

分类专栏： antd 文章标签： antd

本文链接：https://blog.youkuaiyun.com/qq_40657321/article/details/109625702

antd 专栏收录该内容

24 篇文章

订阅专栏

本文介绍如何使用Ant Design (AntD)将普通列表转换为可选择列表。通过设置rowSelection属性，可以实现列表项的选择功能，并通过回调函数onChange获取所选列表项的键值和详细信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

可选择列表

在这里插入图片描述
如上图，是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>
    );
  }