vue用sortablejs怎么实现跨表格拖拽

这个问题属于技术问题，我可以回答。在Vue中实现跨表格拖拽，可以使用sortablejs插件。首先，在组件中引入sortablejs，然后在需要拖拽的元素上加上v-sortable属性，同时在拖拽元素的目标位置上加上v-sortable="{group: 'tableName'}"，其中group后面的参数为表格的名称。这样就可以实现跨表格拖拽了。

相关问题

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方法中处理拖拽完成事件，并将拖拽的数据从一个表格移动到另一个表格。

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，这样拖拽元素在拖拽结束时会回到原来的位置，而不是消失。