,可以通过以下步骤实现:
下面是一个示例代码:
<template>
<div>
<v-data-table
:headers="sourceHeaders"
:items="sourceItems"
item-key="id"
>
<template v-slot:items="props">
<td>{{ props.item.name }}</td>
<td>{{ props.item.age }}</td>
<td>
<v-btn @click="moveRow(props.item)">移动</v-btn>
</td>
</template>
</v-data-table>
<v-data-table
:headers="targetHeaders"
:items="targetItems"
item-key="id"
>
<template v-slot:items="props">
<td>{{ props.item.name }}</td>
<td>{{ props.item.age }}</td>
</template>
</v-data-table>
</div>
</template>
<script>
export default {
data() {
return {
sourceHeaders: [
{ text: '姓名', value: 'name' },
{ text: '年龄', value: 'age' },
{ text: '操作', value: 'actions' },
],
sourceItems: [
{ id: 1, name: '张三', age: 20 },
{ id: 2, name: '李四', age: 25 },
{ id: 3, name: '王五', age: 30 },
],
targetHeaders: [
{ text: '姓名', value: 'name' },
{ text: '年龄', value: 'age' },
],
targetItems: [],
};
},
methods: {
moveRow(row) {
const index = this.sourceItems.findIndex(item => item.id === row.id);
if (index !== -1) {
const movedRow = this.sourceItems.splice(index, 1)[0];
this.targetItems.push(movedRow);
}
},
},
};
</script>
在上述示例中,我们创建了两个动态表格组件,分别表示源表格和目标表格。源表格中的每一行都有一个"移动"按钮,点击该按钮会触发moveRow
方法。该方法会将被点击行的数据从源表格的数据列表中移除,并添加到目标表格的数据列表中。最后,我们通过v-data-table
组件分别渲染源表格和目标表格。
这是一个简单的示例,你可以根据实际需求进行修改和扩展。同时,你可以根据具体的业务场景选择适合的vuetify组件和功能来实现行的移动操作。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云数据库(TencentDB)。你可以通过以下链接了解更多关于腾讯云的产品和服务:
领取专属 10元无门槛券
手把手带您无忧上云