如何在PrimeVue的两个DataTable之间拖拽行数据？

PrimeVue原生的row-reorder仅支持同表内的行排序，无法直接实现跨表拖拽。要实现你想要的效果，可以结合vue.draggable.next和PrimeVue DataTable的自定义行插槽来完成，具体步骤如下：

步骤1：安装依赖 #

确保已安装vue.draggable.next：

npm install vue.draggable.next

步骤2：修改组件代码 #

利用DataTable的Row插槽自定义行内容，将每一行包裹在draggable组件中，同时配置两个表格的拖拽源和目标：

<template>
  <div class="flex justify-content-center gap-4">
    <!-- 源表格 -->
    <DataTable :value="cars1">
      <Column headerStyle="width: 3em">
        <template #body="{ row }">
          <span class="pi pi-bars cursor-move"></span>
        </template>
      </Column>
      <Column field="brand" header="Brand"></Column>
      <Column field="color" header="Color"></Column>
      <!-- 自定义行插槽，用draggable包裹整行 -->
      <template #row="{ data }">
        <draggable
          :list="cars1"
          :group="{ name: 'cars', pull: true, put: false }"
          item-key="brand"
          @end="onDragEnd($event, data, 'source')"
        >
          <tr>
            <td><span class="pi pi-bars cursor-move"></span></td>
            <td>{{ data.brand }}</td>
            <td>{{ data.color }}</td>
          </tr>
        </draggable>
      </template>
    </DataTable>

    <!-- 目标表格 -->
    <DataTable :value="cars2">
      <Column headerStyle="width: 3em">
        <template #body="{ row }">
          <span class="pi pi-bars cursor-move"></span>
        </template>
      </Column>
      <Column field="brand" header="Brand"></Column>
      <Column field="color" header="Color"></Column>
      <!-- 自定义行插槽，用draggable包裹整行 -->
      <template #row="{ data }">
        <draggable
          :list="cars2"
          :group="{ name: 'cars', pull: true, put: true }"
          item-key="brand"
          @end="onDragEnd($event, data, 'target')"
        >
          <tr>
            <td><span class="pi pi-bars cursor-move"></span></td>
            <td>{{ data.brand }}</td>
            <td>{{ data.color }}</td>
          </tr>
        </draggable>
      </template>
    </DataTable>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import draggable from 'vue.draggable.next';

const cars1 = ref([
  { brand: "BMW", color: "Green" },
  { brand: "Volvo", color: "Yellow" },
  { brand: "Audi", color: "Red" },
  { brand: "Ford", color: "Pink" }
]);
const cars2 = ref([]);

function onDragEnd(event, data, tableType) {
  // 处理拖拽结束后的逻辑，同步数据源
  if (event.to !== event.from) {
    if (tableType === 'source') {
      const index = cars1.value.findIndex(item => item.brand === data.brand);
      if (index !== -1) {
        cars1.value.splice(index, 1);
      }
    }
  }
}
</script>

<style scoped>
.cursor-move {
  cursor: move;
}
</style>

关键说明 #

• 使用DataTable的Row插槽自定义行结构，让每一行都成为可拖拽元素
• 通过vue.draggable.next的group配置，允许两个表格之间的拖拽交互
• 在@end事件中处理拖拽完成后的数据源更新，确保源表移除拖拽项，目标表自动添加项

内容的提问来源于stack exchange，提问作者Edito