antdesignvue table 获得当前选中的行
时间: 2023-10-05 12:10:18 浏览: 275
点击table任意列选中当前行demo
要获得当前选中的行,可以使用Ant Design Vue的`rowSelection`属性来实现。
首先,在`<a-table>`组件中添加`rowSelection`属性,并设置`type`为`checkbox`,以启用行选择功能:
```html
<a-table :columns="columns" :data-source="data" rowSelection="rowSelection">
<!-- 表格内容 -->
</a-table>
```
然后,在Vue的`data`选项中定义`rowSelection`对象,并通过`selectedRowKeys`属性来获取当前选中的行的主键值:
```js
data() {
return {
// 表格列定义
columns: [
// ...
],
// 表格数据
data: [
// ...
],
// 行选择配置
rowSelection: {
// 当前选中的行主键值
selectedRowKeys: [],
// 选中行变化时的回调函数
onChange: (selectedRowKeys) => {
this.rowSelection.selectedRowKeys = selectedRowKeys;
}
}
}
}
```
现在,`this.rowSelection.selectedRowKeys`中的数组就是当前选中的行的主键值。你可以在其他方法中使用它来执行操作,例如删除、修改等。
阅读全文