el-thee懒加载删除某条数据 ,el-thee懒加载重置,el-thee刷新某个节点

news2024/12/12 19:38:14

 一、懒加载的tree已经全部展开,外部点击删除的时候不需要重新展开点击获取下一层数据

<template>
<el-tree
              ref="tree"
              :data="treeData"
              :props="defaultProps"
              render-after-expand
              highlight-current
              lazy
              :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 和 node
    handleNodeClick(data,node) {
      this.currentData = data
      this.currentNode = node
    },
    
    // tree外部点击删除,并且不用初始化tree
    deleteFn(){
      // 删除接口调用成功的时候,再调用这个方法
      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 = node
        this.resolve = resolve
        return 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 和 node
    handleNodeClick(data,node) {
      this.currentData = data
      this.currentNode = node
    },

    // 调用新增接口后,然后再初始化当前节点,而不是初始化整个tree
    add(){
      // 获取当前节点,key可以在@node-click和:load绑定函数的回调参数node用变量存储后有需要刷新的地方取node.key
      let node = this.$refs.tree.getNode(this.currentNode.key);
      //  设置未进行懒加载状态
      node.loaded = false;
      // 重新展开节点就会间接重新触发load达到刷新效果
      node.expand();
 
    }

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

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

相关文章

计算机网络-IPSec VPN工作原理

一、IPSec VPN工作原理 昨天我们大致了解了IPSec是什么&#xff0c;今天来学习下它的工作原理。 IPsec的基本工作流程如下&#xff1a; 通过IKE协商第一阶段协商出IKE SA。 使用IKE SA加密IKE协商第二阶段的报文&#xff0c;即IPsec SA。 使用IPsec SA加密数据。 IPsec基本工作…

国际荐酒师Peter助力第六届地博会,推动地理标志产品国际化发展

国际荐酒师Peter Lisicky助力第六届知交会暨地博会&#xff0c;推动地理标志产品国际化发展 第六届粤港澳大湾区知识产权交易博览会暨国际地理标志产品交易博览会于2024年12月9日至11日在中新广州知识城盛大举行&#xff0c;吸引了全球众多行业专家、企业代表及相关机构齐聚一…

Android显示系统(05)- OpenGL ES - Shader绘制三角形(使用glsl文件)

Android显示系统&#xff08;02&#xff09;- OpenGL ES - 概述 Android显示系统&#xff08;03&#xff09;- OpenGL ES - GLSurfaceView的使用 Android显示系统&#xff08;04&#xff09;- OpenGL ES - Shader绘制三角形 Android显示系统&#xff08;05&#xff09;- OpenGL…

【Golang】Go语言编程思想(六):Channel,第一节,介绍Channel

Channel 下面的几个例子将会展示如何定义一个 channel&#xff1a; func chanDemo() {var c chan int // chan int 的含义是, c 是一个 channel, 里面的内容是 int// 上面的声明语句将会创建一个 nil channel, c nil, 它的作用将在 select 当// 中体现 }创建一个非 nil 的 c…

怎么获取Java高并发经验与系统设计技能?

如何获得高并发经验&#xff1f; 这是系统邀请我回答的一个问题&#xff0c;由此也引发了我的一些思考&#xff1a;为什么人人都想要获得高并发经验&#xff1b;想拥有高并发系统设计技能&#xff1f; 其原因LZ认为主要有以下三点&#xff1a; 涨薪&#xff1a;有高并发系统设…

Spherical Harmonics (SH)球谐函数的原理及应用【3DGS】

Spherical Harmonics &#xff08;SH&#xff09;球谐函数的原理及应用【3DGS】 前言球谐函数&#xff08;Spherical Harmonics, SH&#xff09;球谐函数不同阶的表达式以及有什么不同&#xff1f;具体介绍球谐函数基函数球谐函数 前言 高斯泼溅Gaussian Splatting (GS) GS 模…

Java版-图论-拓扑排序与有向无环图

拓扑排序 拓扑排序说明 对一个有向无环图(Directed Acyclic Graph简称DAG)G进行拓扑排序,是将G中所有顶点排成一个线性序列,使得图中任意一对顶点u和v,若边<u,v>∈E(G),则u在线性序列中出现在v之前。通常,这样的线性序列称为满足拓扑次序(Topological Order)的序列…

如何在 Odoo18 视图中添加关联数据看板按钮 | 免费开源ERP实施诀窍

文 / 开源智造 Odoo亚太金牌服务 引言 关联数据看板按钮乃是 Odoo 当中的一项强效功能&#xff0c;它容许用户顺遂地访问相关记录&#xff0c;或者直接从模型的表单视图施行特定操作。它们为用户给予了对重要信息的疾速访问途径&#xff0c;并简化了工作流程&#xff0c;由此…

TCP客户端服务器端通信(线程池版)

1、什么是监听套接字&#xff0c;和UDP相比&#xff0c;TCP为什么文件描述符变多了&#xff1f; 在网络编程中&#xff0c;TCP和UDP是两种常见的传输协议&#xff0c;它们之间最大的不同之一在于连接的管理方式。为了更好地理解这个区别&#xff0c;我们可以用一个生动的比喻来…

【Linux】通过crond服务设置定时执行shell脚本,实际执行时间却延迟了8小时

一、问题描述 通过使用crond服务设置定时任务&#xff0c;在每天凌晨的2:00执行脚本&#xff0c;但检查结果时发现&#xff0c;实际执行时间却在上午10点。 检查shell脚本执行结果发现&#xff0c;实际执行脚本时间在上午10:00&#xff0c;延迟了8小时。 检查系统时间&#xf…

Git基础笔记

目录 1.Git 常用命令 2.Git 分支操作 3.远程仓库操作 Git 概述 Git 是一个免费的、开源的 分布式版本控制系统 &#xff0c;可以快速高效地处理从小型到大型的各种 项目 1.Git 常用命令 1.设置用户签名 git config --global user.name 用户名 2.设置用户签名 git config…

PADS系列:绘制RTL8306原理图的过程

大家好&#xff0c;我是山羊君Goat。 在所有相关的元件都被创建到了原理图库之后&#xff0c;就可以正式开始原理图的绘制了。不过绘制过程中也是会按照一定的顺序来进行的&#xff0c;这样可以达到事半功倍的效果。 首先就是主芯片的放置&#xff0c;这里有三个主芯片&#x…

GCP Case:MountKirk Games

游戏后端 根据游戏活动动态放大或缩小。 连接到托管的nos0l数据库服务。 运行定制的linux发行版。 游戏分析平台 根据游戏活动来扩大或缩小规模直接处理来自游戏服务器的传入数据。 处理由于移动网络缓慢而迟到的数据。 通过sql查询来访问至少10tb的历史数据 处理由用户…

OpenCV相机标定与3D重建(10)眼标定函数calibrateHandEye()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 计算手眼标定&#xff1a; g T c _{}^{g}\textrm{T}_c g​Tc​ cv::calibrateHandEye 是 OpenCV 中用于手眼标定的函数。该函数通过已知的机器人…

【CSS in Depth 2 精译_072】第 12 章 CSS 排版与间距概述 + 12.1 间距设置(上):究竟该用 em 还是 px

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第四部分 视觉增强技术 ✔️【第 12 章 CSS 排版与间距】 ✔️ 12.1 间距设置 ✔️ 12.1.1 使用 em 还是 px ✔️12.1.2 对行高的深入思考12.1.3 行内元素的间距设置 文章目录 第 12 章 排版与间距…

数据结构代码归纳

1.线性表 线性表的顺序表示 定义与初始化 typedef struct SqList{ElemType data[MaxSize];//ElemType *data 开动态数组 int length; }Sqlist; void InitList(SqList &L){L.length0;//若静态数组//若动态数组 //L.data(ElemType*)malloc(sizeof(ElemType)*MaxSize); }…

数据结构 (36)各种排序方法的综合比较

一、常见排序方法分类 插入排序类 直接插入排序&#xff1a;通过构建有序序列&#xff0c;对于未排序数据&#xff0c;在已排序序列中从后向前扫描&#xff0c;找到相应位置并插入。希尔排序&#xff1a;是插入排序的一种改进版本&#xff0c;先将整个待排序的记录序列分割成为…

SpringMVC全局异常处理

一、Java中的异常 定义&#xff1a;异常是程序在运行过程中出现的一些错误&#xff0c;使用面向对象思想把这些错误用类来描述&#xff0c;那么一旦产生一个错误&#xff0c;即创建某一个错误的对象&#xff0c;这个对象就是异常对象。 类型&#xff1a; 声明异常&#xff1…

【高中生讲机器学习】28. 集成学习之 Bagging 随机森林!

创建时间&#xff1a;2024-12-09 首发时间&#xff1a;2024-12-09 最后编辑时间&#xff1a;2024-12-09 作者&#xff1a;Geeker_LStar 嘿嘿&#xff0c;你好呀&#xff01;我又来啦~~ 前面我们讲完了集成学习之 Boooooosting&#xff0c;这篇我们来看看集成学习的另一个分支…

springSecurity权限控制

权限控制&#xff1a;不同的用户可以使用不同的功能。 我们不能在前端判断用户权限来控制显示哪些按钮&#xff0c;因为这样&#xff0c;有人会获取该功能对应的接口&#xff0c;就不需要通过前端&#xff0c;直接发送请求实现功能了。所以需要在后端进行权限判断。&#xff0…