el-thee懒加载删除某条数据 ,el-thee懒加载重置,el-thee刷新某个节点
一、懒加载的tree已经全部展开,外部点击删除的时候不需要重新展开点击获取下一层数据

<template>
<el-treeref="tree":data="treeData":props="defaultProps"render-after-expandhighlight-currentlazy:expand-on-click-node="false"@node-click="handleNodeClick":default-expanded-keys="defaultexpanded":node-key="defaultProps['id']":default-checked-keys="defaultchecked":load="loadNode"><span class="custom-tree-node" slot-scope="{ node }"><span v-if="node.level === 1" class="ewf-deptonelevel font16">{{node.label}}</span><span v-else class="ewf-depttwolevel">{{ node.label }}</span></span></el-tree>
</template><script>
export default {data() {return {treeName: "",treeHeight: "500px",treeData: [],defaultchecked: [],defaultexpanded: ["all"],defaultProps: {children: "children",label: "categoryName",id: "iidd",isLeaf: "leaf",},};},methods: {// 点击的时候记录当前 点击的data 和 nodehandleNodeClick(data,node) {this.currentData = datathis.currentNode = node},// tree外部点击删除,并且不用初始化treedeleteFn(){// 删除接口调用成功的时候,再调用这个方法this.$refs.tree.remove(this.data); // 通过节点id找到对应树节点对象},}
}
</script>
二、重置懒加载的tree
// 重置的时候调用这个方法resetAllTree() {this.node.childNodes = []// this.node, this.resolve 在 loadNode 获取this.loadNode(this.node, this.resolve)},// 页面加载完成时,elmement-ui 会默认自动调用一次loadNode(node, resolve) {if (node.level === 0) {// 第一次的时候记录 node, resolve ,重置的时候需要用到this.node = nodethis.resolve = resolvereturn resolve([{iidd: "all",categoryName: "全部分类",},]);} else if (node.level === 1) {this.getTreeData().then((res) => {resolve(res);});} else {this.getTreeData(node).then((res) => {resolve(res);});}},getTreeData(node) {return new Promise((resolve, reject) => {let params = {sourceSystem:this.sourceSystem}if(node && node.data && node.data.iidd){params.iidd = node.data.iidd}// 调用接口retrieveLazyMenus(params).then((res) => {res.data.forEach(el => {// hasChildren 接口返回的字段,用来表示是否还有子级数据el.leaf = !el.hasChildren})resolve(res.data);});});},
三、如顶部图片所示,给某一项新增子级数据,不初始化tree
// 新增的时候记录当前 点击的data 和 nodehandleNodeClick(data,node) {this.currentData = datathis.currentNode = node},// 调用新增接口后,然后再初始化当前节点,而不是初始化整个treeadd(){// 获取当前节点,key可以在@node-click和:load绑定函数的回调参数node用变量存储后有需要刷新的地方取node.keylet node = this.$refs.tree.getNode(this.currentNode.key);// 设置未进行懒加载状态node.loaded = false;// 重新展开节点就会间接重新触发load达到刷新效果node.expand();}
相关文章:
el-thee懒加载删除某条数据 ,el-thee懒加载重置,el-thee刷新某个节点
一、懒加载的tree已经全部展开,外部点击删除的时候不需要重新展开点击获取下一层数据 <template> <el-treeref"tree":data"treeData":props"defaultProps"render-after-expandhighlight-currentlazy:expand-on-click-node&q…...
【PyQt5教程 四】Qt Designer 样式表(styleSheet)实现基本小部件的自定义动态效果和资源浏览器背景添加方法
目录 一、成果演示: 二、样式表的使用方法: (1)样式表语法和属性: (2)样式表代码示例: (3)伪类和状态: (4)复合选择器ÿ…...
【git】--- 通过 git 和 gitolite 管理单仓库的 SDK
在编程的艺术世界里,代码和灵感需要寻找到最佳的交融点,才能打造出令人为之惊叹的作品。而在这座秋知叶i博客的殿堂里,我们将共同追寻这种完美结合,为未来的世界留下属于我们的独特印记。【git】--- 通过 git 和 gitolite 管理单仓库的 SDK 开发环境一、安装配置 gitolite二…...
计算机网络之NAT、代理服务、内网穿透、内网打洞
个人主页:C忠实粉丝 欢迎 点赞👍 收藏✨ 留言✉ 加关注💓本文由 C忠实粉丝 原创 计算机网络之NAT、代理服务、内网穿透、内网打洞 收录于专栏【计算机网络】 本专栏旨在分享学习计算机网络的一点学习笔记,欢迎大家在评论区交流讨论…...
2024-金盾信安杯线上赛 WP
Misc 大赛宗旨 记事本打开,一眼零宽隐写 B 神工具一把梭,得到一串 base 编码 base64 解码得到 flag flag 值:flag{5d5555fa-1303-4b43-8eef-d6ea7c64c361} esab 根据题目 esab 可以发现这正是 base 的逆向,所以可以先逆向一下…...
MySQL 基础架构
MySQL的基础架构主要由三大核心部分构成,以下是详细的解析: 一、连接层 连接层是客户端与MySQL数据库之间的桥梁,主要负责通信和身份验证,确保数据交换的安全与稳定。具体来说,它负责以下任务: 建立连接…...
汽车升级到底应不应该设置“可取消“功能
最近,汽车OTA(Over-the-Air)升级频频成为车主讨论的热点。有些车主反映,一些升级增加了实用功能,而另一些却让体验变得复杂甚至带来不便。于是,大家不禁发问:汽车升级功能究竟应不应该允许“可取…...
【MySQL】mysql中的事务
目录 1、背景2、事务的特性3、事务之间的几种错误【1】脏读【2】不可重复读【3】幻读 4、事务中的隔离级别5、总结 1、背景 事务是存储引擎层面实现的,有的引擎支持事务,有的引擎不支持事务,我们常用的引擎InnoDB就支持事务,本文…...
大语言模型(LLM)与智能机器人的应用分析
系列文章目录 前言 近年来,大型语言模型(LLM)的集成彻底改变了机器人领域,使机器人能够以人类熟练程度进行交流、理解和推理。本文探讨了 LLM 对机器人的多方面影响,并针对在不同领域利用这些模型的关键挑战和机遇进行了研究。通过将 LLM 应用程序分类并分析核心机器人元素…...
Inno Setup 学习笔记(一)
前言 最近想把自己写的Windows端的软件打包成安装程序exe,又觉得自带的界面太丑了,想自己完全做一个新的页面 网上找到的只有基础教程,记录一下进阶学习过程 生命周期 按照Vue的说法叫生命周期,Inno Setup中叫 Pascal 脚本: 事…...
从阿里云EDM到美团云:典型微服务治理平台的实战经验分享
目录 一. 阿里云 EDM(Enterprise Distributed Application Service) 二. 腾讯云 TSF(Tencent Service Framework) 三. 华为云 FusionStage 四. 京东云 JDC(JD Cloud Microservice Platform) 五. 百度智…...
【接口自动化测试】一文从3000字从0到1详解接口测试用例设计
接口自动化测试是软件测试中的一种重要手段,它能有效提高测试效率和测试覆盖率。在进行接口自动化测试之前,首先需要进行接口测试用例的设计。本文将从0到1详细且规范的介绍接口测试用例设计的过程,帮助读者快速掌握这一技能。 一、了解接口…...
反向代理-缓存篇
文章目录 强缓存一、Expires(http1.0 规范)二、cache-control(http1.1 出现的 header 信息)Cache-Control 的常用选项Cache-Control 常用选项的选择三、弊端协商缓存一、ETag二、If-None-Match三、Last-modified四、If-Modified-Since浏览器的三种刷新方式静态资源部署策略…...
【伪代码】数据结构-期末复习 线性表
目录 例1 矩阵相乘 线性表 2.1 线性表的类型定义 例2-1 求并集 LALA∪LB 例2-2 有序表归并 2. 2 线性表的顺序表示和实现 1.构造空表 2.插入 3.删除 4.定位 顺序表的优点: 顺序表的缺点: 例…...
JavaWeb学习、过滤器、ajax异步请求、json、jquery-api文档
一、过滤器: 按照过滤规则筛选出想要的资源。 为什么使用过滤器? 1. 很多地方都需要判断是否登录。如果我们在每个资源出进行判断,非常麻烦。我们可以使用过滤器在访问这些资源前进行判断。 (这样就不用在主界面,修改…...
深入探索 JVM:原理、机制与实战
一、JVM 概述 JVM(Java Virtual Machine)是 Java 程序运行的核心组件,它提供了一个独立于硬件和操作系统的执行环境,使得 Java 程序能够在不同平台上具有跨平台的特性。 JVM 主要由以下几部分组成: 类装载器…...
JavaWeb学习(3)(Servlet详细、Servlet的三种实现方式(面试)、Servlet的生命周期、传统web.xml配置Servlet(了解))
目录 一、Servlet详细。 (1)基本介绍。 (2)基本作用。 1、接收客户端请求数据。 2、处理请求。 3、完成响应结果。 二、Servlet的三种实现方式。 (1)实现javax.servlet.Servlet接口。 1、基本介绍。 2、代码…...
支付宝租赁小程序助力便捷生活新方式
内容概要 支付宝租赁小程序为现代人带来了许多惊喜,它不仅仅是一个简单的租赁平台,更是生活中不可或缺的好帮手。想象一下,无论你缺少什么,从工具到家居用品,只需轻轻一点,便能轻松找到需要的物品。这个小…...
Linux-ubuntu环境配置
一,安装VWware,里面导入镜像文件 这些都是文件夹里面有的,然后对着正点原子视频安装就行,虚拟机的破解码,去百度搜一个能用就行,中间遇见俩问题。①乌班图里面不能上网,②插入U盘后,…...
深入解析下oracle的number底层存储格式
oracle数据库中,number数据类型用来存储数值数据,它既可以存储负数数值,也可以存储正数数值。相对于其他类型数据,number格式的数据底层存储格式要复杂得多。今天我们就详细探究下oracle的number底层存储格式。 一、环境搭建 1.…...
大数据毕业设计 hadoop+spark+kafka+hive动漫推荐系统 动漫数据分析 可视化 漫画推荐
1、项目介绍 技术栈: Python语言、Django框架、SQLite数据库、Echarts可视化 、HTML、基于物品协同过滤推荐算法 (1)首页------不同类 型的动漫数据 (2)动漫类型饼图 (3)动漫收藏排名和不同国家…...
uStepper S开源库深度解析:闭环步进控制与TMC2130驱动实战
1. uStepper S 开源驱动库深度解析:面向嵌入式工程师的实战指南 uStepper S 是一款集成了高性能步进电机驱动、高精度磁编码器反馈、ARM Cortex-M0 微控制器(NXP LPC11U35)与丰富外设接口的智能运动控制模块。其配套的 uStepper S Arduino…...
Linux内核进程创建与调度机制详解
Linux内核进程创建机制深度解析:从fork到进程调度1. 进程创建概述在Linux操作系统中,进程创建是通过fork系统调用实现的。fork系统调用会创建一个与父进程几乎完全相同的子进程,包括代码段、数据段、堆栈等内存空间的复制。本文将深入分析Lin…...
STS4x温度传感器I²C驱动库深度解析与跨平台移植
1. STS4x温湿度传感器驱动库技术解析1.1 项目定位与工程价值Sensirion STS4x系列是瑞士Sensirion公司推出的高精度数字温度传感器,采用CMOSens技术,具备0.1C典型精度、0.01C分辨率、低功耗(典型待机电流仅0.5μA)及快速响应&#…...
OpenClaw自动化测试:Qwen3-32B批量执行LeetCode题目
OpenClaw自动化测试:Qwen3-32B批量执行LeetCode题目 1. 为什么需要自动化编程能力测试 作为一名长期关注AI编程辅助工具的技术博主,我一直在寻找能够客观评估大模型编程能力的方法。传统的单次对话测试往往带有偶然性,无法系统性地反映模型…...
java打卡学习3:ArrayList扩容机制
ArrayList扩容机制概述ArrayList是基于动态数组实现的集合类,当元素数量超过当前数组容量时,会自动触发扩容机制。其核心目的是平衡内存占用与性能开销。默认初始容量未指定初始容量时,默认创建一个空数组(JDK 1.8)&am…...
蒙纳什大学发现多模态推理模型的“不确定性陷阱“
这项由蒙纳什大学、佐治亚理工学院、康奈尔大学等多所知名学府联合完成的研究发表于2026年3月的《计算机视觉与模式识别》会议,论文编号为arXiv:2603.13366v1。有兴趣深入了解的读者可以通过该编号查询完整论文。当你问一个AI"这张图片里有什么"时&#x…...
雷达点云与相机标定避坑指南:如何用MATLAB Lidar Camera Calibrator提高标定精度
MATLAB Lidar Camera Calibrator实战:高精度标定的7个关键步骤与避坑策略 当激光雷达与相机数据需要融合时,标定精度直接决定了后续感知算法的上限。许多工程师在首次使用MATLAB Lidar Camera Calibrator时,常因自动标定结果不理想而陷入困惑…...
C++/Qt 使用 Tushare 获取股票信息
探索数据之源:使用tushare为Qt/C学习项目获取股票数据在进行金融量化分析或学习金融市场行为时,获取高质量、结构化的股票数据是至关重要的第一步。作为一个计划将Qt/C用于金融数据可视化或策略模拟的学习者,我近期深入体验了使用Python库tus…...
MediaPipe Holistic实战效果:一张照片生成全身骨骼图,效果超乎想象
MediaPipe Holistic实战效果:一张照片生成全身骨骼图,效果超乎想象 1. 引言:当AI遇见全身感知 想象一下,你只需要上传一张普通的全身照片,AI就能自动识别出你的面部表情、手势动作和身体姿态,并生成一张精…...
