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();}

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

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

相关文章

【问题记录】07 MAC电脑,使用FileZilla(SFTP)连接堡垒机不成功

项目场景&#xff1a; 使用MAC电脑&#xff0c;以子账号&#xff08;非root&#xff09;的形式登录&#xff0c;连接堡垒机CLB&#xff08;传统型负载均衡&#xff09;&#xff0c;使用FileZilla&#xff08;SFTP&#xff09;进行FTP文件传输。 问题描述&#xff1a; MAC电脑…

狗为啥会咬自己的尾巴

狗啃咬自己的尾巴&#xff0c;这一现象并非简单的好奇或贪玩之举&#xff0c;其背后可能隐藏着诸多复杂的原因&#xff0c;值得我们深入探究与深思。 从生理层面来看&#xff0c;尾巴部位出现皮肤疾病、寄生虫感染或受伤疼痛是常见诱因。例如&#xff0c;湿疹、跳蚤、蜱虫等问…

【数据结构——栈与队列】顺序栈的基本运算(头歌实践教学平台习题)【合集】

目录&#x1f60b; 任务描述 相关知识 测试说明 我的通关代码: 测试结果&#xff1a; 任务描述 本关任务&#xff1a;编写一个程序实现顺序栈的基本运算。 相关知识 为了完成本关任务&#xff0c;你需要掌握&#xff1a; 初始化栈、销毁栈、判断栈是否为空、进栈、出栈、取…

Codeforces Round 992 (Div. 2)

传送门&#xff1a;Dashboard - Codeforces Round 992 (Div. 2) - Codeforces A. Game of Division 思路&#xff1a;模拟 AC代码&#xff1a;Submission #295676347 - Codeforces B. Paint a Strip 思路&#xff1a;数学 贪心 放置的位置一定是 1 4 10 22 48 ....…

前端(五)css属性

css属性 文章目录 css属性一、字体属性二、文本属性三、背景属性四、盒子模型 一、字体属性 font-weight&#xff1a;文字粗细&#xff0c;在100到900之间&#xff0c;normal(400),bord(700),inherit(继承父类) font-style&#xff1a;文字风格&#xff0c;normal表示正常(默认…

Linux网络之“桥接模式”和“NAT模式”配置

介绍虚拟机的“桥接模式”和“NAT模式”配置。 1、“桥接模式”介绍 “桥接模式”将虚拟机的虚拟网络适配器与主机的“物理网络适配器”进行交接&#xff0c;虚拟机中的“虚拟网络适配器”通过主机中的“物理网络适配器”访问外部网络。物理主机的网卡好比是一个“虚拟的交换机…

shell编程(完结)

shell编程&#xff08;完结&#xff09; 声明&#xff01; 学习视频来自B站up主 ​泷羽sec​​ 有兴趣的师傅可以关注一下&#xff0c;如涉及侵权马上删除文章 笔记只是方便各位师傅的学习和探讨&#xff0c;文章所提到的网站以及内容&#xff0c;只做学习交流&#xff0c;其…

爬虫自动化之drissionpage+SwitchyOmega实现随时切换代理ip

本文介绍了如何使用DrizzlePage进行爬虫自动化,并重点讲解了首次启动时设置代理IP以及通过SwitchyOmega插件实现随时切换代理IP的方法。 安装一次,后面调用就不会再去安装了 下载地址:https://github.com/FelisCatus/SwitchyOmega/releases 这两个文件随便那个都可以,下载…

Ariba Procurement: Administration_Integration Basics

Ariba Procurement: Administration_Integration Basics SAP Ariba 和SAP ERP 的主数据集成 对于主数据,CIG 仅仅做数据传输,在CIG系统里无任何转换逻辑。在CIG中,不需要给主数据创建项目。SAP中以所需的文件格式或模式提取主数据(MD)。文件格式为CSV。然后,所有文件都…

HDOJ 1735:字数统计 ← 贪心

【题目来源】https://acm.hdu.edu.cn/showproblem.php?pid1735【题目描述】 一天&#xff0c;淘气的 Tom 不小心将水泼到了他哥哥 Jerry 刚完成的作文上。原本崭新的作文纸顿时变得皱巴巴的&#xff0c;更糟糕的是由于水的关系&#xff0c;许多字都看不清了。可怜的 Tom 知道他…

Next.js配置教程:构建自定义服务器

更多有关Next.js教程&#xff0c;请查阅&#xff1a; 【目录】Next.js 独立开发系列教程-CSDN博客 目录 前言 1. 什么是自定义服务器&#xff1f; 2. 配置自定义服务器 2.1 基础配置 2.2 集成不同的服务器框架 使用Fastify 使用Koa 3. 自定义服务器的高级功能 3.1 路…

三对角矩阵@带状矩阵的压缩存储与还原

文章目录 三对角矩阵计算带状区域元素数量 压缩公式由 k k k确定 i , j i,j i,j确定 i ( k ) i(k) i(k)另一种表达式 确定 j ( k ) j(k) j(k)公式总结应用举例 三对角矩阵 对角矩阵也称带状矩阵。对 n n n 阶矩阵 A A A 中的任意一个元素 a i , j a_{i,j} ai,j​&#xff0…

解决创建laravel项目,使用国外镜像超时,国内镜像缺包的问题

解决创建laravel项目&#xff0c;使用国外镜像超时&#xff0c;国内镜像缺包的问题 一、前言二、切换镜像三、创建最新版本四、创建指定版本 一、前言 最近想下载 laravel 框架看看&#xff0c;但也遇到了些麻烦&#xff0c;这里做个记录。 二、切换镜像 先查看镜像源&#…

ThinkPHP 5.1 的模板布局功能

ThinkPHP 5.1 的模板布局功能&#xff0c;包括全局配置、模板标签以及动态方法布局三种方式。以下是对这三种方式的要点概括和补充&#xff0c;以便于更好地理解和使用&#xff1a; 方式一&#xff1a;全局配置方式 适用于全站使用相同布局的情况&#xff0c;配置简单且统一。…

静默活体识别API、静默活体识别sdk、C++集成

静默活体检测服务接口&#xff0c;是一种先进的生物特征认证技术&#xff0c;可对上传的人脸图像进行检测&#xff0c;确认图像中人脸是否为人体实时拍摄&#xff0c;基于深度学习算法&#xff0c;能够有效防止照片攻击、面具攻击、屏幕攻击等行为。 发展趋势 随着人工智能和机…

图片添加水印的实验原理,实验代码,实验现象

一、图片添加水印的实验原理 1. 选择水印类型 可见水印&#xff1a;这些水印可以直接被肉眼看到&#xff0c;通常用于防止未经授权的使用。它们可以是文字、标志或图案等形式&#xff0c;并且放置在图像的显著位置。不可见水印&#xff1a;这类水印不容易被察觉&#xff0c;但…

【机器学习算法】——决策树之集成学习:Bagging、Adaboost、Xgboost、RandomForest、XGBoost

集成学习 **集成学习(Ensemble learning)**是机器学习中近年来的一大热门领域。其中的集成方法是用多种学习方法的组合来获取比原方法更优的结果。 使用于组合的算法是弱学习算法&#xff0c;即分类正确率仅比随机猜测略高的学习算法&#xff0c;但是组合之后的效果仍可能高于…

Git、Pip:安装特定版本的库的最佳方法

以这个项目为例&#xff1a; https://github.com/ashawkey/diff-gaussian-rasterization/tree/d986da0d4cf2dfeb43b9a379b6e9fa0a7f3f7eea 这个项目叫做 diff-gaussian-rasterization&#xff0c;如果要直接安装它会存在子模块文件缺失报错&#xff0c;而且不是上面”tree“后…

MySQL常用运维操作(一):快速复制一张表

假设有如下表结构&#xff1a; -- 创建表db1.t create database db1; use db1; create table t(id int primary key,a int, b int, index(a))engineinnodb;-- 向表t写入1000行数据 delimiter ;;create procedure idata()begindeclare i int;set i1;while(i<1000)doinsert i…

视频网站中重磅推荐模块(附加源码)

写在开头 上期代码主要实现省市区三级联动效果&#xff0c;开发久了很多功能都是通过框架组件库来完成&#xff0c;但是如果组件满足不了开发需求&#xff0c;还需要开发人员手动封装组件&#xff0c;专门出这样一期文章&#xff0c;通过原生js实现一些特定功能&#xff0c;功能…