antdesign-vue结合sortablejs实现两个table相互拖拽排序功能

实现两个table相互拖拽排序功能的过程中，需要借助 antdesign-vue 和 sortablejs。

1. 安装和引入 antdesign-vue 和 sortablejs

在项目中安装 antdesign-vue 和 sortablejs：

npm install ant-design-vue sortablejs --save

在代码中引入 antdesign-vue 和 sortablejs：

import Vue from 'vue'
import Antd from 'ant-design-vue'
import Sortable from 'sortablejs'

Vue.use(Antd)
Vue.prototype.$sortable = Sortable

1. 实现两个table的排序功能

首先，需要在模板中定义两个table，并在每个table中绑定Sortable指令：

<template>
  <div>
    <h2>Table 1</h2>
    <a-table :columns="columns1" :data-source="data1" v-sortable="options1"></a-table>

    <h2>Table 2</h2>
    <a-table :columns="columns2" :data-source="data2" v-sortable="options2"></a-table>
  </div>
</template>

接下来，需要给每个table定义Sortable的选项。在选项中，需要指定排序结束后的回调函数，以及其他Sortable的配置选项。

export default {
  data () {
    return {
      data1: [...],
      data2: [...],
      options1: {
        onEnd: this.handleEnd1,
        group: 'table-group'
      },
      options2: {
        onEnd: this.handleEnd2,
        group: 'table-group'
      }
    }
  },
  methods: {
    handleEnd1 (event) {
      // 处理Table 1的排序结束事件
    },
    handleEnd2 (event) {
      // 处理Table 2的排序结束事件
    }
  }
}

在以上代码中，group属性是将两个table绑定到同一个group中，以实现相互拖拽排序的功能。

1. 示例说明

示例1：在Table 1中拖动一行到Table 2中进行排序。

首先，定义一组数据：

data1: [
  {key: '1', name: 'A'},
  {key: '2', name: 'B'},
  {key: '3', name: 'C'}
],
data2: [
  {key: '4', name: 'D'},
  {key: '5', name: 'E'},
  {key: '6', name: 'F'}
]

然后，将Table 1和Table 2绑定在同一个group中：

options1: {
  onEnd: this.handleEnd1,
  group: 'table-group'
},
options2: {
  onEnd: this.handleEnd2,
  group: 'table-group'
}

接着，将Table 1的第一行拖动到Table 2的第三行位置，松开鼠标，即可完成排序。

最终的数据：

data1: [
  {key: '2', name: 'B'},
  {key: '3', name: 'C'}
],
data2: [
  {key: '4', name: 'D'},
  {key: '5', name: 'E'},
  {key: '1', name: 'A'},
  {key: '6', name: 'F'}
]

示例2：在Table 2中拖动一行到Table 1中进行排序。

首先，定义一组数据：

data1: [
  {key: '1', name: 'A'},
  {key: '2', name: 'B'},
  {key: '3', name: 'C'}
],
data2: [
  {key: '4', name: 'D'},
  {key: '5', name: 'E'},
  {key: '6', name: 'F'}
]

然后，将Table 1和Table 2绑定在同一个group中：

options1: {
  onEnd: this.handleEnd1,
  group: 'table-group'
},
options2: {
  onEnd: this.handleEnd2,
  group: 'table-group'
}

接着，将Table 2的第三行拖动到Table 1的第二行位置，松开鼠标，即可完成排序。

最终的数据：

data1: [
  {key: '1', name: 'A'},
  {key: '6', name: 'F'},
  {key: '2', name: 'B'},
  {key: '3', name: 'C'}
],
data2: [
  {key: '4', name: 'D'},
  {key: '5', name: 'E'}
]