【elementUI Tree 树形控件 动态加载数据、懒加载&&动态操作后局部刷新树结构】

在Element UI中使用Tree组件时，可以通过设置:load方法来实现动态加载数据，并且可以通过懒加载模式来按需加载子节点。当进行动态操作（如添加、删除节点）后，可以通过调用特定的方法来局部刷新树结构。

以下是一个简单的例子，展示了如何动态加载数据，懒加载节点，以及在操作后如何刷新树：

<template>
  <el-tree
    :data="treeData"
    :props="defaultProps"
    :load="loadNode"
    lazy
    @node-drop="handleDrop"
  ></el-tree>
</template>
 
<script>
export default {
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    loadNode(node, resolve) {
      // 假设你有一个方法来获取树节点数据
      if (node.level === 0) {
        return fetchRootNodes().then(data => {
          resolve(data);
        });
      }
      // 懒加载子节点
      return fetchChildNodes(node.data.id).then(data => {
        resolve(data);
      });
    },
    handleDrop(draggingNode, dropNode, dropType, ev) {
      // 处理节点拖拽后的逻辑，例如更新数据库
      // 拖拽后可能需要局部刷新树
      this.refreshTree(dropNode);
    },
    refreshTree(node) {
      // 如果是懒加载节点，需要重新加载
      if (node.level !== 0) {
        this.loadNode(node, () => {}); // 第二个参数是resolve函数，可以为空函数
      }
      // 如果有子节点，递归刷新子节点
      if (node.childNodes && node.childNodes.length > 0) {
        node.childNodes.forEach(childNode => {
          this.refreshTree(childNode);
        });
      }
    }
  }
};
 
// 模拟异步获取根节点数据
function fetchRootNodes() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve([{ id: 1, label: '根节点1', children: [] }]);
    }, 1000);
  });
}
 
// 模拟异步获取子节点数据
function fetchChildNodes(parentId) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve([{ id: parentId + 1, label: `子节点${parentId + 1}`, children: [] }]);
    }, 1000);
  });
}
</script>

在这个例子中，loadNode方法用于懒加载节点，它根据节点的层级（node.level）来决定是获取根节点还是子节点。handleDrop方法用于处理节点拖拽后的逻辑，在这个例子中，它更新了数据库并调用refreshTree方法来局部刷新树。refreshTree递归地刷新了所有子节点。这些方法模拟了异步获取数据的过程，实际应用中应替换为实际的数据获取逻辑。