开发需求总结9-el-tree获取选中节点,节点全选时返回被全选子级的父节点,未全选则返回被选中的节点

目录

需求描述

代码实现:


需求描述


  需要获取树组件选中的节点,假如父节点被选中(该节点全选),即只返回父节点的数据,如父节点未被全选,则正常返回被选中节点的数据。
示例一:

如上图,一级2和下面的子节点都选中了,此时需要只获取到一级 2 这个节点的数据即可

示例二:

如上图,此时,除了二级 2-1 节点外,其余节点被选中,此时只需要获二级 2-2 、一级3 这两个节点的数据即可。
 

代码实现:

利用递归的方法,遍历所有的节点,判断其是否为全选状态,为全选状态时即拿到其数据

 说简单点就是需要实现3中情况:

1、如果选中父节点,子节点也全部选中,则只返回父节点的数据

2、如果选中父节点,子节点未被选中选中,则返回所有被选中的子节点数据

3、如果只选中了子节点,则指返回被选中的子节点数据

getSimpleCheckedNodeIds (originData) {
  // 定义数组
  const checkedNodeIds = []
  // 判断是否为全选,若为全选状态返回被选中的父节点数据,不为全选状态正常返回被选中的子节点的数据
     const isAllChecked = function (node) {
     const childNodes = node.root ? node.root.childNodes : node.childNodes
     childNodes.forEach(child => {
        if (child.checked) {
          checkedNodeIds.push(child.data)
        }
        if (child.indeterminate) {
          isAllChecked(child)
        }
      })
    }
    isAllChecked(originData)
    return checkedNodeIds
  }

调用方法:
这里需要把树组件实例上的store传入

let data = this.getSimpleCheckedNodeIds(this.$refs.tree.store)

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

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

相关文章

大众点评评论采集软件使用教程

导出字段: 店铺ID 评论ID 发布时间 人均消费 评分 详情链接 点赞数 浏览数 评论数 最后更新时间 发布平台 推荐 评论详情 原始评论 图片数 图片链接 用户等级 用户名称 用户头像 VIP 私

农业无人机行业分析:单年内作业量突破13亿亩次

面对我国18亿亩的耕地植保市场需求,未来我国植保无人机将依然保持快速发展态势,预计2022年我国植保无人机销量将增长至8万架。 植保无人机市场呈现爆发式增长,同时也吸引了不少企业进入,我们从2022年植保无人机企业网络热度榜中可…

Linux学习记录——사십일 高级IO(2)--- Select型服务器

文章目录 1、思路2、select接口3、实现1、准备工作2、实现等待多个fd3、辨别连接和简单处理读事件4、简单处理写、读事件 4、特点 1、思路 select就是多路转接IO。select能以某种形式,等待多个文件描述符,只要有哪个fd有数据就可以读取并全部返回。就绪…

服务异步通讯——springcloud

服务异步通讯——springcloud 文章目录 服务异步通讯——springcloud初始MQRabbitMQ快速入门单机部署1.1.下载镜像安装MQ SpringAMQPwork Queue 工作队列Fanout Exchange广播模式DirectExchange路由模式TopicExchange话题模式 消息转换器 初始MQ RabbitMQ快速入门 官网https:/…

手把手教你SWOT分析!建议收藏

最近,我一直为一件事情感到困扰。那家位于市中心的西点店生意越来越好,甚至已经开了两家分店,但是挣来的钱还不足够买房子。于是最近,我被这如火如荼的奶茶市场所吸引,想要利用已有的资源开一家奶茶店。但是我不确定这…

计算机视觉开发工程师怎么考?报考难度大吗?证书含金量高吗?

为进一步贯彻落实中共中央印发《关于深化人才发展体制机制改革的意见》和国务院印发《关于“十四五”数字经济发展规划》等有关工作的部署要求,深入实施人才强国战略和创新驱动发展战略,加强全国数字化人才队伍建设,持续推进人工智能专业人员…

JNPF低代码引擎到底是什么?

最近听说一款可以免费部署本地进行试用的低代码引擎,源码上支持100%源码,提供的功能和技术支持比较完善。借助这篇篇幅我们了解下JNPF到底是什么? JNPF开发平台是一款PaaS服务为核心的零代码开发平台,平台提供了多租户账号管理、主…

《TrollStore巨魔商店》TrollStore2安装使用教程支持IOS14.0-16.6.1

TrollStore(巨魔商店) 简单的说就相当于一个永久的免费证书,它可以给你的iPhone和iPad安装任何你想要安装的App软件,而且不需要越狱,不用担心证书签名过期的问题,不需要个人签名和企业签名。 支持的版本: TrollStore安装和使用教…

MIT 6s081 lab1:Xv6 and Unix utilities

Lab1: Xv6 and Unix utilities 作业网址:https://pdos.csail.mit.edu/6.828/2020/labs/util.html Boot xv6(easy) 下载,启动xv6系统 $ git clone git://g.csail.mit.edu/xv6-labs-2020 Cloning into xv6-labs-2020... ... $ cd xv6-labs-2020 $ git …

【dc-dc】世微AP5127平均电流型LED降压恒流驱动器 双色切换的LED灯驱动方案

这是一款双色切换的LED灯方案,12-50V 降压恒流,输出:6V 2.5A ​ 这是一款PWM工作模式 , 高效率、 外围简单、内置功率管,适用于 输入的 高 精度降压 LED 恒流驱动芯片。输出大功率可 达 25W,电流 2.5A。 可实现全亮/半亮功能切换…

Linux 设备树详解

1、概述 设备树( Device Tree)是一种描述硬件的数据结构,在操作系统( OS)引导 阶段进行设备初始化的时候,数据结构中的硬件信息被检测并传递给操作系统 最早诞生于 Open Firmware, Flattened De…

【MySQL】:DDL数据库定义与操作

🎥 屿小夏 : 个人主页 🔥个人专栏 : MySQL从入门到进阶 🌄 莫道桑榆晚,为霞尚满天! 文章目录 📑前言一. SQL的分类二. DDL数据库操作2.1 查询所有数据库2.2 查询当前数据库2.3 创建数…

测量鼠标DPI的三种方法,总有一种适合你

DPI(dots per inch)代表每英寸点数,是一种用于各种技术设备(包括打印机)的测量方法,但对于鼠标来说,指的是鼠标在桌面上移动1英寸的距离的同时,鼠标光标能够在屏幕上移动多少“点”。 许多游戏鼠标都有按钮,可以让你在玩游戏时动态切换DPI,但如果你不知道鼠标的DPI怎…

x-cmd pkg | duf - df 命令的现代化替代品

目录 简介用户首次快速实验指南技术特点竞品和相关作品进一步探索 简介 Duf (Disk Usage/Free Utility)是一个磁盘分析工具。其直观的输出和多样化的自定义选项,帮助用户更好地管理和优化存储资源。 用户首次快速实验指南 使用 x duf 即可自…

为什么大厂暴力裁员确很少有技术人敢举报?

最近几年大厂暴力裁员的事件太多了,但是确鲜有当事人出来举报,这个又是为什么呢?本文从中立的角度,来给大家来分析一下。 大厂会包装,将暴力裁员包装为KPI优化 KPI这个玩意,其实是蛮扯淡的,也…

重磅!30余所985高校全面取消博士统考!

2024年博士招生,又有“双一流”高校取消统考。 近日,各大高校正在陆续发布《2024年博士研究生招生简章》,其中南昌大学的博士招生方式引起了广泛关注。据悉,南昌大学将全面实行“申请—考核”制选拔方式,适用于直接攻…

【Linux】自定义shell

👑作者主页:@安 度 因 🏠学习社区:安度因 📖专栏链接:Linux 文章目录 获取命令行前置字段命令行输入解析命令行普通指令的执行子进程执行命令指令类型判断 && 内建命令总结 &&a

什么是OV证书?

OV证书是一种经过严格身份验证的SSL/TLS证书,相较于基础的域名验证(DV)证书,它的验证过程更为深入和全面。在颁发OV证书前,证书颁发机构(CA)不仅会验证申请者对域名的所有权,还会对企业或组织的身份进行严格的审查,包括…

京东年度数据报告-2023全年度饮料十大热门品牌销量(销额)榜单

2023年度,饮料市场的销售相较去年呈下滑状态。根据鲸参谋电商数据分析平台的相关数据显示,京东平台上饮料市场的年度销量约9100万,同比下滑约9%;销售额约53亿,同比下滑约3%。另外,天猫平台上饮料市场的年度…

上门按摩系统:科技与传统融合的新体验

在快节奏的现代生活中,人们越来越重视身心健康。传统的按摩方式虽然深受喜爱,却常因时间、地点的限制而无法满足需求。此时,上门按摩系统应运而生,将科技与传统的按摩技艺完美结合,为用户提供更便捷、个性化的服务。 上…