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

 一、懒加载的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();
 
    }

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

宝塔内设置redis后,项目以及RedisDesktopManager客户端连接不上!

项目展现问题&#xff1a; Unable to connect to Redis; nested exception is io.lettuce.core.RedisConnectionException: Unable to connect to xxx.宝塔外链.ip.xxxx:6379 redis客户端连接失败&#xff1a; 1、宝塔中确认redis端口已放行 2、修改redis的配置 bind&#x…

使用 WebRtcStreamer 实现实时视频流播放

WebRtcStreamer 是一个基于 WebRTC 协议的轻量级开源工具&#xff0c;可以在浏览器中直接播放 RTSP 视频流。它利用 WebRTC 的强大功能&#xff0c;提供低延迟的视频流播放体验&#xff0c;非常适合实时监控和其他视频流应用场景。 本文将介绍如何在Vue.js项目中使用 WebRtcSt…

本地无需公网可访问开源趣味艺术画板 paint-board

paint-board 一款用于绘画或涂鸦的工具&#xff0c;它非常轻量而且很有趣&#xff0c;集成了多种创意画笔和绘画功能&#xff0c;能够支持形状绘制、橡皮擦、自定义画板等操作&#xff0c;并可以将作品保存为图片。 第一步&#xff0c;本地部署安装 paint-board 1&#xff0c…

VideoConvertor.java ffmpeg.exe

VideoConvertor.java ffmpeg.exe 视频剪切原理 入点 和 出点 选中时间点&#xff0c;导出

ASP .NET Core 中的环境变量

在本文中&#xff0c;我们将通过组织一场小型音乐会&#xff08;当然是在代码中&#xff09;来了解 ASP .NET Core 中的环境变量。让我们从创建项目开始&#xff1a; dotnet new web --name Concert 并更新Program.cs&#xff1a; // replace this: app.MapGet("/"…

Robust Depth Enhancement via Polarization Prompt Fusion Tuning

paper&#xff1a;论文地址 code&#xff1a;github项目地址 今天给大家分享一篇2024CVPR上的文章&#xff0c;文章是用偏振做提示学习&#xff0c;做深度估计的。模型架构图如下 这篇博客不是讲这篇论文的内容&#xff0c;感兴趣的自己去看paper&#xff0c;主要是分享环境&…

NanoLog起步笔记-3-尝试解析log

nonolog起步笔记-3-尝试解析log 第一次解析sample中的nano二进制log在哪里compressedLog./decompressor decompress /tmp/logFile compressedLog是什么鬼下断分析 第一次解析 sample中的nano二进制log在哪里 如下图 手工执行的结果如下&#xff0c;不看代码&#xff0c;还真不…

Sqoop脚本编写(Mysql---->>hdfs)

目录 语法手册编写方式脚本文件类型文件编写.jar路径指定 执行效果执行方式效果 语法手册 参考博客 编写方式 脚本文件类型 只要是可读的文件即可&#xff08;.txt或者.sh等其他类型&#xff0c;不带文件后缀也可以&#xff0c;但二进制文件最好不要&#xff09; 文件编写…

一、测试工具LoadRunner Professional脚本编写-录制前设置

设置基于URL的脚本 原因:基于HTML的脚本会导致login接口不能正确录制 设置UTF-8 原因:不勾选此项会导致脚本中文变为乱码

day05-开发接口-学习记录和学习计划

1. 查询用户的课程学习记录 1.1 代码实现 Controller层&#xff1a; package com.tianji.learning.controller;import com.tianji.api.dto.leanring.LearningLessonDTO; import com.tianji.learning.service.ILearningLessonService; import com.tianji.learning.service.IL…

2022 年“泰迪杯”数据分析技能赛A 题竞赛作品的自动评判

2022 年“泰迪杯”数据分析技能赛A 题竞赛作品的自动评判 完整代码请私聊 博主 一、背景 在各类学科竞赛中&#xff0c;常常要求参赛者提交 Excel 或/和 PDF 格式的竞赛作品。 本赛题以某届数据分析竞赛作品的评阅为背景&#xff0c;要求参赛者根据给定的评分准则和标准答案&a…

AI Agent框架如何选择?LangGraph vs CrewAI vs OpenAI Swarm

介绍 由 LLMs经历了起起落落。从 2023 年 AutoGPT 和 BabyAGI 的病毒式演示到今天更精致的框架&#xff0c;AI Agent的概念——LLMs自主执行端到端任务的 LLM——既引起了人们的想象力&#xff0c;也引起了怀疑。 为什么重新引起人们的兴趣&#xff1f;LLMs 在过去 9 个月中进…

【OpenCV】平滑图像

二维卷积(图像滤波) 与一维信号一样&#xff0c;图像也可以通过各种低通滤波器&#xff08;LPF&#xff09;、高通滤波器&#xff08;HPF&#xff09;等进行过滤。LPF 有助于消除噪音、模糊图像等。HPF 滤波器有助于在图像中找到边缘。 opencv 提供了函数 **cv.filter2D()**&…

调试android 指纹遇到的坑

Android8以后版本 一、指纹服务不能自动 指纹服务fingerprintd(biometrics fingerprintservice)&#xff0c;可以手动起来&#xff0c;但是在init.rc中无法启动。 解决办法&#xff1a; 1.抓取开机时kernel log &#xff0c;确认我们的启动指纹服务的init.rc 文件有被init.c…

深度学习笔记之BERT(五)TinyBERT

深度学习笔记之TinyBERT 引言回顾&#xff1a;DistilBERT模型TinyBERT模型结构TinyBERT模型策略Transformer层蒸馏嵌入层蒸馏预测层蒸馏 TinyBERT模型的训练效果展示 引言 上一节介绍了 DistilBERT \text{DistilBERT} DistilBERT模型&#xff0c;本节将继续介绍优化性更强的知…

30.串联所有单词的子串 python

串联所有单词的子串 题目题目描述示例 1&#xff1a;示例 2&#xff1a;示例 3&#xff1a;提示&#xff1a;题目链接 题解解题思路python实现代码解释&#xff1a;提交结果 题目 题目描述 给定一个字符串 s 和一个字符串数组 words。 words 中所有字符串 长度相同。 s 中的…

【LeetCode】498.对角线遍历

无论何时何地&#xff0c;我都认为对于一道编程题&#xff0c;思考解法的时间用于是实际动手解决问题的2倍&#xff01;如果敲键盘编码需要5min&#xff0c;那么思考解法的过程至少就需要10分钟。 1. 题目 2. 思想 其实这就是一道模拟题&#xff0c;难度中等。做这种题的关键就…

uniapp中父组件传参到子组件页面渲染不生效问题处理实战记录

上篇文件介绍了,父组件数据更新正常但是页面渲染不生效的问题,详情可以看下:uniapp中父组件数组更新后与页面渲染数组不一致实战记录 本文在此基础上由于新增需求衍生出新的问题.本文只记录一下解决思路. 下面说下新增需求方便理解场景: 商品信息设置中添加抽奖概率设置…

Flutter提示错误:无效的源发行版17

错误描述 Flutter从3.10.1 升级到3.19.4&#xff0c;在3.10.1的时候一切运行正常&#xff0c;但是当我将Flutter版本升级到3.19.4后&#xff0c;出现了下方的错误 FAILURE: Build failed with an exception.* What went wrong: Execution failed for task :device_info_plus:…

etcd的dbsize引起的集群故障

故障现象 k8s集群不能访问&#xff0c;具体表现kubectl命令不能使用。 思路 检查apiserver服务状态&#xff0c;检查etcd集群状态中errors列中存在一个alarm:NOSPACE的告警 解决&分析 具体表现 恢复使用第一&#xff0c;先尝试解除告警看能否恢复 etcdctl --endpoin…