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

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

代码如下:

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

<template><div><el-tree:props="props":load="loadNode"lazynode-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.hqwc.cn/news/293688.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

WEB 3D技术 three.js 设置图像随窗口大小变化而变化

本文 我们来讲讲我们图层适应窗口变化的效果 可能这样说有点笼统 那么 自适应应该大家更熟悉 就是 当我们窗口发生变化说 做一些界面调整比例 例如 我们这样一个i项目界面 我们打开 F12 明显有一部分被挡住了 那么 我们可以刷新 这样是正常了 但是 我们将F12关掉 给F12的…

c# OpenCV 检测(斑点检测、边缘检测、轮廓检测)(五)

在C#中使用OpenCV进行图像处理时&#xff0c;可以使用不同的算法和函数来实现斑点检测、边缘检测和轮廓检测。 斑点检测边缘检测轮廓检测 一、斑点检测&#xff08;Blob&#xff09; 斑点检测是指在图像中找到明亮或暗的小区域&#xff08;通常表示为斑点&#xff09;&#…

win11下配置visual studio 2022+PCL1.13.1

第一部分&#xff1a;visual studio2022 安装 vs官网网址如下&#xff1a;https://visualstudio.microsoft.com/zh-hans/vs/ 第一步&#xff1a;我们打开官网链接&#xff0c;按如下操作点击下载免费版本的exe文件 第二步&#xff1a;打开下载目录下的安装文件进行安装&#…

EndNote插入参考文献

下载参考文献格式 复制刚刚下载的文件到endnote安装的位置下的Styles文件 重启endnote&#xff0c;在open style manager中勾选我们的格式 1.知网 下载&#xff0c;上传 可以attach PDF 分组 引用 2.Web of science 打开EndNote后&#xff0c;双击上面这个.ciw文件&#xff0c…

CSS自适应分辨率 amfe-flexible 和 postcss-pxtorem:Webpack5 升级后相关插件和配置更新说明

前言 项目对应的 webpack5 版本如下&#xff1a; npm i webpack5.89.0 -D npm i webpack-cli5.1.4 -D升级插件 说明一下&#xff0c;我更喜欢固定版本号&#xff0c;这样随机bug会少很多&#xff0c;更可控~ npm i postcss-loader6.1.1 -D npm i postcss-pxtorem6.0.0 -D配…

吴恩达RLHF课程笔记

1.创建偏好数据集 一个prompt输入到LLM后可以有多个回答&#xff0c;对每个回答选择偏好 比如{prompt,answer1,answer2,prefer1} 2.根据这个数据集&#xff08;偏好数据集&#xff09;&#xff0c;创建reward model&#xff0c;这个model也是一个LLM,并且它是回归模型&#…

机器学习---推荐系统案例(二)

四、推荐系统---模型训练 1、模型训练代码 模型训练代码参照scala文件&#xff1a;Recommonder.scala 1.Logger.getLogger("org.apache.spark").setLevel(Level.ERROR) 2.val conf new SparkConf().setAppName("recommonder").setMaster("local[*…

虾皮开通:如何在虾皮上开通跨境电商店铺

在当今的数字时代&#xff0c;跨境电商已经成为了全球贸易的一种重要形式。虾皮&#xff08;Shopee&#xff09;作为东南亚市场份额第一的跨境电商平台&#xff0c;为卖家提供了广阔的销售机会。如果您想在虾皮上开通店铺&#xff0c;以下是一些步骤和注意事项供您参考。 先给…

百川大模型AI对话实战——Python开发一个对话机器人

百川大模型开放提供API体验中心&#xff0c;体验不错&#xff0c;有小伙伴也对搭建自己的对话机器人比较兴趣&#xff0c;今天通过Python来简单介绍下&#xff0c;如何调用百川大模型的API来构建自己的小产品。 在开发环境中安装Python&#xff0c;如何安装&#xff1f;参照网…

mysql面试:面试常问题概览、定位慢查询(explain命令)、mysql体系结构、支持的存储引擎(InnoDB)、面试回答模板

面试常问题概览 如何定位慢查询 通常页面加载过慢、接口压测响应时间过长&#xff08;超过1s&#xff09;&#xff0c;此时我们应该要定位具体是否里面有mysql的慢查询的因素。 方案一&#xff1a;调试和运维工具 调试工具&#xff1a;Arthas 运维工具&#xff1a;Prometheu…

用数码管慢速动态扫描显示数字“1234“

#include<reg51.h> // 包含51单片机寄存器定义的头文件 void delay(void) //延时函数&#xff0c;延时一段时间 { unsigned char i,j; for(i0;i<250;i) for(j0;j<250;j) ; } void main(void) { while(1) //无限循…

python报错A value is trying to be set on a copy of a slice

加入.copy()即可避免该报错提示 原代码&#xff1a; df5df4.drop_duplicates() print(df5.shape)df5[班型中文名称]df5[班型名称]-A print(df5.head()) 输出结果&#xff1a; 修改后代码&#xff1a; df5df4.drop_duplicates().copy() print(df5.shape)df5[班型中文名称]df…