react +antd的Table组件如何实现点击表格行选中

最新推荐文章于 2025-06-07 16:45:08 发布

I NFINIT Y

最新推荐文章于 2025-06-07 16:45:08 发布

阅读量1w

点赞数 2

CC 4.0 BY-SA版权

文章标签： react antd Table

本文链接：https://blog.youkuaiyun.com/weixin_43021174/article/details/85495150

本文介绍如何使用Ant Design中的Table组件设置行属性，实现行选择功能。通过onRow和rowSelection属性，可以配置表格行点击事件及选择模式。示例代码展示了如何设置单选模式，并在点击行时更新state中的selectedRowKeys。

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

onRow设置行属性 Function(record, index)
rowSelection 表格行是否可选择，配置项 object
selectedRowKeys是配置项指定选中项的 key 数组，需要和 onChange 进行配合 string[]


   const rowSelection = {
      type:'radio',
      selectedRowKeys:this.state.selectedRowKeys,
    }

<Table onRow={(record,index)=>{return{onClick:()=>{
        this.setState({
          selectedRowKeys:[index]
        })
      }}}} rowSelection={rowSelection} dataSource={this.state.dataSource} columns={columns} />