当前位置: 首页 > news >正文

el-tree 懒加载 loadNode

el-tree 是 Element UI 提供的树形组件,其懒加载功能通过 loadNode 方法实现,可以在用户展开节点时动态加载子节点数据,避免一次性加载大量数据。下面介绍 loadNode 的具体用法和示例。

基本用法

loadNode 是 el-tree 的一个重要属性,用于定义节点加载的回调函数。当用户展开一个节点时,会触发该回调并传入当前节点的信息,开发者可根据这些信息异步加载子节点数据。

核心参数
  • node:当前点击的节点对象,包含节点的层级、数据等信息。
  • resolve:回调函数,用于将加载的子节点数据传递给树组件。

【完整代码】

<template><el-tree:load="loadNode"lazy:props="treeProps"@node-click="handleNodeClick"></el-tree>
</template><script>
export default {data() {return {treeProps: {label: 'name', // 指定节点标签为数据中的 name 字段children: 'children' // 指定子节点为数据中的 children 字段}};},methods: {// 懒加载回调函数loadNode(node, resolve) {// 根节点(node.level === 0)通常是初始节点if (node.level === 0) {// 模拟异步加载根节点数据setTimeout(() => {const data = [{ id: 1, name: '节点1', leaf: false },{ id: 2, name: '节点2', leaf: false }];resolve(data); // 将数据传递给树组件}, 500);} else {// 非根节点,根据父节点加载子节点setTimeout(() => {// 模拟根据父节点ID加载子节点数据const childData = [{ id: `${node.data.id}-1`, name: `子节点1-${node.data.id}`, leaf: true },{ id: `${node.data.id}-2`, name: `子节点2-${node.data.id}`, leaf: true }];resolve(childData);}, 500);}},// 节点点击事件处理handleNodeClick(data) {console.log('点击节点:', data);}}
};
</script>

http://www.xdnf.cn/news/1106659.html

相关文章:

  • 柯里化入门:拆拆拆,拆出函数式编程的优雅
  • OSPFv3-一二类LSA
  • Qt:QCustomPlot类介绍
  • Qt窗口:菜单栏
  • 【攻防实战】记一次DC2攻防实战
  • 华为 GaussDB :技术特性、应用局限与市场争议
  • Java使用Langchai4j接入AI大模型的简单使用(二)
  • windows电脑远程win系统服务器上的wsl2
  • OneCode 3.0架构升级:注解驱动与开放接口生态详解
  • 数据结构栈的实现(C语言)
  • 《Java Web程序设计》实验报告五 Java Script学习汇报
  • MS Azure Eventhub 发送 AD log 到cribl
  • 李宏毅(Deep Learning)--(三)
  • Raft 代码分析
  • 人工智能之数学基础:多元逻辑回归算法的矩阵参数求导
  • stack和queue的使用和模拟实现以及了解deque
  • Java基础:泛型
  • 以数据为核心,以业务为导向,漫谈数据可视化应用
  • Leet code 每日一题
  • 【LeetCode】算法详解#8 ---螺旋矩阵
  • 粒子滤波|粒子滤波的相关算法理论介绍
  • 引入了模块但没有使用”,会不会被打包进去
  • STP生成树划分实验
  • 智能制造——解读50页智能工厂系统集成总体解决方案【附全文阅读】
  • Capsule Networks:深度学习中的空间关系建模革命
  • XML 指南
  • 每日一SQL 【 超过 5 名学生的课】
  • TCP的socket编程
  • 【学习新知识】用 Clang 提取函数体 + 构建代码知识库 + AI 问答系统
  • 【Modern C++ Part10】Prefer-scoped-enum-to-unscoped-enums