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

解决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.mzph.cn/news/777852.shtml

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

相关文章

【I.MX6ULL移植】Ubuntu-base根文件系统移植

1.下载Ubuntu16.04根文件系统 http://cdimage.ubuntu.com/ 1 2 3 4 5 2.解压ubuntu base 根文件系统 为了存放 ubuntu base 根文件系统&#xff0c;先在 PC 的 Ubuntu 系统中的 nfs 目录下创建一个名为 ubuntu_rootfs 的目录&#xff0c;命令如下&#xff1a; 【注意&…

基于单片机病房呼叫系统数码管显示房号设计

**单片机设计介绍&#xff0c;基于单片机病房呼叫系统数码管显示房号设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机病房呼叫系统数码管显示房号设计概要主要涵盖了利用单片机技术实现病房呼叫系统&#xff0c;并…

mac上查看以及修改DNS配置

前言 特殊场景下&#xff0c;我们可能需要本机上的DNS配置 操作步骤 查看 mac上的 已有的dns配置# 如果你使用的是以太网连接&#xff0c;将命令中的 "Wi-Fi" 替换为 "Ethernet"。 networksetup -getdnsservers Wi-Fi修改DNS配置# DNS_SERVER_IP_ADDRES…

WPF 多路绑定、值转换器ValueConvert、数据校验

值转换器 valueconvert 使用ValueConverter需要实现IValueConverter接口&#xff0c;其内部有两个方法&#xff0c;Convert和ConvertBack。我们在使用Binding绑定数据的时候&#xff0c;当遇到源属性和目标控件需要的类型不一致的&#xff0c;就可以使用ValueConverter&#xf…

GT收发器第一篇_总体结构介绍

文章目录 前言GT收发器介绍 前言 之前写过一篇简单介绍GT的文章https://blog.csdn.net/m0_56222647/article/details/136730026&#xff0c;可以先通过这篇文章对整体进行简单了解一下。 GT收发器介绍 参考xilinx手册ug476 对于7系列的FPGA&#xff0c;共有3个系列&#xf…

【MATLAB源码-第19期】matlab基于导频的OFDM系统瑞利信道rayleigh的信道估计仿真,输出估计与未估计误码率对比图。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 正交频分复用&#xff08;英语&#xff1a;Orthogonal frequency-division multiplexing, OFDM&#xff09;有时又称为分离复频调制技术&#xff08;英语&#xff1a;discrete multitone modulation, DMT&#xff09;&#x…

数据仓库——事务、快照和累积快照事实表

事务、快照和累积快照 事务事实表跟踪定义业务过程的个体行为&#xff0c;并且支持几种描述这种行为事实。可以提供丰富的分析型能力&#xff0c;时常充当原子数据的粒度化仓库快照事实表周期性地采样状态度量&#xff0c;这些度量与一系列事务的累积效果相当&#xff0c;但是…

Android和IOS应用开发-Flutter应用让屏幕在 app 运行期间保持常亮的方法

文章目录 Flutter应用让屏幕在 app 运行期间保持常亮的方法方法一&#xff1a;使用系统插件方法二&#xff1a;使用 Widgets注意事项 Flutter应用让屏幕在 app 运行期间保持常亮的方法 在 Flutter 开发中&#xff0c;可以使用以下两种方法让屏幕在 app 运行期间保持常亮&#…

【数据库监控系列】Prometheus+Alertmanager+Grafana容器化部署

【数据库监控系列】PrometheusAlertmanagerGrafana容器化部署 快速安装docker环境被监控端部署exporter配置Redis exporter配置MySQL exporter 部署Prometheus和GrafanaPrometheus配置文件Alertmanager配置文件rule_files告警规则文件docker-compose部署文件常见报错信息 配置G…

【MySQL】6.MySQL主从复制和读写分离

主从复制 主从复制与读写分离 通常数据库的读/写都在同一个数据库服务器中进行&#xff1b; 但这样在安全性、高可用性和高并发等各个方面无法满足生产环境的实际需求&#xff1b; 因此&#xff0c;通过主从复制的方式同步数据&#xff0c;再通过读写分离提升数据库的并发负载…

Rabbitmq消息堆积的问题以及解决方案

1.消息堆积的原因&#xff1a; 短时间内出现了大量的数据涌入 消费速度慢 2.解决方案 2.1 预防措施&#xff1a; 生产者&#xff1a; 减少发布频率&#xff0c;考虑使用队列最大长度限制&#xff0c;尽可能保证消息都可以被接收。 消费者&#xff1a; 增加消费者的处理能力…

八大技术趋势案例(区块链量子计算)

科技巨变,未来已来,八大技术趋势引领数字化时代。信息技术的迅猛发展,深刻改变了我们的生活、工作和生产方式。人工智能、物联网、云计算、大数据、虚拟现实、增强现实、区块链、量子计算等新兴技术在各行各业得到广泛应用,为各个领域带来了新的活力和变革。 为了更好地了解…

百度智能云千帆,产业创新新引擎

本文整理自 3 月 21 日百度副总裁谢广军的主题演讲《百度智能云千帆&#xff0c;产业创新新引擎》。 各位领导、来宾、媒体朋友们&#xff0c;大家上午好。很高兴今天在石景山首钢园&#xff0c;和大家一起沟通和探讨大模型的发展趋势&#xff0c;以及百度最近一段时间的思考和…

halcon目标检测标注保存

* 创建一个新的字典 create_dict(ObjectDictionary) * 类别名称列表和对应的ID列表 class_names : [Defect1,Defect2,Defect3,Defect4,Defect5,Defect6,Defect7,Defect8,Defect9,Defect10,Defect11,Defect12,Defect13,Defect14,Defect15,Defect16,Defect17,Defect18] class_id…

jmockit-01-test 之 jmockit 入门使用案例

拓展阅读 jmockit-01-jmockit 入门使用案例 jmockit-02-概览 jmockit-03-Mocking 模拟 jmockit-04-Faking 伪造 jmockit-05-代码覆盖率 mockito-01-入门介绍 mockito-02-springaop 整合遇到的问题&#xff0c;失效 jmockit 说明 jmockit 可以提供基于 mock 的测试能力…

移动端开发思考:Uniapp的上位替代选择

文章目录 前言跨平台开发技术需求技术选型uniappFlutterMAUIAvalonia安卓原生 Flutter开发尝试Avalonia开发测试测试项目新建项目代码MainViewMainViewModel 发布/存档 MAUI实战&#xff0c;简单略过打包和Avalonia差不多 总结 前言 作为C# .NET程序员&#xff0c;我有一些移动…

前端基础复习--HTML篇

html: html文件根标签 head&#xff1a;编写页面相关的属性 title&#xff1a;页面标题 body&#xff1a;页面内容展示信息 标题标签&#xff1a;h1 - h6&#xff0c;数字越大&#xff0c;字体越小 &#xff0c;例如&#xff1a; <h1>hello</h1> p标签&#x…

|行业洞察·手机|《2024手机行业及营销趋势报告-18页》

报告的主要内容解读&#xff1a; 手机行业概述及品牌分布&#xff1a; 2022年&#xff0c;受疫情影响&#xff0c;中国国内手机市场出货量下降22.6%&#xff0c;总计2.72亿部。5G手机市场占有率中&#xff0c;苹果领先&#xff0c;其次是vivo、OPPO和华为。消费者换机时更注重性…

【python分析实战】成本:揭示电商平台月度开支与成本结构占比 - 过于详细 【收藏】

重点关注本文思路&#xff0c;用python分析&#xff0c;方便大家实验复现&#xff0c;代码每次都用全量的&#xff0c;其他工具自行选择。 全文3000字&#xff0c;阅读10min&#xff0c;操作1小时 企业案例实战欢迎关注专栏 每日更新&#xff1a;https://blog.csdn.net/cciehl/…

[git]Git 撤销与 回滚操作

[git]Git 撤销与 回滚操作 开发过程中&#xff0c;你肯定会遇到这样的场景&#xff1a; 场景一&#xff1a; 糟了&#xff0c;我刚把不想要的代码&#xff0c;commit到本地仓库中了&#xff0c;但是还没有做push操作&#xff01; 场景二&#xff1a; 彻底完了&#xff0c;刚线…