首页 > 其他分享 >el-tree懒加载获取所有已经选的节点

el-tree懒加载获取所有已经选的节点

时间:2024-07-06 17:02:30浏览次数:11  
标签:node el const 勾选 tree id item 节点 加载

用于el-tree懒加载一个图层目录,勾选父级目录,需要得到该父级目录下所有叶子节点数据

              <el-tree
                :data="directoryDataLayer"
                show-checkbox
                node-key="id"
                :load="directoryDataLoad"
                lazy
                ref="dataLayersCom"
                :props="treeStructure"
                @check="dataTreeFun"
                :show-checkbox="true"
              >
                <span slot-scope="{node,data}" class="poup_tree_item">{{ data.name }}</span>
              </el-tree>
    dataTreeFun(nodeData) {
      let node = this.$refs.dataLayersCom.getNode(nodeData.id);

      if (node.checked && !node.expanded && !node.isLeaf) {
        // 如果节点已勾选且未展开,并且不是叶子节点,展开节点,并在展开后勾选所有子节点
        node.expand(async () => {
          await this.expandAndCheckChildren(node);
          this.updateLayers();
        });
      } else if (node.checked) {
        // 节点已勾选且已展开,直接勾选所有子节点
        this.expandAndCheckChildren(node).then(() => {
          this.updateLayers();
        });
      } else if (!node.checked) {
        // 节点未勾选,取消勾选所有子节点
        this.$refs.dataLayersCom.setChecked(node.data.id, false);
        this.updateLayers();
      }
    },
    async expandAndCheckChildren(node) {
      // 如果节点不是叶子节点且子节点未加载,则加载子节点
      if (!node.isLeaf && node.childNodes.length === 0) {
        await new Promise((resolve) => {
          node.expand(() => {
            resolve();
          });
        });
      }
      // 勾选所有子节点
      for (const child of node.childNodes) {
        this.$refs.dataLayersCom.setChecked(child.data.id, true);
        if (!child.isLeaf) {
          await this.expandAndCheckChildren(child);
        }
      }
    },
    // 获取所有勾选的节点
    updateLayers() {
      const checkedNodes = this.$refs.dataLayersCom.getCheckedNodes();
      const processedGood = checkedNodes.filter(item => item.tree_type === "data");
      const getKey = processedGood.map(item => item.id);
      const getDataArr = processedGood.reduce((acc, item) => {
        acc[item.id] = item;
        return acc;
      }, {})
      console.log(getKey, getDataArr)
    },

标签:node,el,const,勾选,tree,id,item,节点,加载
From: https://blog.csdn.net/weixin_53539322/article/details/140231383

相关文章

  • Calibrating Large Language Models Using Their Generations Only
    本文是LLM系列文章,针对《CalibratingLargeLanguageModelsUsingTheirGenerationsOnly》的翻译。仅使用它们的生成来校准大型语言模型摘要1引言2相关工作3方法4实验5讨论6结论摘要随着大型语言模型(LLM)越来越多地部署在面向用户的应用程序中,通过......
  • BADEDIT: BACKDOORING LARGE LANGUAGE MODELS BY MODEL EDITING
    本文是LLM系列文章,针对《BADEDIT:BACKDOORINGLARGELANGUAGEMODELSBYMODELEDITING》的翻译。BADEDIT:通过模型编辑后门攻击大型语言模型摘要1引言2背景和相关工作3后门攻击的轻量级编辑4BADEDIT5实验6结论摘要主流后门攻击方法通常需要大量的中......
  • 让我彻底沉迷的设计神器CorelDRAW2024中文版本发布啦!
    ......
  • Kubernetes——Helm(二)
    我们已经知道了如何将信息传到模板中。但是传入的信息并不能被修改。有时我们希望以一种更有用的方式来转换所提供的数据。一、函数初体验quote函数:把.Values对象中的字符串属性用引号引起来,然后放到模板中。apiVersion:v1kind:ConfigMapmetadata:name:{{.Rele......
  • OpenELM:开启开放训练和推理框架的高效语言模型家族
    随着大模型模型规模的增长,这些强大工具的透明度、可复现性和对数据偏见的敏感性也引起了人们的关注。这些问题不仅关系到研究的开放性和公平性,也关系到模型输出的可信度和安全性。为了应对这些挑战,Apple的研究团队发布了名为OpenELM的新一代开放语言模型。OpenELM采用了层级缩......
  • 编写 PowerShell 脚本来管理 Windows 防火墙可以帮助自动化配置和监控网络安全设置。
    编写PowerShell脚本来管理Windows防火墙可以帮助自动化配置和监控网络安全设置。以下是一个简单的大纲,涵盖了管理Windows防火墙的主要方面:1.导入模块和设置变量导入 NetSecurity 模块以访问防火墙cmdlet。设置需要使用的变量,如规则名称、端口号等。2.查询和列出......
  • 【C/C++ new/delete和malloc/free的异同及原理】
    new/delete和malloc/free都是用于在C++(以及C语言在malloc/free的情况下)中动态申请和释放内存的机制,但它们之间存在一些显著的异同点。以下是对这两组函数/运算符的异同点的详细分析:相同点目的相同:两者都用于在堆(heap)上动态地分配和释放内存。手动管理:无论是new/delete还是......
  • windows下,用PowerShell安装fnm,并安装Node.js步骤
    1#installsfnm(FastNodeManager)/安装fnm2wingetinstallSchniz.fnm3#重新开启powershell4#!不确定是否需要此步骤!5$profile6#!不确定是否需要此步骤!按照上面的输出,创建缺失的文件夹7#创建$profile文件:粘贴到powershell后,按回车8if(!(Test-P......
  • 一文理解 Treelite,Treelite 为决策树集成模型的部署和推理提供了高效、灵活的解决方案
    ......
  • CDR2024永久免激活版下载附带CorelDRAW软件序列号激活码
    在设计领域,CorelDRAW一直以其强大的功能和易用性受到设计师们的喜爱。而随着移动设备的普及,许多人都期待着能在安卓设备上也能使用这一软件。但是,众所周知,由于版权等问题,官方并没有直接推出安卓版。这就让许多用户开始寻找其他途径,比如破解版。1、在本站下载并解压,禁用网络连......