element ui的el-tree多选树(复选框)父子节点关联不关联的问题,选中当前节点,他的子节点和父节点是否被选中,非常详细

2023-11-19

element ui的el-tree多选树(复选框)父子节点关联不关联的问题,选中当前节点,他的子节点和父节点是否被选中,非常详细

属性check-strictly

官方文档提供属性check-strictly,在显示复选框的情况下,是否严格的遵循父子不互相关联的做法,默认为 false。
而此属性的意思是:
**默认false,父子关联。**有如下现象及问题:
1、当你通过函数设置勾选节点的时候,只要父节点被勾选子节点必会勾选上,即便设置勾选的list中无此子节点。
2、当你点击勾选复选框时候,若点击父节点,其下子节点全部统一跟随父节点变化;若点击子节点,子节点部分勾选时父节点处于半选状态,子节点全部勾选时父节点选中,子节点全部不勾选时父节点未选中。

设置true,严格的遵循父子不互相关联。
1、当你通过函数设置勾选节点的时候,严格通过设置勾选的list中有无此节点来断定是否勾选。
2、当你点击勾选复选框时候,无论点击的哪个节点只会改变当前节点的勾选状态,不存在半选状态。

系统的角色菜单控制的问题
问题来了,在系统的角色菜单控制的时候,需要满足以下条件:
1、当通过函数设置勾选节点的时候,需要严格通过设置勾选的list中有无此节点来断定是否勾选,即勾选父节点而不一定勾选全部子节点。
2、当点击勾选复选框时候,若点击父节点,其下子节点全部统一跟随父节点变化。
3、当点击勾选复选框时候,若点击子节点,子节点部分勾选时父节点处于半选状态,子节点全部勾选时父节点选中,子节点全部不勾选时父节点未选中。

1.要求父子之间严格不关联,选中当前节点,他的所有子节点都被选中
2.要求父子之间严格不关联,选中当前节点,他的所有父节点和子节点都被选中

需求思考:

一、check-strictly=false,行不通
按照需要满足的条件,明显靠近将check-strictly设置为false,于是从check-strictly=false父子互相关联的基础入手,需要解决的问题就是:
将尚未全部勾选的子节点对应的父节点改为半勾选状态,但是查找文档良久无果。
只有getHalfCheckedKeys和getHalfCheckedNodes,并没有设置成半勾选。

二、check-strictly=true,试一试
只能试一下将check-strictly设置为true,从check-strictly=true严格的遵循父子不互相关联入手,需要解决的问题就是:
1、当点击勾选复选框时候,若点击父节点,其下子节点全部统一跟随父节点变化。
2、当点击勾选复选框时候,若点击子节点,子节点部分勾选时父节点处于半选状态,子节点全部勾选时父节点选中,子节点全部不勾选时父节点未选中。
而在严格的父子不互相关联时,点击父子节点不会出现半选状态,也无法通过函数设置半选状态,无奈简化解决问题:
1、当点击勾选复选框时候,若状态为 选中 :
1.1、其所有 父节点 (父节点、父节点的父节点以此类推)全部统一跟随当前节点变化为 选中 。
1.2、其下 子节点 全部统一跟随父节点变化为 选中 。
2、当点击勾选复选框时候,若状态为 未选中 ,其下 子节点 全部统一跟随父节点变化为 未选中 。

解决代码:

1、el-tree标签属性

 <el-tree 
			 ref="tree"
			  :data="data"
			   :props="defaultProps" 
			   :show-checkbox="true"
			    node-key="id" 
			    highlight-current 
			    :expand-on-click-node="false"
			    :default-checked-keys="checkedId" 
			    :check-strictly="true" 
			    @check="nodeClick">
    </el-tree>

:data,是你要展示的数据
node-key:每个树节点用来作为唯一标识的属性,整棵树应该是唯一的。标识节点唯一的键值名称。
default-checked-keys = checkedId:对应el-tree多选树组件初始化时默认选中ID
check-strictly = true:是否严格的遵循父子不互相关联的做法
check:当复选框被点击的时候触发的方法
props:配置选项,具体看下图。配置数据库字段名与这几个属性一致
在这里插入图片描述
而根据后台的返回,针对:props=“defaultProps”,我的配置为:

defaultProps: {
  children: 'children',
  label: 'categoryName'
  disabled: this.isDisabled
}

其他属性:

  data() {
      return {
        data: [],
        checkedId:"",
        defaultProps: {
          children: 'children',
          label: 'categoryName'
        },
      };
    },

2、el-tree组件有变化时给多选树重新赋值

updated () {
 // 给多选树设置默认值
  this.$refs.tree.setCheckedKeys(this.checkedId)
},

checkedId为勾选节点的数组,不区分父子节点。

3、重点:复选框点击时的特殊处理

nodeClick (currentObj, treeStatus) {
        console.log(currentObj)
        console.log("=========")
        console.log(treeStatus)
        // 用于:父子节点严格互不关联时,父节点勾选变化时通知子节点同步变化,实现单向关联。
        let selected = treeStatus.checkedKeys.indexOf(currentObj.id) // -1未选中,>=0为选中

        console.log(selected)
        // 选中
        if (selected !== -1) {
             // 子节点只要被选中父节点就被选中(需要选中父节点时候调用此方法)
             //this.selectedParent(currentObj)
             // 统一处理子节点为相同的勾选状态
             this.uniteChildSame(currentObj, true)
        } else {
             // 未选中 处理子节点全部未选中
             if (currentObj.children.length !== 0) {
               this.uniteChildSame(currentObj, false)
             }
        }
      },

    // 统一处理子节点为相同的勾选状态
      uniteChildSame (treeList, isSelected) {
        console.log("aaaaaaaaaaaaa")
        console.log(treeList);
      this.$refs.tree.setChecked(treeList.id, isSelected)
      for (let i = 0; i < treeList.children.length; i++) {
        this.uniteChildSame(treeList.children[i], isSelected)
      }
    },
    // 统一处理父节点为选中
    selectedParent (currentObj) {
      let currentNode = this.$refs.tree.getNode(currentObj)
      if (currentNode.parent.key !== undefined) {
        this.$refs.tree.setChecked(currentNode.parent, true)
        this.selectedParent(currentNode.parent)
      }
    },

原文链接:https://blog.csdn.net/Beam007/article/details/87858291

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

element ui的el-tree多选树(复选框)父子节点关联不关联的问题,选中当前节点,他的子节点和父节点是否被选中,非常详细 的相关文章

随机推荐

  • 缺少nodejs环境,请在设置中配置nodejs的安装路径 - HBuilder - uniapp

    HBuilder运行uni app项目 点击 运行到 提示 缺少nodejs环境 请在设置中配置nodejs的安装路径 解决办法 找到工具 设置 运行配置 node运行配置 运行终端类型 选择 内置 外部 如果已经配置过 关闭编译器 重新打
  • Unity_如何使相机视角一直跟随角色移动

    实例代码如下 using System Collections using System Collections Generic using UnityEngine 相机视角跟踪 public class FollowTarget Mono
  • QHash & QMap 的顺序问题 (***)

    QT关联容器QMap QHash的Key值自动排序问题 对QMap中的key进行自定义排序 如何取消QMap自动排序 让QMap按照插入的顺序排列 通过插入顺序循环QHash QMap QHash插入后的显示顺序以及记录插入顺序的数据结构
  • OpenGL图形管线和坐标变换

    1 OpenGL 渲染管线 OpenGL渲染管线分为两大部分 模型观测变换 ModelView Transformation 和投影变换 Projection Transformation 做个比喻 计算机图形开发就像我们照相一样 目的就是
  • 最实用的chrome插件

    前言 说真的第一次看到CSDN这个插件的时候并没有感觉特别吸引我的地方 因为我个人安装了好多的插件 第二次看到CSDN插件还是因为广告上说的参赛拿奖 其实我的动机也不是很纯o o 插件地址 CSDN插件 走起 对于谷歌的插件安装方式很多 可
  • springboot——集成elasticsearch进行搜索并高亮关键词

    目录 1 elasticsearch概述 3 springboot集成elasticsearch 4 实现搜索并高亮关键词 1 elasticsearch概述 1 是什么 Elasticsearch 是位于 Elastic Stack 核心
  • C51单片机数码管动态显示

    数码管作为最廉价的输出设备 在各种自动化设备中有很大的应用 最简单普通的显示方式为动态刷新显示 称为假动态显示 即通过分时扫描每一位 利于人眼的视觉停留现象 造成一种静态显示的效果 如下图所示 C51单片机由于运行速度很慢 在高刷新频率下
  • ASCII与C简单数据类型

    ascII与简单数据类型 1 打印出所有ascII表中的字符 思路 ascII码值与阿拉伯数字0 127对应 故可以先将其以数字形式存在数组空间或内存空间中 然后用 c一个一个打印出来即可 本次采用数组进行存储 代码 include
  • 2013年8月11日星期日(7。15 色彩动画)

    距离上次封装有一个月了 PHYSX知道怎么弄朝向和位置了 我决定业余时间可以弄弄小游戏 这个例子是通过改变调色板ID来达到颜色的亮灭 这个肯定过时了 不过思路还是不错的 各个常量和结构体类型 define BLINKER ADD 0 add
  • 探索第三方 API 服务的身份验证方法:优点和缺点

    探索第三方 API 服务的身份验证方法 优点和缺点 赛斯 法特的相片 赛斯法特 2023 年 3 月 18 日 4分钟阅读 嗨 大家好 我们中的大多数人已经使用多个第三方 API 服务来实现您的业务逻辑 是的 他们中的大多数都有不同的身份验
  • mongodb安装(1)

    目录 一 mongodb安装 1mongodb介绍 2下载mongodb 3安装mongodb 4 启动mongodb 5 安装studio3t 一 mongodb安装 1mongodb介绍 2下载mongodb MongoDB 提供了可用
  • eclipse 环境配置第一个webapp的发布 及jsp代码的执行

    GBK 所有中文操作系统默认的编码 UTF 8 支持识别各个国家的字符 但这样 之前的代码如果用的是GBK编码 则会变成乱码 我们可以建一个新的工作区 新建一个文件夹 存放workspace 选择workspace位置后 等待重启 以后再建
  • 手把手教你进行APP数据埋点

    经过大半年的努力 产品终于开始趋向稳定 之前的版本一直在探索 需求经常改动 没时间系统进行埋点 随着产品的稳定以及工作的深入 越发认识到数据的重要性 所以开始着手数据埋点相关事项 这次亲历了产品 APP 从零开始进行数据埋点的过程 分享出来
  • 【数据分析与可视化】Seaborn库简介及风格设置详解(图文解释 超详细)

    需要源码和PPT请点赞关注收藏后评论区留言私信 一 Seaborn简介 Matplotlib绘图基本模仿MATLAB绘图库 其绘图风格和MATLAB类似 由于MATLAB绘图风格偏古典 因此 Python开源社区开发了Seaborn绘图模块
  • 神经网络权重是什么意思,神经网络权值和阈值

    BP神经网络中初始权值和阈值的设定 1 首先需要了解BP神经网络是一种多层前馈网络 2 以看一下在matlab中BP神经网络的训练函数 有梯度下降法traingd 弹性梯度下降法trainrp 自适应lr梯度下降法traingda等 3 在
  • 深度学习-算法的鲁棒性与稳定性解析

    文章与视频资源多平台更新 微信公众号 知乎 B站 头条 AI研习图书馆 深度学习 大数据 IT编程知识与资源分享 欢迎关注 共同进步 1 引言 鲁棒 的英文是robustness 中文译为强健 稳健 所以说算法的鲁棒性直白点说就是健壮的 稳
  • 【硬刚大数据之学习路线篇】2021年从零到大数据专家的学习指南(全面升级版)

    欢迎关注博客主页 https blog csdn net u013411339 本文由 王知无 原创 首发于 CSDN博客 本文首发CSDN论坛 未经过官方和本人允许 严禁转载 欢迎点赞 收藏 留言 欢迎留言交流 声明 本篇博客在我之前发表
  • Kong网关 入门安装与配置

    简介 Kong 是由Mashape公司开源的 基于Nginx的API gateway 特点 可扩展 支持分布式 模块化 功能 授权 日志 ip限制 限流 api 统计分析 存在商业插件Galileo等 也可自己研发 请求转化 跨域 CORS
  • java.lang.StringIndexOutOfBoundsException: String index out of range: 22

    报错 in thread main java lang StringIndexOutOfBoundsException String index out of range 22 原因 for int i 0 i lt 255 i 输入的字符
  • element ui的el-tree多选树(复选框)父子节点关联不关联的问题,选中当前节点,他的子节点和父节点是否被选中,非常详细

    element ui的el tree多选树 复选框 父子节点关联不关联的问题 选中当前节点 他的子节点和父节点是否被选中 非常详细 属性check strictly 官方文档提供属性check strictly 在显示复选框的情况下 是否严