el-tree lazy懒加载(进阶版)

news2025/1/16 3:59:28

2023.12.22今天我学习了el-tree如何实现懒加载,效果如:

代码如下:

懒加载的使用不需要用:data

<template>
   <div>
     <el-tree
         :props="props"
         :load="loadNode"
         lazy
         node-key="id"
         show-checkbox
     />
   </div>
</template>
<script>
export default{
  data(){
     return{ 
        props:{
          label:'label',//节点字段
          children:'children',//存放子节点数据字段
          isLeaf:'leaf',//判断节点是否还能展开true表示没有子节点,false表示还存在子节点
            }
         }
      },
     methods:{
        loadNode(node,resolve){
          //根据你el-tree有几层进行扩展
          //node表示选中节点数据,resovle表示总数据
          switch(node.level){
          case 0://初始默认节点
            return resolve(this.getZeroData(node));//对初始默认节点做处理
          case 1://一级节点
            return resolve(this.getFirstData(node));//对一级节点做处理
          case 2://二级节点
            return resolve(this.getSecondData(node));//对二级节点做处理
          default:
            return resolve([]);//返回空数组,注意:这个是必须要写的
            }
         },
        getZeroData(node){
               return [{id:1,label:'我是爷爷节点',leaf:fasle}]//node.data存放当前节点的数据
          },
        getFirstData(node){
            if(node.data.label=='我是爷爷节点'){
               return [{id:2,label:'我是爸爸节点',leaf:fasle}]//node.data存放当前节点的数据
             }else if(node.data.label=='我是外公节点'){
               return [{id:3,label:'我是妈妈节点',leaf:fasle}]//node.data存放当前节点的数据
             }
          },
        getSecondData(node){
               return [{id:4,label:'我是孩子节点',leaf:true}]//node.data存放当前节点的数据
          },
     }
}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1331728.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

新版IDEA中Git的使用(一)

说明&#xff1a;本文介绍如何在新版IDEA中使用Git 创建项目 首先&#xff0c;在GitLab里面创建一个项目&#xff08;git_demo&#xff09;&#xff0c;克隆到桌面上。 然后在IDEA中创建一个项目&#xff0c;项目路径放在这个Git文件夹里面。 Git界面 当前分支&Commit …

Pinely Round 3 (Div. 1 + Div. 2)(A~D)(有意思的题)

A - Distinct Buttons 题意&#xff1a; 思路&#xff1a;模拟从&#xff08;0,0&#xff09;到每个位置需要哪些操作&#xff0c;如果总共需要4种操作就输出NO。 // Problem: A. Distinct Buttons // Contest: Codeforces - Pinely Round 3 (Div. 1 Div. 2) // URL: https…

Leetcode—1962.移除石子使总数最小【中等】(最大堆做法)

2023每日刷题&#xff08;六十八&#xff09; Leetcode—1962.移除石子使总数最小 实现代码 class Solution { public:void downAdjustHeap(vector<int>& arr, int low, int high) {int i low, j i * 2 1;while(j < high) {if(j 1 < high && arr…

7.3电话号码的字母组合(LC17-M)

算法&#xff1a; 数字到字母要映射&#xff0c;可以用map&#xff0c;也可以用二维数组&#xff0c;或者直接用一个字符串 这里用字符串&#xff0c;键入的数字对应字符串的索引 String[] numString {"", "", "abc", "def", &quo…

前端开发有了 Next.js,还需要后端开发吗 ?

前言 在迅速变化的Web开发领域&#xff0c;选择正确的工具和框架对于打造优秀的用户体验至关重要。Next.js&#xff0c;作为React框架的佼佼者&#xff0c;因其前后端流畅集成而受到广泛欢迎。这就引出了一个有趣的问题&#xff1a;我们真的需要Next.js的后端功能吗&#xff1f…

ESP32+LVGL笔记(6)-把712k的一二级汉字字库放在SPIRAM

文章目录 1.字库制作2.字库烧录到ESP32-S3的flash2.1 配置好分区文件2.2 汉字库文件烧录到ESP32的flash 3.将字库从 flash 拷贝到 SPIRAM3.1 工程配置中有关 SPIRAM 部分3.2 将汉字库从flash拷贝到SPIRAM的代码3.3 在进入lvgl之前调用函数 copyHZK_from_flash_to_SPIRAM 在前面…

部署LNMP动态网站

部署LNMP动态网站 安装LNMP平台相关软件1. 安装软件包2. 启动服务&#xff08;nginx、mariadb、php-fpm&#xff09;3. 修改Nginx配置文件&#xff0c;实现动静分离4. 配置数据库 上线wordpress代码 &#xff08;测试搭建的LNMP环境是否可以使用&#xff09;1. 上线php动态网站…

【机器学习】模式识别

1 概述 模式识别&#xff0c;简单来讲&#xff0c;就是分类问题。 模式识别应用&#xff1a;医学影像分析、人脸识别、车牌识别、遥感图像 2 模式分类器 分类器的分类&#xff1a;线性分类器、非线性分类器、最近邻分类器 2.1 分类器的训练&#xff08;学习&#xff09;过…

Spring中的上下文工具你写的可能有bug

文章目录 前言功能第一种&#xff1a;ApplicationContext第二种方式&#xff1a;ApplicationContextAware第三种&#xff1a;BeanFactoryPostProcessor 源码第一种第二种第三种 前言 本篇是针对如何写一个比较好的spring工具的一个探讨。 功能 下面三种方式&#xff0c;你觉…

Kubernetes api-server源码阅读2(Debug Kubernetes篇)

云原生学习路线导航页&#xff08;持续更新中&#xff09; 本文是 Kubernetes api-server源码阅读 系列第二篇&#xff0c;主要讲述如何实现 kubernetes api-server 的 debug 参考b站视频地址&#xff1a;Kubernetes源码开发之旅二 1.本篇章任务 Go-Delve&#xff1a;go语言的…

使用 Elasticsearch 检测抄袭 (二)

我在在之前的文章 “使用 Elasticsearch 检测抄袭 &#xff08;一&#xff09;” 介绍了如何检文章抄袭。这个在许多的实际使用中非常有意义。我在 CSDN 上的文章也经常被人引用或者抄袭。有的人甚至也不用指明出处。这对文章的作者来说是很不公平的。文章介绍的内容针对很多的…

string的库函数reserve、resize

系列文章 http://t.csdnimg.cn/u80hL 目录 系列文章[TOC](目录) 一、reserve——请求容量的变化二、resize——操作对象使用的空间 一、reserve——请求容量的变化 改变对象的capacity——他会请求开辟和缩小对象所占的空间&#xff0c;reserve只能操作对象未使用的空间&…

指针:传址调用

#include <stdio.h> void Swap1(int x, int y) {int tmp x;x y;y tmp; } int main() {int a 0;int b 0;scanf("%d %d", &a, &b);printf("交换前&#xff1a;a%d b%d\n", a, b);Swap1(a, b);printf("交换后&#xff1a;a%d b%d\n&…

dotnet 的跨平台 UI 框架:WPF 的精神继承 | 开源日报 No.123

AvaloniaUI/Avalonia Stars: 20.7k License: MIT Avalonia 是 dotnet 的跨平台 UI 框架&#xff0c;提供灵活的样式系统&#xff0c;并支持 Windows、macOS、Linux、iOS、Android 和 WebAssembly 等多种平台。它被许多人认为是 WPF 的精神继承者&#xff0c;为 XAML 开发人员创…

OpenHarmony南向之Audio

音频架构 Audio驱动框架基于HDF驱动框架实现&#xff0c;包含内核态&#xff08;KHDF&#xff09;&#xff0c;和用户态&#xff08;UHDF&#xff09;&#xff0c; 对北向提供音频HDI接口 音频框架图 驱动架构主要由以下几部分组成。 HDI adapter&#xff1a;实现Audio HAL层…

java流浪动物保护系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 java Web 流浪动物保护系统是一套完善的java web信息管理系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为TOMCAT7.0,Myeclipse8.5开发&#xff0c;数据库为Mysql…

Spring Boot实践指南

一.SpringBoot入门案例 SpringBoot是由Pivotal团队提供的全新框架&#xff0c;其设计目的是用来简化Spring应用的初始搭建以及开发过程 原生开发SpringMVC程序过程 在没有SpringBoot前&#xff1a; 1.入门案例开发步骤 &#xff08;1&#xff09;创建新模块&#xff0c;选…

免费更新UltraNews v2.8.0 已注册 – Laravel报纸,博客多语言系统,支持AI作家,内容生成器脚本

UltraNews v2.8.0 已注册 – Laravel报纸&#xff0c;博客多语言系统&#xff0c;支持AI作家&#xff0c;内容生成器脚本 一、概述 在网络内容创作与管理领域&#xff0c;UltraNews v2.8.0以其高度现代化和多功能性而独树一帜。这是一个基于Laravel框架构建的报纸、博客多语言…

计算机网络概述(上)——“计算机网络”

各位CSDN的uu们好呀&#xff0c;好久没有更新小雅兰的计算机网络的专栏啦&#xff0c;而且期末考试也要考计算机网络&#xff0c;所以&#xff0c;小雅兰就来写计算机网络的内容啦&#xff01;&#xff01;&#xff01;下面&#xff0c;让我们进入计算机网络概述的世界吧&#…

智能优化算法应用:基于蛇优化算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于蛇优化算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于蛇优化算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.蛇优化算法4.实验参数设定5.算法结果6.参考文…