vue2中利用sortable.js实现两个el-table树形结构的拖拽功能

要在Vue2中使用Sortable.js实现两个el-table之间的树形结构拖拽功能，可以按照以下步骤进行操作：

1. 安装Sortable.js和Vue-Sortable插件：

npm install sortablejs vue-sortable

2. 在Vue组件中引入并使用Vue-Sortable插件：

<template>
  <div>
    <el-table
      :data="treeData1"
      :row-key="row => row.id"
      ref="table1"
    >
      <!-- 表格列定义 -->
    </el-table>

    <el-table
      :data="treeData2"
      :row-key="row => row.id"
      ref="table2"
    >
      <!-- 表格列定义 -->
    </el-table>
  </div>
</template>

<script>
import Sortable from 'sortablejs';
import { VueSortable } from 'vue-sortable';

export default {
  components: {
    VueSortable
  },
  data() {
    return {
      treeData1: [
        // 表格数据
      ],
      treeData2: [
        // 表格数据
      ]
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.makeTablesSortable();
    });
  },
  methods: {
    makeTablesSortable() {
      Sortable.create(this.$refs.table1.$el, {
        group: 'table',
        animation: 150,
        onEnd: this.onTableDragend
      });

      Sortable.create(this.$refs.table2.$el, {
        group: 'table',
        animation: 150,
        onEnd: this.onTableDragend
      });
    },
    onTableDragend(event) {
      const sourceTable = event.from === this.$refs.table1.$el ? 'table1' : 'table2';
      const targetTable = event.to === this.$refs.table1.$el ? 'table1' : 'table2';
      const sourceData = this[sourceTable];
      const targetData = this[targetTable];

      // 根据event对象中的信息，更新sourceData和targetData的顺序
    }
  }
};
</script>

在上面的示例代码中，我们使用Vue-Sortable插件将Sortable.js应用于el-table。通过在mounted钩子函数中调用makeTablesSortable方法，我们创建了两个可拖拽的Sortable实例，并将其应用于el-table组件。在onEnd回调函数中，我们可以根据拖拽事件的信息来更新sourceData和targetData的顺序，从而实现树形结构的拖拽功能。

请注意，上述代码仅提供了一个基本的示例，具体的更新逻辑需要根据你的业务需求来实现。

希望以上信息对你有所帮助！如果有任何问题，请随时提问。