解决element ui中的el-tree组件default-checked-keys默认勾选节点问题

news/2024/4/28 23:34:13/文章来源:https://blog.csdn.net/qq_53876295/article/details/137117911

解决element ui中的el-tree组件default-checked-keys默认勾选节点问题

  • 需求
    • 解决方法
      • 方法1
      • 方法2

需求

选中子节点的时候,父节点必须被选中,但是仅展示被选中父节点和子节点

解决方法

方法1

html部分代码:

 <el-treeclass="filter-tree"node-key="enCode":data="areaTree":props="defaultProps":default-checked-keys="defaultChecked":expand-on-click-node="false"show-checkboxdefault-expand-allref="areaTrees">
</el-tree>

当需要动态改变树形结构的默认勾选值(例如每条数据都需要调接口查询,根据查询结果渲染树的选中情况)时,只修改defaultChecked的时,值的改变没有渲染相应的树节点,需要通过调用setCheckedKeys方法来改变选中状态:

js代码:

this.$nextTick(() => {this.$refs.areaTrees.setCheckedKeys(this.defaultChecked);
})

方法2

结合tree的ref属性

<el-tree:data="data"show-checkboxnode-key="id"ref="tree":props="defaultProps">
</el-tree>

js代码:

this.$refs.tree.getCheckedNodes(false, true);

通过getCheckedNodes获取所有选中节点

编辑处理

<el-tree:data="data"show-checkboxnode-key="id"ref="tree":default-checked-keys="defaultKeys":check-strictly="true":props="defaultProps">
</el-tree>

最初准备使用default-checked-keys属性,但是并非预期的效果,因为如果defaultKeys包含父节点,那么它所属的子节点都会被选中,即使你新增的时候没有选中其中的某个子节点。
找了找属性,看到了check-strictly,其描述为"在显示复选框的情况下,是否严格的遵循父子不互相关联的做法,默认为 false",试了一下,展示效果没有问题,但是选中子类的时候,父类不会被选中,选中父类的时候,子类也不会被勾选,等于完全不在关联,也不是想要的效果。

最终处理

 this.$refs.tree.setChecked(key/data, checked, deep);

已选中的key循环使用setChecked处理,具体参数描述如下

(key/data, checked, deep) 接收三个参数,1. 勾选节点的 key 或者 data 2. boolean 类型,节点是否选中 3. boolean 类型,是否设置子节点 ,默认为 false

其中有用的是第三个参数,不再对子节点进行设置,这样即保持了新增时候的选中效果,又可以点击父节点对子节点进行全部选中或者全部取消的效果。

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

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

相关文章

uniapp h5 touch事件踩坑记录

场景&#xff1a;悬浮球功能 当我给悬浮球设置了 position: fixed; 然后监听悬浮球的touch事件&#xff0c;从事件对象中拿到clientY和clientX赋值给悬浮球的left和top属性。当直接赋值后效果应该是这样子&#xff1a; 注意鼠标相对悬浮球的位置&#xff0c;应该就是左上角&a…

在 Windows 11 上安装 MongoDB

MongoDB 是一个流行的 NoSQL 数据库&#xff0c;它提供了灵活的数据存储方案&#xff0c;而 MongoDB Compass 则是一个可视化管理工具&#xff0c;可以更轻松地与 MongoDB 数据库交互和管理。在本文中&#xff0c;我们将介绍如何在 Windows 11 上安装 MongoDB&#xff0c;并配置…

Radio Silence for mac 好用的防火墙软件

Radio Silence for Mac是一款功能强大的网络防火墙软件&#xff0c;专为Mac用户设计&#xff0c;旨在保护用户的隐私和网络安全。它具备实时网络监视和控制功能&#xff0c;可以精确显示每个网络连接的状态&#xff0c;让用户轻松掌握网络活动情况。 软件下载&#xff1a;Radio…

B2902A是德科技B2902A精密型电源

181/2461/8938产品概述&#xff1a; Agilent B2902A 精密源/测量单元 (SMU) 是一款 2 通道、紧凑且经济高效的台式 SMU&#xff0c;能够源和测量电压和电流。它用途广泛&#xff0c;可以轻松、高精度地执行 I/V&#xff08;电流与电压&#xff09;测量。4 象限源和测量功能的集…

基于SpringCloud+Hadoop+Vue实现的企业级网盘系统实现

编程语言&#xff1a;Java、Mybatis、Spring、SpringBoot、SpringCloud、Node、Vue 开发环境&#xff1a;Windows 10 Mysql 开发工具&#xff1a;WebStorm、IDEA编译器、Git、Maven 应用部署服务器&#xff1a;SpringBoot内置Tomcat插件 Node服务器&#xff1a;Node v10.1…

低功耗、低成本 NAS/公共文件夹 的可能性

使用现状&#xff1a;多台工作电脑&#xff0c;家里人手一台&#xff0c;还在两个住处 有好几台工作电脑&#xff0c;不同电脑不同OS有不同的用途&#xff0c;最大的问题就是各个电脑上文件的同步问题&#xff0c;这里当然就需要局域网里的公共文件夹&#xff0c;在NAS的问题上…

002-基于Pytorch的手写汉字数字分类

本节将介绍一种 2.1 准备 2.1.1 数据集 &#xff08;1&#xff09;MNIST 只要学习过深度学习相关理论的人&#xff0c;都一定听说过名字叫做LeNet-5模型&#xff0c;它是深度学习三巨头只有Yann Lecun在1998年提出的一个CNN模型&#xff08;很多人认为这是第一个具有实际应用…

Qlib-Server:量化库数据服务器

Qlib-Server:量化库数据服务器 介绍 Qlib-Server 是 Qlib 的配套服务器系统,它利用 Qlib 进行基本计算,并提供广泛的服务器系统和缓存机制。通过 Qlib-Server,可以以集中的方式管理 Qlib 提供的数据。 框架 Qlib 的客户端/服务器框架基于 WebSocket 构建,这是因为 WebS…

学点儿Java_Day10_集合框架(List、Set、HashMap)

1 简介 ArrayList: 有序(放进去顺序和拿出来顺序一致)&#xff0c;可重复 HashSet: 无序(放进去顺序和拿出来顺序不一定一致)&#xff0c;不可重复 Testpublic void test1() {String[] array new String[3];//List: 有序 可重复//有序: 放入顺序 与 拿出顺序一致&#xff0c;…

【NLP笔记】大模型prompt推理(提问)技巧

文章目录 prompt概述推理&#xff08;提问&#xff09;技巧基础prompt构造技巧进阶优化技巧prompt自动优化 参考链接&#xff1a; Pre-train, Prompt, and Predict: A Systematic Survey of Prompting Methods in Natural Language Processing预训练、提示和预测&#xff1a;NL…

【并发】第二篇 ThreadLocal详解

导航 一. ThreadLocal 简介二. ThreadLocal 源码解析1. get2. set3 .remove4. initialValue三. ThreadLocalMap 源码分析1. 构造方法2. getEntry()3. set()4. resize()5. expungeStaleEntries()6. cleanSomeSlots()7. nextIndex()8. remove()9. 总结ThreadLocalMap四. 内存泄漏…

HarmonyOS 应用开发之显式Want与隐式Want匹配规则

在启动目标应用组件时&#xff0c;会通过显式 Want 或者隐式 Want 进行目标应用组件的匹配&#xff0c;这里说的匹配规则就是调用方传入的 want 参数中设置的参数如何与目标应用组件声明的配置文件进行匹配。 显式Want匹配原理 显式 Want 匹配原理如下表所示。 名称类型匹配…

NanoMQ的安装与部署

本文使用docker进行安装&#xff0c;因此安装之前需要已经安装了docker 拉取镜像 docker pull emqx/nanomq:latest 相关配置及密码认证 创建目录/usr/local/nanomq/conf以及配置文件nanomq.conf、pwd.conf # # # # MQTT Broker # # mqtt {property_size 32max_packet_siz…

使用苹果应用商店上架工具实现应用快速审核与发布

摘要 移动应用app上架是开发者关注的重要环节&#xff0c;但常常会面临审核不通过等问题。为帮助开发者顺利完成上架工作&#xff0c;各种辅助工具应运而生。本文探讨移动应用app上架原理、常见辅助工具功能及其作用&#xff0c;最终指出合理使用工具的重要性。 引言 移动应…

第4章.精通标准提示,引领ChatGPT精准输出

标准提示 标准提示&#xff0c;是引导ChatGPT输出的一个简单方法&#xff0c;它提供了一个具体的任务让模型完成。 如果你要生成一篇新闻摘要。你只要发送指示词&#xff1a;汇总这篇新闻 : …… 提示公式&#xff1a;生成[任务] 生成新闻文章的摘要&#xff1a; 任务&#x…

Stable Diffusion WebUI 生成参数:脚本(Script)——提示词矩阵、从文本框或文件载入提示词、X/Y/Z图表

本文收录于《AI绘画从入门到精通》专栏,专栏总目录:点这里,订阅后可阅读专栏内所有文章。 大家好,我是水滴~~ 在本篇文章中,我们将深入探讨 Stable Diffusion WebUI 的另一个引人注目的生成参数——脚本(Script)。我们将逐一细说提示词矩阵、从文本框或文件导入提示词,…

跑腿小程序|基于微信小程序的跑腿平台小程序设计与实现(源码+数据库+文档)

跑腿平台小程序目录 目录 基于微信小程序的跑腿平台小程序设计与实现 一、前言 二、系统设计 三、系统功能设计 1、用户信息管理 2、跑腿任务管理 3、任务类型管理 4、公告信息管理 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、…

如何安全地添加液氮到液氮罐中

液氮是一种极低温的液体&#xff0c;它在许多领域广泛应用&#xff0c;但在处理液氮时需谨慎小心。添加液氮到液氮罐中是一个常见的操作&#xff0c;需要遵循一些安全准则以确保操作人员的安全和设备的完整性。 选择合适的液氮容器 选用专业设计用于存储液氮的容器至关重要。…

SnapGene 5 for Mac 分子生物学软件

SnapGene 5 for Mac是一款专为Mac操作系统设计的分子生物学软件&#xff0c;以其强大的功能和用户友好的界面&#xff0c;为科研人员提供了高效、便捷的基因克隆和分子实验设计体验。 软件下载&#xff1a;SnapGene 5 for Mac v5.3.1中文激活版 这款软件支持DNA构建和克隆设计&…

线性代数 - 应该学啥 以及哪些可以交给计算机

AI很热&#xff0c;所以小伙伴们不免要温故知新旧时噩梦 - 线代。 &#xff08;十几年前&#xff0c;还有一个逼着大家梦回课堂的风口&#xff0c;图形学。&#xff09; 这个真的不是什么美好的回忆&#xff0c;且不说老师的口音&#xff0c;也不说教材的云山雾绕&#xff0c;单…