antdesignvue 选中行事件
时间: 2023-09-30 20:08:34 浏览: 138
Ant Design Vue 表格组件提供了 `row-click` 和 `row-dblclick` 事件来响应行的单击和双击事件。你可以通过这些事件来实现选中行的功能。
以下是一个示例代码:
```vue
<template>
<a-table :columns="columns" :data-source="dataSource" @row-click="handleRowClick">
<!-- 表格列定义 -->
</a-table>
</template>
<script>
export default {
data() {
return {
columns: [
// 列定义
],
dataSource: [
// 数据源
],
selectedRowKeys: [] // 选中行的 keys
};
},
methods: {
handleRowClick(row) {
// 获取选中行的 key
const key = row.key;
// 判断当前行是否已选中,如果已选中则取消选中,否则选中
const index = this.selectedRowKeys.indexOf(key);
if (index >= 0) {
this.selectedRowKeys.splice(index, 1);
} else {
this.selectedRowKeys.push(key);
}
}
}
};
</script>
```
在上面的代码中,我们定义了一个 `handleRowClick` 方法来处理行的单击事件。在方法中,我们获取选中行的 key,然后判断当前行是否已选中,如果已选中则取消选中,否则选中。选中的行的 key 存储在 `selectedRowKeys` 数组中。
如果你需要实现多选行的功能,可以使用 `row-selection` 属性来配置表格的选择模式。具体实现方法可以参考 Ant Design Vue 官方文档中的示例:[Table - Selection](https://antdv.com/components/table-cn/#components-table-demo-selection)。
阅读全文
相关推荐


















