el-tree 懒加载+局部刷新

在使用 Element UI 的 el-tree 组件进行懒加载时，如果需要进行局部刷新，可以通过调用组件的 load 方法来重新加载特定的树节点。以下是一个简单的例子：

<template>
  <el-tree
    :data="treeData"
    :props="defaultProps"
    :load="loadNode"
    lazy
    @node-click="handleNodeClick"
  ></el-tree>
  <el-button @click="refreshNode">局部刷新</el-button>
</template>
 
<script>
export default {
  data() {
    return {
      treeData: [
        { id: 1, label: "节点1", loading: false }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    loadNode(node, resolve) {
      // 模拟异步加载数据
      setTimeout(() => {
        const data = [
          { id: 2, label: "节点1-1" },
          { id: 3, label: "节点1-2" }
        ];
        // 调用resolve传入回调数据
        resolve(data);
      }, 1000);
    },
    handleNodeClick(data, node, component) {
      console.log(data);
    },
    refreshNode() {
      // 获取需要刷新的节点
      const node = this.$refs.tree.getNode(1);
      // 清除节点的 children 属性，模拟“无子节点”状态
      node.data.children = null;
      // 调用 load 方法重新加载节点
      this.loadNode(node, () => {});
    }
  }
};
</script>

在这个例子中，loadNode 方法模拟了异步加载节点数据的过程。refreshNode 方法通过获取特定节点的引用，清除该节点的 children 属性，并重新调用 loadNode 方法来实现局部刷新。这样，当用户点击“局部刷新”按钮时，节点1及其子节点将被重新加载。