使用vuedraggable插件实现Vue和ElementUI简单的树形目录和表格之间互相拖拽的功能（实现简单的排序）

<template>
  <div class="container">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-tree
          :data="treeData"
          class="filter-tree"
          ref="tree"
          draggable
          @node-drop="handleDrop"
          :allow-drop="allowDrop"
        ></el-tree>
      </el-col>
      <el-col :span="12">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          height="500"
          row-key="id"
          lazy
          :load="load"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        >
          <el-table-column
            prop="date"
            label="日期"
            sortable
            width="180"
          ></el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            sortable
            width="180"
          ></el-table-column>
          <el-table-column
            prop="address"
            label="地址"
          ></el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      treeData: [
        {
          id: 1,
          label: '一级 1',
          children: [
            {
              id: 4,
              label: '二级 1-1',
            },
          ],
        },
        // ...更多树节点数据
      ],
      tableData: [
        // ...表格数据
      ],
    };
  },
  methods: {
    handleDrop(draggingNode, dropNode, dropType, ev) {
      // 实现树形目录和表格间拖拽后的逻辑处理
    },
    allowDrop(draggingNode, dropNode, type) {
      // 判断是否允许拖拽放置的逻辑
      return true;
    },
    load(tree, treeNode, resolve) {
      // 懒加载数据的加载方法
    }
  }
};
</script>
 
<style scoped>
.container {
  margin: 20px;
}
.filter-tree {
  margin-top: 10px;
}
</style>

这个代码实例展示了如何在Vue和ElementUI中使用vuedraggable插件来实现树形目录和表格之间的拖拽功能。代码中包含了基本的树形结构和表格结构，以及对应的拖拽处理逻辑。在实际应用中，你需要根据具体的业务需求来填充具体的数据和对应的懒加载方法、拖拽后的逻辑处理等。