【elementui】记录解决el-tree开启show-checkbox后,勾选一个叶结点后会自动折叠的现象

第一种解决方案:设置default-expand-keys的值为当前选中的key值即可

<el-treeref="tree"class="checkboxSelect-wrap":data="treeData"show-checkboxnode-key="id":expand-on-click-node="true":props="defaultProps":accordion="false":default-checked-keys="defaultCheckedKeys":default-expand-keys="defaultExpandKeys":default-expand-all="false"@node-click="handleNodeClick"@check="handleCheckChange"
>
</el-tree>data() {return {defaultExpandKeys: [],}
},
computed: {// 当前选中的所有key值checkedKeys() {return this.$refs.tree.getCheckedKeys()},
},
methods() {handleCheckChange() {// 每次勾选后都把当前选中的所有key值给defaultExpandKeys this.defaultExpandKeys = this.checkedKeys}
}

第二种解决方法:使用getNode()找到当前点击的节点的expanded值,改变他,不让它为false折叠

之所以有第二种方法不用default-expand-keys的原因是:

在使用default-expand-keys之后,会出现一个现象:由于我的页面还有其他el-checkbox,这就造成了明明与el-tree无关,且el-tree的叶子节点是折叠的,但只要el-tree里面的某个节点是全选状态,勾选el-checkbox的时候,就会触发el-tree的叶结点自动展开的现象。

发生该现象的原因:
由于我的el-tree不确定接口数据有多少个,所以是循环出来的,会有两个以上的el-tree组件在同一个div里面,这就造成了使用default-expand-keys虽然可以解决勾选一个叶结点后会自动折叠的现象,但是当前default-expand-key我给的值是所有el-tree的getCheckedKeys()拿到的key值list。但我尝试了即使只给default-expand-keys赋值每个el-tree的getCheckedKeys(),还是会出现该现象。

如图所示:点击不限的瞬间,成长、平衡、价值的所有子结点突然全部展开了
在这里插入图片描述

此处我将expand-on-click-node设置了为false,不再使用该属性使得点击节点展开子结点

<el-treeref="tree"class="checkboxSelect-wrap":data="treeData"show-checkboxnode-key="id":expand-on-click-node="false":props="defaultProps":accordion="false":default-checked-keys="defaultCheckedKeys":default-expand-all="defaultExpand"@node-click="handleNodeClick"@check="handleCheckChange"
>
</el-tree>

在node-click事件中调用expand()展开节点:必须写nextTick,不然不生效;注释掉的那段可以用于点击节点、展开该节点下的子节点,就是和:expand-on-click-node="true"属性一个意思;但是不能保证点击叶结点时,该叶结点的上层节点保持展开的状态,没注释的那段,就可以达到该效果。

handleNodeClick(data, node, self) {this.$nextTick(() => {let currentNode = this.$refs.tree.getNode(data.id)if(!currentNode.parent.expanded) {currentNode.parent.expand(function(){for(let i=0; i< currentNode.parent.childNodes.length; i++){currentNode.parent.childNodes[i].expand()}})}// if(!currentNode.expanded){//   currentNode.expand(function(){//     for(let i=0; i< currentNode.childNodes.length; i++){//       currentNode.childNodes[i].expand()//     }//   })// }else {//   currentNode.expanded = false  // }})
},

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

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

相关文章

第T3周:天气识别

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 一、前期工作 本文将采用CNN实现多云、下雨、晴、日出四种天气状态的识别。较上篇文章&#xff0c;本文为了增加模型的泛化能力&#xff0c;新增了Dropout层并…

拉曼光谱入门:1.光谱的分类与散射光谱发展史

一、光谱是什么&#xff1f; 在一个宁静的午后&#xff0c;年轻的艾萨克牛顿坐在他母亲花园里的一棵苹果树下&#xff0c;手握一块精致的三棱镜。他沉思着光的奥秘&#xff0c;意识到光并非单一的白色&#xff0c;而是一种由多彩色组成的复杂结构。 他决心进行一次实验&#xf…

浅析C++函数重载

浅析C函数重载 C语言和C函数调用的不同 C语言会进行报错 C能成功运行并且自动识别类型 由此可以看出&#xff0c;C在函数调用时进行了调整&#xff0c;使其支持函数重载&#xff0c;那么我们就来看看进行了哪些调整吧&#x1f60e; 分析函数调用 首先我们要知道&#xff0c…

2024企业数据资产化及数据资产入表方案梳理

01 数据资产入表&#xff1a;是一个将组织的各类数据资产进行登记、分类、评估和管理的流程。 数据资产包括&#xff1a;客户信息、交易记录、产品数据、财务数据等。 做个比喻吧&#xff1a;数据资产入表就像是给公司的数据资产做“人口普查”—— ①找出公司有哪些数据找…

macos m2 百度paddleocr文字识别 python

创建了一个虚拟环境&#xff1a;conda create -n orc python3.11.7 进入虚拟环境后执行2条命令 pip install paddleocr -i https://pypi.tuna.tsinghua.edu.cn/simple pip install paddlepaddle -i https://pypi.tuna.tsinghua.edu.cn/simple​ ​ 安装好后&#xff0c;在网…

204.贪心算法:分发饼干(力扣)

以下来源于代码随想录 class Solution { public:int findContentChildren(vector<int>& g, vector<int>& s) {// 对孩子的胃口进行排序sort(g.begin(), g.end());// 对饼干的尺寸进行排序sort(s.begin(), s.end());int index s.size() - 1; // 从最大的饼…

严蔚敏数据结构(C语言版)吴伟民宁编著清华大学计算机系列教材+题集+配套题库+笔记+习题PDF电子版

今天分享的是 严蔚敏数据结构&#xff08;C语言版&#xff09;题集配套题库笔记习题PDF电子版 注&#xff1a;本资源搜集于网络&#xff0c;仅供学习交流&#xff0c;严禁用于商业用途 内容简介&#xff1a; “数据结构”是计算机程序设计的重要理论技术基础&#xff0c;它…

ArcTs布局入门04——相对布局 媒体查询

如果你也对鸿蒙开发感兴趣&#xff0c;加入“Harmony自习室”吧 扫描下面的二维码关注公众号。 本文将探讨相对布局与媒体查询&#xff0c;为啥把他们放到一起呢&#xff1f;主要是因为相对布局在响应式的场景下做得不太好&#xff0c;一般情况下和媒体查询&#xff08;不同尺…

MySQL之备份与恢复(二)

备份与恢复 定义恢复需求 如果一切正常&#xff0c;那么永远也不需要考虑恢复。但是&#xff0c;一旦需要恢复&#xff0c;只有世界上最好的备份系统是没用的&#xff0c;还需要一个强大的恢复系统。 不幸的是&#xff0c;让备份系统平滑工作比构造良好的恢复过程和工具更容易…

WebRtc实现1V1音视频通话

WebRtc实现1V1音视频通话 简介应用场景共享桌面的基本原理传统共享桌面WebRTC 共享桌面 相关API基本使用调用本地摄像头播放约束设置 媒体协商过程协议协议的交换与传输 WebRTC 通信过程ICE Candidate&#xff08;ICE 候选者&#xff09; 1V1视频通话 简介 WebRTC&#xff0c;名…

新版本发布丨昂辉科技EasySAR-Configurator V1.2.0再启航

昂辉科技新一代跨平台高性能AUTOSAR配置工具EasySAR-Configurator V1.2.0全新版本重磅发布&#xff01;产品基于Web架构前后端分离的方式开发&#xff0c;可提供SaaS部署&#xff0c;能够实现精准配置和最大限度的代码裁剪&#xff0c;且配备标准的约束限制、配置验证、代码生成…

jenkins 发布服务到linux服务器

1.环境准备 1.1 需要一台已经部署了jenkins的服务器&#xff0c;上面已经集成好了&#xff0c;jdk、maven、nodejs、git等基础的服务。 1.2 需要安装插件 pusblish over ssh 1.3 准备一台额外的linux服务器&#xff0c;安装好jdk 2.流程描述 2.1 配置jenkins&#xff0c;包括p…

如何将 Apifox 的自动化测试与 Jenkins 集成?

CI/CD &#xff08;持续集成/持续交付&#xff09; 在 API 测试 中的主要目的是为了自动化 API 的验证流程&#xff0c;确保 API 发布到生产环境前的可用性。通过持续集成&#xff0c;我们可以在 API 定义变更时自动执行功能测试&#xff0c;以及时发现潜在问题。 Apifox 支持…

二叉树的最近公共祖先-二叉树

236. 二叉树的最近公共祖先 - 力扣&#xff08;LeetCode&#xff09; ​ 递归 lson、rson左右子树&#xff1b; 深度优先遍历&#xff0c;遍历到p或者q就返回ture&#xff1b; class Solution { public:TreeNode* ans;bool dfs(TreeNode* root, TreeNode* p, TreeNode* q){i…

GoLand 2024 for Mac GO语言集成开发工具环境

Mac分享吧 文章目录 效果一、下载软件二、开始安装1、双击运行软件&#xff08;适合自己的M芯片版或Intel芯片版&#xff09;&#xff0c;将其从左侧拖入右侧文件夹中&#xff0c;等待安装完毕2、应用程序显示软件图标&#xff0c;表示安装成功3、打开访达&#xff0c;点击【文…

CAN学习笔记

学习链接&#xff1a;CAN学习笔记&#xff08;1&#xff09;_can sjw-CSDN博客 内容全部取自链接&#xff0c;非原创。用于自己学习和记录&#xff0c;如有错误请指正。如果侵权了&#xff0c;请联系我删掉。 CAN主要有两种物理层&#xff0c;1.闭环的ISO11898 2.开环的ISO1…

Hadoop3:NameNode和DataNode多目录配置(扩充磁盘的技术支持)

一、NameNode多目录 1、说明 NameNode多目录&#xff0c;需要在刚搭建Hadoop集群的时候&#xff0c;就配置好 因为&#xff0c;配置这个&#xff0c;需要格式化NameNode 所以&#xff0c;如果一开始没配置NameNode多目录&#xff0c;后面&#xff0c;就不要配置了。 2、配置…

数据库组成及原理

属性&#xff1a; 把数据库中的一个表类比成一个公司&#xff0c;那么公司里的每个人都是一个“属性”&#xff08;表中的一个字段视为一个属性&#xff09;&#xff0c;不管老板还是员工&#xff0c;只要是公司里的人&#xff0c;就都是一个属性。 主键&#xff1a; 老板就是“…

网络安全 文件上传漏洞-20 第二十关 Pass-20

点击进入第二十关&#xff0c;并选择显示代码&#xff1a; $is_upload false; $msg null; if(!empty($_FILES[upload_file])){//检查MIME$allow_type array(image/jpeg,image/png,image/gif);if(!in_array($_FILES[upload_file][type],$allow_type)){$msg "禁止上传该…

vector模拟实现【C++】

文章目录 全部的实现代码放在了文章末尾准备工作包含头文件定义命名空间和类类的成员变量 迭代器迭代器获取函数 构造函数默认构造使用n个值构造迭代器区间构造解决迭代器区间构造和用n个值构造的冲突拷贝构造 析构函数swap【交换函数】赋值运算符重载emptysize和capacityopera…