antdesign table 勾选
时间: 2025-07-08 09:36:48 浏览: 10
### 如何在 Ant Design 的 Table 组件中实现勾选功能
Ant Design 是一个流行的 React UI 庢架,提供了丰富的组件来构建现代化的 Web 应用程序。Table 组件支持多种配置选项,其中包括通过 `rowSelection` 属性启用行选择功能[^1]。
以下是关于如何在 Ant Design 的 Table 组件中实现勾选功能的具体说明:
#### 配置 rowSelection 实现多选
为了使表格具备勾选功能,可以通过设置 `rowSelection` 属性来定义行为逻辑。该属性接受一个对象作为参数,其中可以指定诸如默认选中的行、自定义事件处理函数等功能。
下面是一个简单的代码示例展示如何使用 `rowSelection` 来实现多选功能:
```jsx
import React from 'react';
import { Table } from 'antd';
const dataSource = [
{
key: '1',
name: 'Mike',
age: 25,
address: '10 Downing Street',
},
{
key: '2',
name: 'John',
age: 30,
address: 'Baker Street 221b',
},
];
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
},
];
class App extends React.Component {
state = {
selectedRowKeys: [], // 控制哪些行被选中
};
onSelectChange = (selectedRowKeys) => {
this.setState({ selectedRowKeys });
};
render() {
const { selectedRowKeys } = this.state;
const rowSelection = {
selectedRowKeys,
onChange: this.onSelectChange,
};
return (
<Table
rowSelection={rowSelection}
dataSource={dataSource}
columns={columns}
/>
);
}
}
export default App;
```
上述代码展示了如何动态更新已选中的行,并通过回调函数捕获用户的交互操作。
#### 自定义 Checkbox 行为
如果需要进一步定制 CheckBox 的行为(例如禁用某些行的选择),可以在 `rowSelection` 对象中提供额外的配置项。例如,`getCheckboxProps` 可用于控制每一行的特定属性,如下所示:
```jsx
const rowSelection = {
getCheckboxProps: (record) => ({
disabled: record.name === 'John', // 禁用名为 John 的行
}),
};
```
此片段会阻止用户选择名字为 “John” 的那一行数据。
---
### 注意事项
- 如果希望整个页面只有一个单选框生效,则需调整 `rowSelection.type='radio'` 而不是默认的 `'checkbox'`。
- 当前版本可能因 API 更新而有所变化,请始终查阅官方文档获取最新信息。
阅读全文
相关推荐

















