,可以通过设置rowSelection
属性来实现。具体步骤如下:
Table
和Button
组件。import { Table, Button } from 'antd';
selectedRowKeys
,用于存储选中行的key值。state = {
selectedRowKeys: [],
};
rowSelection
属性,并将selectedRowKeys
和onChange
方法传入。<Table
rowSelection={{
type: 'radio',
selectedRowKeys: this.state.selectedRowKeys,
onChange: this.onSelectChange,
}}
dataSource={dataSource}
columns={columns}
/>
onSelectChange
方法,用于处理选中行的变化。onSelectChange = (selectedRowKeys) => {
this.setState({ selectedRowKeys });
};
<Button onClick={this.handleGetSelectedRow}>获取选中行</Button>
handleGetSelectedRow
方法中,可以通过selectedRowKeys
获取选中行的key值,然后根据key值获取对应的行数据。handleGetSelectedRow = () => {
const { selectedRowKeys } = this.state;
const selectedRow = dataSource.find(item => item.key === selectedRowKeys[0]);
console.log(selectedRow);
};
这样,当用户在表格中选择一行时,selectedRowKeys
会更新,然后可以通过点击按钮获取选中行的数据。
ant-design是一套基于React的UI组件库,提供了丰富的组件和样式,方便开发人员快速构建美观的前端界面。表格组件是其中的一个常用组件,用于展示和操作数据。通过设置rowSelection
属性,可以实现选择一行的功能。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)是一种可弹性伸缩的云计算服务,提供高性能、可靠稳定的云服务器实例,适用于各类应用场景。您可以通过腾讯云云服务器来部署和运行您的前端、后端、数据库等应用。
腾讯云云服务器产品介绍链接地址:https://cloud.tencent.com/product/cvm
领取专属 10元无门槛券
手把手带您无忧上云