当前位置: 首页 > 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();}

http://www.lryc.cn/news/501561.html

相关文章:

  • 【PyQt5教程 四】Qt Designer 样式表(styleSheet)实现基本小部件的自定义动态效果和资源浏览器背景添加方法
  • 【git】--- 通过 git 和 gitolite 管理单仓库的 SDK
  • 计算机网络之NAT、代理服务、内网穿透、内网打洞
  • 2024-金盾信安杯线上赛 WP
  • MySQL 基础架构
  • 汽车升级到底应不应该设置“可取消“功能
  • 【MySQL】mysql中的事务
  • 大语言模型(LLM)与智能机器人的应用分析
  • Inno Setup 学习笔记(一)
  • 从阿里云EDM到美团云:典型微服务治理平台的实战经验分享
  • 【接口自动化测试】一文从3000字从0到1详解接口测试用例设计
  • 反向代理-缓存篇
  • 【伪代码】数据结构-期末复习 线性表
  • JavaWeb学习、过滤器、ajax异步请求、json、jquery-api文档
  • 深入探索 JVM:原理、机制与实战
  • JavaWeb学习(3)(Servlet详细、Servlet的三种实现方式(面试)、Servlet的生命周期、传统web.xml配置Servlet(了解))
  • 支付宝租赁小程序助力便捷生活新方式
  • Linux-ubuntu环境配置
  • 深入解析下oracle的number底层存储格式
  • nginx代理rabbitmq和配置 Nginx 代理达梦数据库
  • 汉语唤醒词的模糊判断(Python)
  • Redis篇-2--原理篇1--I/O多路复用机制(5种I/O模型,I/O多路复用)
  • Knowledge Graph Studio:让知识图谱构建更简单、更智能
  • vue 中实现音视频播放进度条(可拖拽,满足常见开发需求)
  • [免费]SpringBoot+Vue企业OA自动化办公管理系统【论文+源码+SQL脚本】
  • 笔记:在WPF中BitmapSource都有哪些派生类,他们主要功能,使用方法,使用场景
  • JAVA基础学习笔记_多线程
  • 什么是自动化办公
  • 数据库系统
  • 文件系统--底层架构(图文详解)