基于vue3和elementPlus的el-tree组件实现懒加载点击节点展开列表

<template>
  <el-tree
    :data="treeData"
    :props="defaultProps"
    :load="onLoad"
    lazy
    @node-click="handleNodeClick"
  ></el-tree>
</template>
 
<script setup>
import { ref } from 'vue';
import { ElMessageBox } from 'element-plus';
 
const treeData = ref([]);
const defaultProps = {
  children: 'children',
  label: 'label'
};
 
const onLoad = (node, resolve) => {
  if (node.level === 0) {
    return resolve([{ label: '根节点' }]);
  }
  if (node.level > 0) {
    setTimeout(() => {
      const childNodesArray = [
        { label: `第${node.level}级子节点1` },
        { label: `第${node.level}级子节点2` }
      ];
      // Call resolve to load children nodes
      resolve(childNodesArray);
    }, 1000);
  }
};
 
const handleNodeClick = (data, node, component) => {
  ElMessageBox.alert(data.label, '节点内容', {
    confirmButtonText: '确定',
    callback: action => {
      console.log('点击了确定');
    }
  });
};
</script>

这个例子中，我们使用了el-tree组件的lazy属性来实现懒加载，并且通过load属性提供了一个加载函数onLoad。当用户点击节点时，会触发node-click事件，并通过handleNodeClick函数处理，这里使用了ElMessageBox来弹出对话框显示节点信息。