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

element ui Tree树形控件

  1. lazy 是否懒加载子节点,需与 load 方法结合使用 boolean 默认为false
  2. load 加载子树数据的方法,仅当 lazy 属性为true 时生效 function(node, resolve)
  3. 使用懒加载load不需要再使用data,利用resolve返回值即可
  4. 注意:第一层的数据要写在node.level == 0

HTML部分

 <el-treeshow-checkboxnode-key="id"lazy  //必须:load="loadNode" //必须:default-expand-all ="false":expand-on-click-node="false":render-content="renderContent"></el-tree>

js部分

data(){return{props: {label: "name",   //显示在页面上的值的属性名children: "zones", //表示该组件的子节点数据存储在"zones"属性中isLeaf: "leaf",//表示该组件的叶子节点数据存储在"leaf"属性中}
}
},
computed:{advertList(){return this.$store.state.advert.advertList}methods:{  // 此处只举例了两层loadNode(node, resolve) {//第一层if (node.level === 0) {this.getAdveData(resolve);}//第二层if (node.level  ==  1) {this.getchildData(node,resolve);}//其余返回空 ,一定要加这个判断,否则会一直执行懒加载函数else{return resolve([])}
},
//第一层的逻辑async getAdveData(resolve){try {await this.$store.dispatch('advert/getAdvert')return resolve( this.advertList);} catch (error) {console.warn(error);}},//第二层的逻辑async  getchildData(node,resolve){try {let params = {id:node.data.pid}await this.$store.dispatch('advert/getAdvert',params)return resolve( this.advertList);} catch (error) {console.warn(error);}}}

相关文章:

element ui Tree树形控件

lazy 是否懒加载子节点&#xff0c;需与 load 方法结合使用 boolean 默认为falseload 加载子树数据的方法&#xff0c;仅当 lazy 属性为true 时生效 function(node, resolve)使用懒加载load不需要再使用data&#xff0c;利用resolve返回值即可注意&#xff1a;第一层的数据要写…...

AI 绘画神器 Fooocus 图生图:图像放大或变化、图像提示、图像重绘或扩充、反推提示词、生成参数提取、所需模型下载

本文收录于《AI绘画从入门到精通》专栏&#xff0c;专栏总目录&#xff1a;点这里&#xff0c;订阅后可阅读专栏内所有文章。 大家好&#xff0c;我是水滴~~ 本文讲述 Fooocus 的图生图功能&#xff0c;主要内容包括&#xff1a;图像放大或变化、图像提示、图像重绘或扩充、反推…...

yolov8 模型架构轻量化 | 极致降参数量

模型轻量化加速是深度学习领域的重要研究方向&#xff0c;旨在减小模型的体积和计算复杂度&#xff0c;从而提高在资源受限设备上的运行效率&#xff0c;模型参数量在轻量化加速中扮演着至关重要的角色。 首先&#xff0c;模型参数量直接决定了模型的复杂度和存储空间需求。随…...

uniapp 小程序低功耗蓝牙配网 ble配网 物联网

1.获取蓝牙列表 bleList.vue <template><view><button touchstart"startSearch">获取蓝牙列表</button><scroll-view :scroll-top"scrollTop" scroll-y class"content-pop"><viewclass"bluetoothItem&q…...

服务器防火墙有什么用防护策略

随着互联网的飞速发展&#xff0c;服务器的安全问题日益凸显。为了保护服务器免受网络攻击和恶意入侵的威胁&#xff0c;人们引入了防火墙的概念。服务器防火墙作为保护服务器的第一道防线&#xff0c;具有重要的作用。那么服务器防火墙有什么用&#xff1f; 首先&#xff0c;服…...

27.哀家要长脑子了!

目录 1.316. 去除重复字母 - 力扣&#xff08;LeetCode&#xff09; 2. 1209. 删除字符串中的所有相邻重复项 II - 力扣&#xff08;LeetCode 哎哟 烦死了 刚刚不小心退出又没保存 又要写一遍 烦死了 最近刷题不得劲啊 感觉这脑子没长一点 1.316. 去除重复字母 - 力扣&am…...

Redis实战—验证码登录注册

目录 基于Session Controller层 Service层 ServiceImpl层 ​编辑校验登录状态 ThreadLocal 登录拦截器 添加拦截器到Config Controller层实现 基于Redis ServiceImpl 新增刷新拦截器 添加拦截器到Config 基于Session Controller层 /*** 发送手机验证码*/PostMappi…...

对话机器人技术解说

一、RAG介绍 如何不通过微调模型来提高LLM性能&#xff0c;检索增强生成&#xff08;RAG&#xff09;是未来的发展方向。 Embedding&#xff1a;将文档的句子或单词块转换为数字向量。就向量之间的距离而言&#xff0c;彼此相似的句子应该很近&#xff0c;而不同的句子应该离…...

红黑树底层封装map、set C++

目录 一、框架思考 三个问题 问题1的解决 问题2的解决&#xff1a; 问题3的解决&#xff1a; 二、泛型编程 1、仿函数的泛型编程 2、迭代器的泛型编程 3、typename&#xff1a; 4、/--重载 三、原码 红黑树 map set 一、框架思考 map和set都是使用红黑树底层&…...

压力给到 Google,OpenAI 发布 GPT-4o 来了

北京时间5月14日凌晨1点&#xff0c;OpenAI 开启了今年的第一次直播&#xff0c;根据官方消息&#xff0c;这次旨在演示 ChatGPT 和 GPT-4 的升级内容。在早些时候 Sam Altman 在 X 上已经明确&#xff0c;「我们一直在努力开发一些我们认为人们会喜欢的新东西&#xff0c;对我…...

【SpringSecurity源码】过滤器链加载流程

theme: smartblue highlight: a11y-dark 一、前言及准备 1.1 SpringSecurity过滤器链简单介绍 在Spring Security中&#xff0c;过滤器链&#xff08;Filter Chain&#xff09;是由多个过滤器&#xff08;Filter&#xff09;组成的&#xff0c;这些过滤器按照一定的顺序对进…...

第9章.Keil5-MDK软件简介

目录 0. 《STM32单片机自学教程》专栏 9.1 主界面 9.2 文本格式编辑 9.3 代码提示&语法检测&代码模版 9.4 其他小技巧 9.4.1 TAB 键的妙用 9.4.2 快速定位函数/变量被定义的地方 9.4.3 快速注释与快速消注释 9.4.4 快速打开头文件 9.4.5 查找替换…...

mysql中utf8字符集中文字节长度统计如何统计到2个字节一个汉字

在 MySQL 的 utf8 字符集中&#xff08;也被称为 utf8mb3&#xff09;&#xff0c;中文字符实际上并不是用2个字节来表示的&#xff0c;而是使用3个字节。这是 UTF-8 编码的一个特性&#xff0c;它使用1到4个字节来表示一个字符&#xff0c;具体取决于字符的 Unicode 码点。 对…...

如何实现Linux双网卡同时连接内网和外网的配置?

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …...

ASCLL码表以及字符的相加减

ASCLL码表完整版及解释_acssll码-CSDN博客 #include <getopt.h> #include <stdio.h> #include <stdlib.h>#define MAX_PATH 256 char filename[MAX_PATH 5];int isdigit(int c) {if (c > 0 && c < 9)return 1;return 0; }int main(int argc…...

一键修复所有dll缺失,教大家解决丢失的dll文件

修复所有DLL&#xff08;动态链接库&#xff09;文件缺失的问题通常不可能通过单一的"一键修复"按钮来实现&#xff0c;因为DLL文件缺失可能由各种不同的原因导致&#xff0c;比如应用程序安装不正确、病毒感染、或系统文件损坏等。 使用内置的系统文件检查器&#x…...

wsl2安装rancher并导入和创建k8s集群

环境准备 安装wsl2点击此文]ubuntu20.04安装docker 点击此文,安装完成后docker镜像仓库改成阿里云镜像加速地址.如果不熟请点击此文 docker 安装rancher 启动wsl,根据官方文档以root身份执行 sudo docker run -d --restartunless-stopped -p 80:80 -p 443:443 --privileged …...

内网环境ubuntu设置静态ip、DNS、路由,不影响网络访问

内网环境通常是有线的&#xff0c;通过服务器的ip、mac、dns地址访问网络才生效的&#xff0c;如果ip地址变了&#xff0c;就不能访问网络了。 如果你的ip地址变了&#xff0c;或者要防止ip变更影响网络访问&#xff0c;就要设置 1、依次点击右上角的电源-设置&#xff0c;在打…...

学习前端第三十七天(静态属性静态方法、类检查、错误处理)

一、静态属性和静态方法 1、静态属性静态方法 在属性和方法前加上static&#xff0c;创建属于类自己的属性和方法 class Person {// 加static&#xff0c;属于类自己的static name "xc"; // 类的name属性static height 183; // 类的height属性static age 20;…...

全网最全的基于电机控制的38类simulink仿真全家桶----新手大礼包

整理了基于电机的38种simulink仿真全家桶&#xff0c;包含多种资料&#xff0c;类型齐全十分适合新手学习使用。包括但是不局限于以下&#xff1a; 1、基于多电平逆变器的无刷直流电机驱动simulink仿真 2、基于负载转矩的感应电机速度控制simulink仿真 3、基于滑膜观测器的永…...

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

Mac软件卸载指南,简单易懂!

刚和Adobe分手&#xff0c;它却总在Library里给你写"回忆录"&#xff1f;卸载的Final Cut Pro像电子幽灵般阴魂不散&#xff1f;总是会有残留文件&#xff0c;别慌&#xff01;这份Mac软件卸载指南&#xff0c;将用最硬核的方式教你"数字分手术"&#xff0…...

使用LangGraph和LangSmith构建多智能体人工智能系统

现在&#xff0c;通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战&#xff0c;比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...

MySQL 部分重点知识篇

一、数据库对象 1. 主键 定义 &#xff1a;主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 &#xff1a;确保数据的完整性&#xff0c;便于数据的查询和管理。 示例 &#xff1a;在学生信息表中&#xff0c;学号可以作为主键&#xff…...

鸿蒙HarmonyOS 5军旗小游戏实现指南

1. 项目概述 本军旗小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;采用DevEco Studio实现&#xff0c;包含完整的游戏逻辑和UI界面。 2. 项目结构 /src/main/java/com/example/militarychess/├── MainAbilitySlice.java // 主界面├── GameView.java // 游戏核…...

字符串哈希+KMP

P10468 兔子与兔子 #include<bits/stdc.h> using namespace std; typedef unsigned long long ull; const int N 1000010; ull a[N], pw[N]; int n; ull gethash(int l, int r){return a[r] - a[l - 1] * pw[r - l 1]; } signed main(){ios::sync_with_stdio(false), …...

JavaScript 标签加载

目录 JavaScript 标签加载script 标签的 async 和 defer 属性&#xff0c;分别代表什么&#xff0c;有什么区别1. 普通 script 标签2. async 属性3. defer 属性4. type"module"5. 各种加载方式的对比6. 使用建议 JavaScript 标签加载 script 标签的 async 和 defer …...

数据挖掘是什么?数据挖掘技术有哪些?

目录 一、数据挖掘是什么 二、常见的数据挖掘技术 1. 关联规则挖掘 2. 分类算法 3. 聚类分析 4. 回归分析 三、数据挖掘的应用领域 1. 商业领域 2. 医疗领域 3. 金融领域 4. 其他领域 四、数据挖掘面临的挑战和未来趋势 1. 面临的挑战 2. 未来趋势 五、总结 数据…...

二维数组 行列混淆区分 js

二维数组定义 行 row&#xff1a;是“横着的一整行” 列 column&#xff1a;是“竖着的一整列” 在 JavaScript 里访问二维数组 grid[i][j] 表示 第i行第j列的元素 let grid [[1, 2, 3], // 第0行[4, 5, 6], // 第1行[7, 8, 9] // 第2行 ];// grid[i][j] 表示 第i行第j列的…...