antd中表格单选某一行
时间: 2023-09-12 15:12:55 浏览: 127
在 antd 中,可以通过设置 `rowSelection` 属性来实现表格的单选或多选功能。其中,如果需要实现单选某一行,可以设置 `type` 属性为 `'radio'`,并通过 `onChange` 回调函数获取选中的行数据。
以下是一个示例代码:
```jsx
import { Table } from 'antd';
const dataSource = [
{ key: '1', name: 'John Doe', age: 32 },
{ key: '2', name: 'Jane Smith', age: 28 },
{ key: '3', name: 'Bob Johnson', age: 45 },
];
const columns = [
{ title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Age', dataIndex: 'age', key: 'age' },
];
function handleRowSelection(selectedRowKeys, selectedRows) {
console.log(selectedRows[0]); // 获取选中的行数据
}
function App() {
const rowSelection = {
type: 'radio',
onChange: handleRowSelection,
};
return <Table dataSource={dataSource} columns={columns} rowSelection={rowSelection} />;
}
export default App;
```
在上面的示例中,我们设置了 `type` 属性为 `'radio'`,并在 `onChange` 回调函数中获取了选中的行数据。这样就可以实现表格的单选某一行功能了。
阅读全文