选中复选框的数据增加到另一个表格中
时间: 2023-09-20 14:10:03 浏览: 44
您好,将选中的数据增加到另一个表格中,可以使用 Vue 中的 computed 计算属性来实现。具体步骤如下:
1. 在 Table 组件中,将选中的数据保存到一个数组中。这个数组可以在 Table 组件中的 `rowSelection` 对象的 `selectedRowKeys` 属性中定义,也可以使用一个单独的数组来保存。
```
<template>
<a-table :columns="columns" :data-source="dataSource" row-key="id" :row-selection="rowSelection"></a-table>
</template>
<script>
export default {
data() {
return {
columns: [
// 列定义
],
dataSource: [
// 数据源
],
selectedRows: [], // 选中的数据
rowSelection: {
type: 'checkbox', // 选择类型
selectedRowKeys: [], // 已选中的行的 key 值组成的数组
onChange: (selectedRowKeys, selectedRows) => {
this.rowSelection.selectedRowKeys = selectedRowKeys
this.selectedRows = selectedRows
}
}
}
}
}
</script>
```
2. 在另一个 Table 组件中,使用一个 computed 计算属性来筛选出选中的数据。
```
<template>
<a-table :columns="columns" :data-source="selectedData" row-key="id"></a-table>
</template>
<script>
export default {
computed: {
selectedData() {
return this.dataSource.filter(item => this.selectedRows.includes(item))
},
columns() {
// 另一个 Table 的列定义
}
}
}
</script>
```
这样就可以实现选中 Table 组件中的复选框,将选中的数据增加到另一个 Table 组件中了。希望能对您有所帮助!