Ant Design Vue中Table的多选
时间: 2025-01-04 16:14:21 浏览: 115
### Ant Design Vue Table 组件实现多选功能
在Ant Design Vue的`<a-table>`组件中,可以通过配置`rowSelection`属性来启用多选功能。此属性允许指定哪些行被默认选中以及监听选择变化事件。
#### 配置 `row-selection`
为了使表格支持多选,需设置`:row-selection="selection"`,并定义相应的选项对象`selection`:
```javascript
const selection = {
selectedRowKeys: [], // 控制哪几项被选中的键数组
onChange: (selectedRowKeys, selectedRows) => { /* 当用户改变选择时触发 */ },
};
```
对于HTML模板部分,则如下所示[^2]:
```html
<a-table
bordered
:columns="columns"
:data-source="dataSource"
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }">
</a-table>
<div>已勾选数量: {{ selectedRowKeys.length }}</div>
```
这里的关键在于维护一个状态变量`selectedRowKeys`用于存储当前已被选中的行对应的唯一标识符(通常是记录ID),并通过`onChange`方法更新这个列表。
#### JavaScript逻辑处理
接下来是在JavaScript代码里完成的选择变更处理器`onSelectChange`函数的具体实现方式:
```javascript
import { ref } from 'vue';
export default {
setup() {
const selectedRowKeys = ref([]); // 定义响应式的选中key集合
function onSelectChange(selectedKeys) {
console.log('Selected Row Keys:', selectedKeys);
selectedRowKeys.value = selectedKeys;
}
return {
columns,
dataSource,
selectedRowKeys,
onSelectChange,
};
}
}
```
上述代码片段展示了如何利用Vue Composition API创建了一个可变的状态`selectedRowKeys`,每当有新的行被选中或取消选定时都会调用`onSelectChange()`来进行同步更新。
需要注意的是,在实际应用当中如果涉及到分页的情况下,要特别小心管理不同页面之间的选择状态一致性问题[^3]。因为当切换到其他页后再返回原页时,默认情况下之前做的任何选择都将失效;因此可能还需要额外考虑持久化这些选择信息或者采取措施防止意外丢失重要数据。
阅读全文
相关推荐

















