ant design vue2 选中表格数据 push到新的表格中
时间: 2023-12-26 11:04:53 浏览: 37
可以使用 ant design vue2 中的 Table 组件和 Button 组件,通过监听 row-selection-change 事件和点击按钮事件,将选中的表格数据 push 到新的表格中。具体实现代码如下:
```html
<template>
<div>
<a-button type="primary" @click="handleAdd">添加</a-button>
<a-table :columns="columns" :data-source="dataSource" row-selection @row-selection-change="handleRowSelectionChange" />
<a-table :columns="columns" :data-source="selectedData" />
</div>
</template>
<script>
import { Table, Button } from 'ant-design-vue'
export default {
components: {
'a-table': Table,
'a-button': Button
},
data() {
return {
columns: [
{
title: '姓名',
dataIndex: 'name'
},
{
title: '年龄',
dataIndex: 'age'
},
{
title: '性别',
dataIndex: 'gender'
}
],
dataSource: [
{
name: '张三',
age: 18,
gender: '男'
},
{
name: '李四',
age: 20,
gender: '女'
},
{
name: '王五',
age: 22,
gender: '男'
}
],
selectedData: []
}
},
methods: {
handleAdd() {
// 将选中的数据 push 到 selectedData 中
this.dataSource.forEach(item => {
if (item.checked) {
this.selectedData.push(item)
// 取消勾选状态
item.checked = false
}
})
},
handleRowSelectionChange(selectedRowKeys, selectedRows) {
// 给选中的数据添加一个 checked 属性
this.dataSource.forEach(item => {
if (selectedRowKeys.includes(item.key)) {
item.checked = true
} else {
item.checked = false
}
})
}
}
}
</script>
```
在上面的代码中,我们通过监听 row-selection-change 事件,获取选中的行数据,并给选中的行数据添加一个 checked 属性。然后在添加按钮的点击事件中,将选中的数据 push 到 selectedData 中,并取消勾选状态。最终实现将选中的表格数据 push 到新的表格中的功能。