vue2+antd表格+sortablejs 实现两个表格数据拖拽完整代码

下面是一个完整的示例代码，基于Vue2，antd和sortablejs实现了两个表格之间的数据拖拽功能。

<template>
  <div>
    <h2>表格1</h2>
    <a-table :columns="columns" :dataSource="list1" rowKey="id">
      <template #name="{text, record}">
        <span v-text="text" v-sortable="'table1'"></span>
      </template>
    </a-table>
    <h2>表格2</h2>
    <a-table :columns="columns" :dataSource="list2" rowKey="id">
      <template #name="{text, record}">
        <span v-text="text" v-sortable="'table2'"></span>
      </template>
    </a-table>
  </div>
</template>

<script>
import Sortable from 'sortablejs'
import { Table } from 'ant-design-vue'

export default {
  components: {
    'a-table': Table,
  },
  data() {
    return {
      columns: [
        { title: '姓名', dataIndex: 'name' },
        { title: '年龄', dataIndex: 'age' },
      ],
      list1: [
        { id: 1, name: '张三', age: 18 },
        { id: 2, name: '李四', age: 20 },
        { id: 3, name: '王五', age: 22 },
      ],
      list2: [],
    }
  },
  mounted() {
    Sortable.create(this.$el.querySelector('.ant-table-tbody'), {
      group: {
        name: 'table1',
        put: ['table2'],
      },
      animation: 150,
      fallbackOnBody: true,
      swapThreshold: 0.65,
      onEnd: this.onEnd,
    })
    Sortable.create(this.$el.querySelectorAll('.ant-table-tbody')[1], {
      group: {
        name: 'table2',
        put: ['table1'],
      },
      animation: 150,
      fallbackOnBody: true,
      swapThreshold: 0.65,
      onEnd: this.onEnd,
    })
  },
  methods: {
    onEnd(evt) {
      const { oldIndex, newIndex, item } = evt
      if (oldIndex !== newIndex) {
        const table = evt.to.dataset.table
        if (table === 'table1') {
          // 从表格1拖拽到表格2
          this.list2.splice(newIndex, 0, this.list1.splice(oldIndex, 1)[0])
        } else {
          // 从表格2拖拽到表格1
          this.list1.splice(newIndex, 0, this.list2.splice(oldIndex, 1)[0])
        }
      }
    },
  },
}
</script>

在此示例中，我们使用了Ant Design Vue中的`<a-table>`组件来渲染表格，并在模板中使用了Vue的`v-sortable`指令来绑定Sortable实例。在mounted钩子函数中，我们为每个表格的tbody元素创建了Sortable实例，并将它们分组为“table1”和“table2”。然后，我们在onEnd方法中处理拖拽完成事件，并根据拖拽的方向和目标表格移动数据。

需要注意的是，在模板中，我们使用了`<span>`元素包装了表格中的文本数据，来实现拖拽时只能拖拽文本数据而不是整个行。同时，在Sortable实例的options中，我们设置了`fallbackOnBody`为true，这样拖拽元素在拖拽结束时会回到原来的位置，而不是消失。