el-tree懒加载及数据刷新

在Element UI中，el-tree组件支持懒加载模式，并提供了方法来进行数据的刷新。以下是一个简单的例子，展示如何在Vue中使用el-tree组件进行懒加载，以及如何在需要时刷新数据。

<template>
  <el-tree
    :data="treeData"
    :props="defaultProps"
    :load="loadNode"
    lazy
    @node-click="handleNodeClick"
  ></el-tree>
  <el-button @click="refreshTree">刷新树</el-button>
</template>
 
<script>
export default {
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      count: 1
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
    loadNode(node, resolve) {
      if (node.level === 0) {
        return resolve([{ label: '节点' + this.count++ }]);
      }
      if (node.level > 0) {
        setTimeout(() => {
          const childNodes = [
            { label: '子节点' + this.count++ },
            { label: '子节点' + this.count++ }
          ];
          // 调用resolve传入回调数据
          resolve(childNodes);
        }, 500);
      }
    },
    refreshTree() {
      this.treeData = []; // 清空原有数据
      this.count = 1; // 重置计数器
      this.loadNode({ level: 0 }, () => {}); // 模拟重新加载第一级节点
    }
  }
};
</script>

在这个例子中，el-tree组件设置了lazy属性来启用懒加载模式，并通过load属性指定了加载子节点的方法loadNode。loadNode方法模拟了异步加载数据的过程，通过设置节点的level来判断是加载根节点还是子节点。

refreshTree方法用于刷新树，它清空当前的树数据，并重置计数器，最后模拟重新加载第一级节点。在实际应用中，你需要替换模拟的数据加载逻辑，以实现与后端的数据交互。