vue2中两个el-table实现互相拖拽

在Vue2中，要实现两个`el-table`之间的互相拖拽，可以使用`vuedraggable`插件来实现。下面是一个简单的示例代码：

首先，安装`vuedraggable`插件：

npm install vuedraggable

然后，在你的Vue组件中，引入并使用`vuedraggable`插件：

<template>
  <div>
    <el-table
      :data="tableData1"
      :row-key="row => row.id"
      :header-cell-style="headerCellStyle"
      @row-dragend="onRowDragend"
    >
      <!-- 表格列定义 -->
    </el-table>

    <el-table
      :data="tableData2"
      :row-key="row => row.id"
      :header-cell-style="headerCellStyle"
      @row-dragend="onRowDragend"
    >
      <!-- 表格列定义 -->
    </el-table>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: {
    draggable
  },
  data() {
    return {
      tableData1: [
        // 表格数据
      ],
      tableData2: [
        // 表格数据
      ],
      headerCellStyle: {
        // 表头样式
      }
    };
  },
  methods: {
    onRowDragend(event, newIndex, oldIndex) {
      if (newIndex !== oldIndex) {
        // 根据 newIndex 和 oldIndex 来更新 tableData1 和 tableData2 的顺序
      }
    }
  }
};
</script>

在上面的示例代码中，我们使用了`vuedraggable`组件包裹了`el-table`，并在`el-table`的`row-dragend`事件中处理拖拽结束的逻辑。你可以根据拖拽的新索引和旧索引来更新`tableData1`和`tableData2`的顺序，实现两个表格之间的互相拖拽。具体的更新逻辑需要根据你的业务需求来实现。

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