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

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已经全部展开&#xff0c;外部点击删除的时候不需要重新展开点击获取下一层数据 <template> <el-treeref"tree":data"treeData":props"defaultProps"render-after-expandhighlight-currentlazy:expand-on-click-node&q…...

【PyQt5教程 四】Qt Designer 样式表(styleSheet)实现基本小部件的自定义动态效果和资源浏览器背景添加方法

目录 一、成果演示&#xff1a; 二、样式表的使用方法: &#xff08;1&#xff09;样式表语法和属性&#xff1a; &#xff08;2&#xff09;样式表代码示例&#xff1a; &#xff08;3&#xff09;伪类和状态&#xff1a; &#xff08;4&#xff09;复合选择器&#xff…...

【git】--- 通过 git 和 gitolite 管理单仓库的 SDK

在编程的艺术世界里,代码和灵感需要寻找到最佳的交融点,才能打造出令人为之惊叹的作品。而在这座秋知叶i博客的殿堂里,我们将共同追寻这种完美结合,为未来的世界留下属于我们的独特印记。【git】--- 通过 git 和 gitolite 管理单仓库的 SDK 开发环境一、安装配置 gitolite二…...

计算机网络之NAT、代理服务、内网穿透、内网打洞

个人主页&#xff1a;C忠实粉丝 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 C忠实粉丝 原创 计算机网络之NAT、代理服务、内网穿透、内网打洞 收录于专栏【计算机网络】 本专栏旨在分享学习计算机网络的一点学习笔记&#xff0c;欢迎大家在评论区交流讨论…...

2024-金盾信安杯线上赛 WP

Misc 大赛宗旨 记事本打开&#xff0c;一眼零宽隐写 B 神工具一把梭&#xff0c;得到一串 base 编码 base64 解码得到 flag flag 值&#xff1a;flag{5d5555fa-1303-4b43-8eef-d6ea7c64c361} esab 根据题目 esab 可以发现这正是 base 的逆向&#xff0c;所以可以先逆向一下…...

MySQL 基础架构

MySQL的基础架构主要由三大核心部分构成&#xff0c;以下是详细的解析&#xff1a; 一、连接层 连接层是客户端与MySQL数据库之间的桥梁&#xff0c;主要负责通信和身份验证&#xff0c;确保数据交换的安全与稳定。具体来说&#xff0c;它负责以下任务&#xff1a; 建立连接…...

汽车升级到底应不应该设置“可取消“功能

最近&#xff0c;汽车OTA&#xff08;Over-the-Air&#xff09;升级频频成为车主讨论的热点。有些车主反映&#xff0c;一些升级增加了实用功能&#xff0c;而另一些却让体验变得复杂甚至带来不便。于是&#xff0c;大家不禁发问&#xff1a;汽车升级功能究竟应不应该允许“可取…...

【MySQL】mysql中的事务

目录 1、背景2、事务的特性3、事务之间的几种错误【1】脏读【2】不可重复读【3】幻读 4、事务中的隔离级别5、总结 1、背景 事务是存储引擎层面实现的&#xff0c;有的引擎支持事务&#xff0c;有的引擎不支持事务&#xff0c;我们常用的引擎InnoDB就支持事务&#xff0c;本文…...

大语言模型(LLM)与智能机器人的应用分析

系列文章目录 前言 近年来,大型语言模型(LLM)的集成彻底改变了机器人领域,使机器人能够以人类熟练程度进行交流、理解和推理。本文探讨了 LLM 对机器人的多方面影响,并针对在不同领域利用这些模型的关键挑战和机遇进行了研究。通过将 LLM 应用程序分类并分析核心机器人元素…...

Inno Setup 学习笔记(一)

前言 最近想把自己写的Windows端的软件打包成安装程序exe&#xff0c;又觉得自带的界面太丑了&#xff0c;想自己完全做一个新的页面 网上找到的只有基础教程&#xff0c;记录一下进阶学习过程 生命周期 按照Vue的说法叫生命周期&#xff0c;Inno Setup中叫 Pascal 脚本: 事…...

从阿里云EDM到美团云:典型微服务治理平台的实战经验分享

目录 一. 阿里云 EDM&#xff08;Enterprise Distributed Application Service&#xff09; 二. 腾讯云 TSF&#xff08;Tencent Service Framework&#xff09; 三. 华为云 FusionStage 四. 京东云 JDC&#xff08;JD Cloud Microservice Platform&#xff09; 五. 百度智…...

【接口自动化测试】一文从3000字从0到1详解接口测试用例设计

接口自动化测试是软件测试中的一种重要手段&#xff0c;它能有效提高测试效率和测试覆盖率。在进行接口自动化测试之前&#xff0c;首先需要进行接口测试用例的设计。本文将从0到1详细且规范的介绍接口测试用例设计的过程&#xff0c;帮助读者快速掌握这一技能。 一、了解接口…...

反向代理-缓存篇

文章目录 强缓存一、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&#xff0e;构造空表 2&#xff0e;插入 3&#xff0e;删除 4&#xff0e;定位 顺序表的优点&#xff1a; 顺序表的缺点&#xff1a; 例…...

JavaWeb学习、过滤器、ajax异步请求、json、jquery-api文档

一、过滤器&#xff1a; 按照过滤规则筛选出想要的资源。 为什么使用过滤器&#xff1f; 1. 很多地方都需要判断是否登录。如果我们在每个资源出进行判断&#xff0c;非常麻烦。我们可以使用过滤器在访问这些资源前进行判断。 &#xff08;这样就不用在主界面&#xff0c;修改…...

深入探索 JVM:原理、机制与实战

一、JVM 概述 JVM&#xff08;Java Virtual Machine&#xff09;是 Java 程序运行的核心组件&#xff0c;它提供了一个独立于硬件和操作系统的执行环境&#xff0c;使得 Java 程序能够在不同平台上具有跨平台的特性。 JVM 主要由以下几部分组成&#xff1a; 类装载器&#xf…...

JavaWeb学习(3)(Servlet详细、Servlet的三种实现方式(面试)、Servlet的生命周期、传统web.xml配置Servlet(了解))

目录 一、Servlet详细。 &#xff08;1&#xff09;基本介绍。 &#xff08;2&#xff09;基本作用。 1、接收客户端请求数据。 2、处理请求。 3、完成响应结果。 二、Servlet的三种实现方式。 &#xff08;1&#xff09;实现javax.servlet.Servlet接口。 1、基本介绍。 2、代码…...

支付宝租赁小程序助力便捷生活新方式

内容概要 支付宝租赁小程序为现代人带来了许多惊喜&#xff0c;它不仅仅是一个简单的租赁平台&#xff0c;更是生活中不可或缺的好帮手。想象一下&#xff0c;无论你缺少什么&#xff0c;从工具到家居用品&#xff0c;只需轻轻一点&#xff0c;便能轻松找到需要的物品。这个小…...

Linux-ubuntu环境配置

一&#xff0c;安装VWware&#xff0c;里面导入镜像文件 这些都是文件夹里面有的&#xff0c;然后对着正点原子视频安装就行&#xff0c;虚拟机的破解码&#xff0c;去百度搜一个能用就行&#xff0c;中间遇见俩问题。①乌班图里面不能上网&#xff0c;②插入U盘后&#xff0c;…...

深入解析下oracle的number底层存储格式

oracle数据库中&#xff0c;number数据类型用来存储数值数据&#xff0c;它既可以存储负数数值&#xff0c;也可以存储正数数值。相对于其他类型数据&#xff0c;number格式的数据底层存储格式要复杂得多。今天我们就详细探究下oracle的number底层存储格式。 一、环境搭建 1.…...

nginx代理rabbitmq和配置 Nginx 代理达梦数据库

在 Nginx 中使用 stream 模块进行 TCP 代理时&#xff0c;可以将 TCP 或 UDP 流量转发到指定的后端服务器。你给出的配置是一个用于代理 RabbitMQ 的示例&#xff0c;具体是在 TCP 层上代理 5672 端口的流量。 只能在nginx.conf配置上代理 stream {# 定义 upstream&#xff0c…...

汉语唤醒词的模糊判断(Python)

汉语唤醒词的模糊判断【Python】 说明安装库代码Demo其他 说明 这是一个简单的汉语模糊唤醒词的判断器&#xff0c;汉语发音中前后舌以及声母韵母的区别&#xff0c;如果进行精准判断&#xff0c;很容易误判。需要一个模糊判断的逻辑! 安装库 pip install pypinyin代码Demo …...

Redis篇-2--原理篇1--I/O多路复用机制(5种I/O模型,I/O多路复用)

I/O多路复用机制&#xff1a; Redis 是通过I/O多路复用机制来管理大量客户端连接。这使得redis可以实现通过单线程来处理多个客户端连接的请求&#xff0c;避免了为每个客户端创建独立的线程&#xff0c;从而减少了上下文切换的开销&#xff0c;提高了系统的并发性和性能。 理解…...

Knowledge Graph Studio:让知识图谱构建更简单、更智能

一、前言 上周和研究院的同事讨论 2025 年大模型产品规划时&#xff0c;让我产生了一些疑惑和不解&#xff0c;因为从大家交流的规划方向来看&#xff0c;更多的还是集中在Prompt提示词工程&#xff08;包括提示词的管理、测试、评估、调优&#xff09;这一块规划的确实挺细&a…...

vue 中实现音视频播放进度条(可拖拽,满足常见开发需求)

由于开发需要&#xff0c;作者封装了一个音视频播放进度条的组件&#xff0c;支持 vue2 及 vue3 &#xff0c;有需要的朋友后台私信作者获取组件源码哦&#xff08;工作日每天都在线&#xff09;&#xff0c;下面是对该款组件的介绍。 组件默认样式&#x1f447;&#xff08;组…...

[免费]SpringBoot+Vue企业OA自动化办公管理系统【论文+源码+SQL脚本】

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的SpringBootVue企业OA自动化办公管理系统&#xff0c;分享下哈。 项目视频演示 【免费】SpringBootVue企业OA自动化办公管理系统 Java毕业设计_哔哩哔哩_bilibili 项目介绍 随着信息技术在管理上越来越深入…...

笔记:在WPF中BitmapSource都有哪些派生类,他们主要功能,使用方法,使用场景

一、目的&#xff1a;在WPF中BitmapSource都有哪些派生类&#xff0c;他们主要功能&#xff0c;使用方法&#xff0c;使用场景 BitmapSource 是 WPF 中图像处理的基类&#xff0c;提供了许多派生类来处理不同类型的图像源。以下是一些常见的 BitmapSource 派生类、它们的主要功…...

JAVA基础学习笔记_多线程

文章目录 多线程并发和并行多线程的实现方式Thread类实现Runnable接口方式实现callable接口和Future接口实现 常用的成员方法线程的生命周期线程的安全问题同步代码块同步方法lock锁死锁 生产者和消费者(等待唤醒机制)阻塞队列实现等待唤醒机制线程的6种状态线程池自定义线程池…...

什么是自动化办公

自动化办公是指使用技术工具或软件&#xff0c;通过预设流程或脚本&#xff0c;自动执行日常办公任务&#xff0c;从而提升效率、减少错误、节约时间的办公模式。它适用于需要重复性、规则明确的工作流程&#xff0c;让员工将精力集中在更具创造性和战略性的工作上。 自动化办公…...

数据库系统

数据库模式 3个阶段以及各自的产物&#xff1a; 1、需求分析&#xff08;数据流图、数据字典、需求说明书&#xff09;&#xff1b; 2、概念结构设计&#xff08;ER模型&#xff09;&#xff1b; 3、逻辑结构设计&#xff08;关系模式&#xff09;&#xff09;&#xff1b; 关…...

网站建设 统一质量标准/网站怎么做

PHP获取不到SESSION信息的解决办法&#xff1a;首先检查【php.ini】&#xff0c;并查看【/var/tmp】的有读写权限&#xff1b;然后检查【php-fpm】配置文件&#xff1b;最后重启【php-fpm】。PHP获取不到SESSION信息的解决办法&#xff1a;一、检查 php.inivim /etc/php.ini检查…...

佛山设计网站公司吗/佛山市seo推广联系方式

https://www.zhihu.com/question/24222456 IT行业&#xff0c;未来10年和20年&#xff0c;技术发展方向会是什么&#xff1f; 本人CS 本科刚毕业&#xff0c;正在选择工作方向。希望之后专注一个方向发展。个人目前喜欢backend web and mobile app development. 同时希望听听业…...

做B2C独立网站的话需要做海外仓吗/十大免费软文推广平台

电脑用久了&#xff0c;C盘难免会积累很多无用的文件&#xff0c;致使C盘飘红。老毛桃相信遇到这问题的用户数不胜数&#xff0c;但他们几乎浑身解数也是拿它没办法的。针对这个问题&#xff0c;我们有什么办法呢&#xff1f;那么今天“如何科学清理C盘防止飘红&#xff1f;”就…...

北京昌平网站建设/营销网站建设价格

好像这题二分也可以做…… 话说这年头写堆都不用Heapify 函数的&#xff1f; Program P2010; constmaxc100000;maxn19999;maxaid100000;maxf2000000000; typenoderecorda,b:longint;end;heaprecordsize:longint;d:array[1..maxc] of longint;end; varn,c,f,i,j:longint;a:arra…...

旅游景点网站设计/网页平台做个业务推广

面向对象是一种程序的设计方法&#xff0c;或者说它是一种程序设计范型&#xff0c;其基本思想是适用对象&#xff0c;类&#xff0c;封装&#xff0c;继承&#xff0c;消息等基本概念来进行程序设计。它是从现实世界中客观存在的事物(即对象)出发来构造软件系统&#xff0c;并…...

wordpress 文章 收藏/百度客服人工电话24

1、动机 论文中多次提到使用高斯核函数计算距离,虽然学过高数,但是现在我已经忘完了,于是开始慢慢看起来 2、理解 定义 所谓径向基函数 (Radial Basis Function 简称 RBF), 就是某种沿径向对称的标量函数。 通常定义为空间中任一点x到某一中心xc之间欧氏距离的单调函数 …...