ant design vue2 两个表格 选中其中一个表格的数据 这行数据复制到另一个表格上
时间: 2023-12-26 11:06:00 浏览: 130
你可以通过以下步骤实现在 Ant Design Vue 2 中从一个表格复制数据到另一个表格:
1. 在第一个表格中,添加一个选中行的事件处理函数,用来保存选中的行数据:
```html
<a-table
:columns="columns"
:data-source="tableData1"
@row-selected="handleRowSelected1"
>
...
</a-table>
```
```javascript
data() {
return {
selectedRow1: null
};
},
methods: {
handleRowSelected1(selectedRows) {
this.selectedRow1 = selectedRows[0];
}
}
```
2. 在第二个表格中,添加一个点击行的事件处理函数,用来将选中的行数据复制到第二个表格中:
```html
<a-table
:columns="columns"
:data-source="tableData2"
@row-click="handleRowClick2"
>
...
</a-table>
```
```javascript
methods: {
handleRowClick2(row) {
if (this.selectedRow1) {
this.tableData2.push(this.selectedRow1);
this.selectedRow1 = null;
}
}
}
```
这样,当在第一个表格中选择一行时,该行数据会被保存到 `selectedRow1` 中。当在第二个表格中点击一行时,如果 `selectedRow1` 不为空,则将其数据复制到第二个表格中,并清空 `selectedRow1`。
阅读全文