vue2+antd+sortablejs 实现一个表格拖拽一条数据到另外一个表格完整代码

下面是一个简单的示例代码，基于Vue2，antd和sortablejs实现了表格的拖拽功能。

<template>
  <div>
    <h2>表格1</h2>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
        </tr>
      </thead>
      <tbody v-sortable="{onEnd: onEnd1}">
        <tr v-for="(item, index) in list1" :key="item.id">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
        </tr>
      </tbody>
    </table>
    <h2>表格2</h2>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
        </tr>
      </thead>
      <tbody v-sortable="{onEnd: onEnd2}">
        <tr v-for="(item, index) in list2" :key="item.id">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import Sortable from 'sortablejs'
export default {
  data() {
    return {
      list1: [
        { id: 1, name: '张三', age: 18 },
        { id: 2, name: '李四', age: 20 },
        { id: 3, name: '王五', age: 22 },
      ],
      list2: [],
    }
  },
  mounted() {
    // 表格1和表格2都可以拖拽到另一个表格中
    Sortable.create(this.$el.querySelector('tbody'), {
      group: 'table',
      animation: 150,
      fallbackOnBody: true,
      swapThreshold: 0.65,
    })
  },
  methods: {
    onEnd1(evt) {
      if (evt.newIndex !== undefined) {
        // 从表格1拖拽到表格2
        this.list2.push(this.list1.splice(evt.oldIndex, 1)[0])
      }
    },
    onEnd2(evt) {
      if (evt.newIndex !== undefined) {
        // 从表格2拖拽到表格1
        this.list1.push(this.list2.splice(evt.oldIndex, 1)[0])
      }
    },
  },
}
</script>

在此示例中，我们使用了Vue的v-sortable指令来绑定Sortable实例。在mounted钩子函数中，我们为两个表格的tbody元素创建了Sortable实例，并将它们分组为“table”。然后，我们分别在onEnd1和onEnd2方法中处理拖拽完成事件，并将拖拽的数据从一个表格移动到另一个表格。