开发需求总结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.childNodeschildNodes.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)

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何使用Lychee结合内网穿透搭建私人图床网站并发布至公网远程访问

文章目录 1.前言2. Lychee网站搭建2.1. Lychee下载和安装2.2 Lychee网页测试2.3 cpolar的安装和注册 3.本地网页发布3.1 Cpolar云端设置3.2 Cpolar本地设置 4.公网访问测试5.结语 1.前言 图床作为图片集中存放的服务网站,可以看做是云存储的一部分,既可…

企业网站建站源码系统:Thinkphp5内核企业网站建站模板源码 带完整的安装代码包以及搭建教程

随着互联网的快速发展,企业对于网站的需求日益增强。为了满足这一市场需求,小编给大家分享一款基于Thinkphp5内核的企业网站建站源码系统。该系统旨在为企业提供一套功能强大、易于使用的网站建设解决方案,帮助企业快速搭建自己的官方网站&am…

搜索引擎优化:利用Python爬虫实现排名提升

什么是搜索引擎优化(SEO) 搜索引擎优化(SEO)是通过优化网站内容和结构,提高网站在搜索引擎中的排名,从而增加网站流量和曝光度的技术和方法。SEO的目标是使网站在搜索引擎结果页面中获得更高这个过程包括吸…

Python数据分析案例32——财经新闻爬虫和可视化分析

案例背景 很多同学的课程作业都是需要自己爬虫数据然后进行分析,这里提供一个财经新闻的爬虫案例供学习。本案例的全部数据和代码获取可以参考:财经新闻数据 数据来源 新浪财经的新闻网,说实话,他这个网站做成这样就是用来爬虫的…

Android Text View 去掉默认的padding的实现方法

先看下最终实现效果,满意您在往下看: TextView 绘制的时候自带一定的Padding值,要想实现去掉默认的padding值,xml文件可以设置一个属性值 : android:includeFontPadding"false" 然后运行起来就会发现&…

机器人强化学习-双机械臂

概要 基于 robosuite 库,进行双臂机器人学习训练 环境测试 下面展示下分别控制两个机械手随机运动的画面: 双臂显示场景如下:双臂调用代码如下: import numpy as np import robosuite as suite import robomimic import rob…

周五~~~摸鱼

学习也能很快乐哦~~! vim /etc/motd 修改这个文件可以让你刚登录linux 系统显示图形效果 佛祖 效果: 自行车 效果: love \ ------------ / ------ \ \ …

thinkphp+mysql+vue大学新生入学报到交流平台t49m6

运行环境:phpstudy/wamp/xammp等 开发语言:php 后端框架:Thinkphp5 前端框架:vue.js 服务器:apache 数据库:mysql 数据库工具:Navicat/phpmyadmin 本系统尝试使用thinkphp框架在网上架构一个动态的大学新生…

龙哥的问题(积性函数,莫比乌斯反演)

题目路径: 221. 龙哥的问题 - AcWing题库 思路:

【EI会议征稿通知】2024年通信技术与软件工程国际学术会议 (CTSE 2024)

2024年通信技术与软件工程国际学术会议 (CTSE 2024) 2024 International Conference on Communication Technology and Software Engineering (CTSE 2024) 2024年通信技术与软件工程国际学术会议 (CTSE 2024)将于2024年03月15-17日在中国长沙举行。会议专注于通信技术与软件工…

ARM day5、day6 硬件编程

一、硬件 fs4412 sd卡 串口线 电源 二、根据原理图点灯 1、确定需求: 点灯(亮 or 灭) 2、查看原理图 2.1 外设原理图 devboard 查找LED2->CHG_COK(核心板) 2.2 核心板原理图 coreboard 查找CHG_COK->XEINT23/KP_ROW7/ALV_DBG…

【笔记】《AI中文版》V3 第 1 章 概述

参考链接: 开源内容:https://github.com/siyuxin/AI-3rd-edition-notes 英文版 V2: https://terrorgum.com/tfox/books/artificialintelligenceinthe21stcentury.pdf 没找到 V3 笔记 作为计算机科学的一个分支,人工智能主要研究…