el-tree vue-draggable回显数据示例

在Vue中，结合`el-tree`组件和`vue-draggable`库，你可以创建一个可拖动的树形结构，并实现在用户交互后回显数据。下面是一个简单的示例：

首先，你需要安装所需的依赖：

npm install element-ui vue-draggable

然后，在你的项目中引入并配置这两个库：

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://unpkg.com/vue-draggable"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

接着，在Vue组件中使用它们：

<template>
  <div>
    <el-tree
      :data="treeData"
      node-key="id"
      :props="defaultProps"
      :load="loadNode"
      ref="draggableTree"
      @drag-end="handleDragEnd"
    ></el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        { id: 1, label: '父节点1', children: [] },
        // ...其他节点数据...
      ],
      defaultProps: {
        children: 'children',
        disabled: false
      }
    };
  },
  methods: {
    loadNode(node) {
      if (node.level === 0) {
        // 如果是根节点，加载其子节点
        return new Promise(resolve => {
          setTimeout(() => {
            resolve([...new Array(5)].map((_, i) => ({
              id: `${node.id}-${i + 1}`,
              parent: node,
              label: `子节点 ${i + 1}`
            })));
          }, 1000);
        });
      }
      return null;
    },
    handleDragEnd(e) {
      const newNode = e.newNode.data; // 获取拖动后的新位置
      this.$refs.draggableTree.handleSort(e); // 更新排序
      // 根据需要，可以在这里处理数据库更新或其他回显逻辑
    }
  }
};
</script>

在这个例子中，我们有一个初始的树形数据结构，通过`loadNode`方法动态加载子节点。`handleDragEnd`方法会在拖拽结束时触发，处理新节点的位置并根据需求更新显示的数据。