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

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

<el-tree
  ref="tree"
  class="checkboxSelect-wrap"
  :data="treeData"
  show-checkbox
  node-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-tree
  ref="tree"
  class="checkboxSelect-wrap"
  :data="treeData"
  show-checkbox
  node-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  
    // }
  })
},

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

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

相关文章

MATLAB——循环语句

一、for end语句 在该语法中&#xff0c;循环变量是用于迭代的变量名&#xff0c;它会在每次循环迭代中从向量或矩阵中取出一列的值。数值向量或者矩阵则表示了循环变量可以取值的范围&#xff0c;通常根据实际需要事先给定。一旦循环变量遍历完数值向量或者矩阵中的所有值&…

初试成绩占比百分之70!计算机专硕均分340+!华中师范大学计算机考研考情分析!

华中师范大学&#xff08;Central China Normal University&#xff09;简称“华中师大”或“华大”&#xff0c;位于湖北省会武汉&#xff0c;是中华人民共和国教育部直属重点综合性师范大学&#xff0c;国家“211工程”、“985工程优势学科创新平台”重点建设院校&#xff0c…

苹果公司的Wifi定位服务(WPS)存在被滥用的风险

安全博客 Krebs on Security 2024年5月21日发布博文&#xff0c;表示苹果公司的定位服务存在被滥用风险&#xff0c;通过 "窃取"WPS 数据库&#xff0c;可以定位部队行踪。 相关背景知识 手机定位固然主要依赖卫星定位&#xff0c;不过在城市地区&#xff0c;密集的…

YOLOv10全网最新创新点改进系列:融合GSConv+Slim Neck,双改进、双增强,替换特征融合层实现, 轻量化涨点改进策略,有效涨点神器!

YOLOv10全网最新创新点改进系列&#xff1a;融合GSConvSlim Neck&#xff0c;双改进、双增强&#xff0c;替换特征融合层实现&#xff0c; 轻量化涨点改进策略&#xff0c;有效涨点神器&#xff01; 所有改进代码均经过实验测试跑通&#xff01;截止发稿时YOLOv10已改进40&…

vue中的坑·

常规 1.使用watch时&#xff0c;immediate true会在dom挂载前执行 2.使用this.$attrs和props 可以获取上层非原生属性&#xff08;class/id&#xff09; 多层次嵌套引用 设置的时候直接赋值&#xff0c;修改的时候即使用的双向绑定加上$set / nextick / fouceUpdate都不会同步…

MySQL表的练习

二、创建表 1、创建一个名称为db_system的数据库 create database db_system; 2、在该数据库下创建两张表&#xff0c;具体要求如下 员工表 user 字段 类型 约束 备注 id 整形 主键&#xff0c;自增长 id N…

探索设计的未来:了解设计师对生成式人工智能(AIGC)工具的采用

在数字化浪潮的推动下&#xff0c;设计行业正经历着一场革命性的变革。随着生成式人工智能&#xff08;AIGC&#xff09;技术的发展&#xff0c;设计师们迎来了前所未有的机遇与挑战。这些工具不仅重塑了传统的设计流程&#xff0c;还为设计师们提供了更广阔的创意空间和更高效…

vue模板语法v-html

模板语法v-html vue使用一种基于HTML的模板语法&#xff0c;使我们能够声明式的将其组件实例的数据绑定到呈现的DOM上&#xff0c;所有的vue模板都是语法层面的HTML&#xff0c;可以被符合规范的浏览器和HTML解释器解析。 一.文本插值 最基本的数据绑定形式是文本插值&#…

理解神经网络的通道数

理解神经网络的通道数 1. 神经网络的通道数2. 输出的宽度和长度3. 理解神经网络的通道数3.1 都是错误的图片惹的祸3.1.1 没错但是看不懂的图3.1.2 开玩笑的错图3.1.3 给人误解的图 3.2 我或许理解对的通道数3.2.1 动图演示 1. 神经网络的通道数 半路出嫁到算法岗&#xff0c;额…

【算法训练记录——Day41】

Day41——动态规划Ⅲ 1.理论基础——代码随想录2.纯01背包_[kamacoder46](https://kamacoder.com/problempage.php?pid1046)3.leetcode_416分割等和子集 背包&#xff01;&#xff01; 1.理论基础——代码随想录 主要掌握01背包和完全背包 物品数量&#xff1a; 只有一个 ——…

顶级5款有用的免费IntelliJ插件,提升你作为Java开发者的旅程

在本文中&#xff0c;我们将深入探讨IntelliJ IDEA插件——那些可以提升你生产力的神奇附加组件&#xff0c;并微调你的代码以达到卓越。我们将探索5款免费插件&#xff0c;旨在将你的开发水平提升到一个新的高度。 1. Test Data 使用Test Data插件进行上下文操作 作为开发者&a…

昇思学习打卡-5-基于Mindspore实现BERT对话情绪识别

本章节学习一个基本实践–基于Mindspore实现BERT对话情绪识别 自然语言处理任务的应用很广泛&#xff0c;如预训练语言模型例如问答、自然语言推理、命名实体识别与文本分类、搜索引擎优化、机器翻译、语音识别与合成、情感分析、聊天机器人与虚拟助手、文本摘要与生成、信息抽…

基于用户的协同过滤算法

目录 原理&#xff1a; 计算相似度&#xff1a; 步骤&#xff1a; 计算方法&#xff1a;Jaccard相似系数、余弦相似度。 推荐 原理&#xff1a; 先“找到相似用户”&#xff0c;再“找到他们喜欢的物品”--->人以群分。即&#xff0c;给用户推荐“和他兴趣相似的其他用…

运维管理一体化:构建多维一体化的运维体系

本文来自腾讯蓝鲸智云社区用户&#xff1a;CanWay 摘要&#xff1a;笔者根据自身的技术和行业理解&#xff0c;解析运维一体化的内涵和实践。 涉及关键词&#xff1a;一体化运维、平台化运维、数智化运维、运维PaaS、运维工具系统、蓝鲸等。 本文作者&#xff1a;嘉为蓝鲸运维…

微信小程序 typescript 开发日历界面

1.界面代码 <view class"o-calendar"><view class"o-calendar-container" ><view class"o-calendar-titlebar"><view class"o-left_arrow" bind:tap"prevMonth">《</view>{{year}}年{{month…

react框架,使用vite和nextjs构建react项目

react框架 React 是一个用于构建用户界面(UI)的 JavaScript 库,它的本质作用是使用js动态的构建html页面&#xff0c;react的设计初衷就是为了更方便快捷的构建页面&#xff0c;官方并没有规定如何进行路由和数据获取&#xff0c;要构建一个完整的react项目&#xff0c;我们需要…

Frrouting快速入门——OSPF组网(一)

FRR简介 FRR是FRRouting的简称&#xff0c;是一个开源的路由交换软件套件。其作者源自老牌项目quaga的成员&#xff0c;也可以算是quaga的新版本。 使用时一般查看此文档&#xff1a;https://docs.frrouting.org/projects/dev-guide/en/latest/index.html FRR支持的协议众多…

Unity 实现UGUI 简单拖拽吸附

获取鼠标当前点击的UI if(RectTransformUtility.RectangleContainsScreenPoint(rectTransform, Input.mousePosition)) {return rectTransform.gameObject; } 拖拽 在Update 中根据鼠标位置实时更新拖拽的图片位置。 itemDrag.transform.position Input.mousePosition; …

Windows安全认证机制——Windows常见协议

一.LLMNR协议 1.LLMNR简介 链路本地多播名称解析&#xff08;LLMNR&#xff09;是一个基于域名系统&#xff08;DNS&#xff09;数据包格式的协议&#xff0c;使用此协议可以解析局域网中本地链路上的主机名称。它可以很好地支持IPv4和IPv6&#xff0c;是仅次于DNS解析的名称…