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

news/2024/7/7 1:40:44 标签: elementui, vue.js, 前端

第一种解决方案:设置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  
    // }
  })
},

http://www.niftyadmin.cn/n/5534749.html

相关文章

路由器的ip地址与网关的区别是什么

在网络世界中&#xff0c;路由器扮演着至关重要的角色&#xff0c;它负责数据的传输和网络的互联。而在路由器的设置中&#xff0c;有两个常见的概念&#xff1a;IP地址和网关。那么&#xff0c;路由器的IP地址与网关的区别是什么&#xff1f;下面与虎观代理小二一起了解一下吧…

Labview_Occurrencel(事件发生)

PS&#xff1a;这里遇到 一个很Low的事情&#xff1a; 在停止第二个while循环的时候出现了停止不了的情况。因为等待事件发生设置的超时时间为:-1。所以等事件发生后出现了条件接线端已经执行的情况&#xff0c;所以当下次事件发生时未能及时停止。初版的停止设置如下图&#x…

RabbitMQ-交换机的类型以及流程图练习-01

自己的飞书文档:‌‍‬‍‬‍​‍‬​⁠‍​​​‌⁠​​‬‍​​​‬‬‌​‌‌​​&#xfeff;​​​​&#xfeff;‍​‍​‌&#xfeff;⁠‬&#xfeff;&#xfeff;&#xfeff;​RabbitMQ的流程图和作业 - 飞书云文档 (feishu.cn) 作业 图片一张 画rabbit-mq 消息发…

.net core 的 winform 的 浏览器控件 WebView2

在.NET Core WinForms应用程序中&#xff0c;没有直接的“浏览器控件”&#xff0c;因为WinForms不支持像WebBrowser控件那样的功能。但是&#xff0c;你可以使用WebView2控件&#xff0c;它是一个基于Chromium的浏览器内核&#xff0c;可以在WinForms应用程序中嵌入Web内容。 …

【sqlite3】联系人管理系统

SQLite3实现简单的联系人管理系统 有关sqlite3的基础知识请点击&#xff1a;SQLite3的使用 效果展示&#xff1a; 创建一个名为contacts.db的数据库 首先&#xff0c;我们需要创建一个名为contacts.db的数据库&#xff0c;并建立一个名为"contact"的表&#xff0…

stthjpv:一款针对JWT Payload的安全保护工具

关于stthjpv stthjpv是一款针对JWT Payload的安全保护工具&#xff0c;这款工具集多种技术和思想于一身&#xff0c;可以通过不断改变相关参数值来防止Payload被解码&#xff0c;以帮助广大研究人员更好地保护JWT Payload的安全性。 除此之外&#xff0c;该工具还能够确保JWT …

【软件测试】之自动化测试

&#x1f3c0;&#x1f3c0;&#x1f3c0;来都来了&#xff0c;不妨点个关注&#xff01; &#x1f3a7;&#x1f3a7;&#x1f3a7;博客主页&#xff1a;欢迎各位大佬! 文章目录 什么是自动化测试Selenium介绍什么是SeleniumSelenium的特点工作原理 SeleniumJava环境搭建下载…

Element中的日期时间选择器DateTimePicker和级联选择器Cascader

简述&#xff1a;在Element UI框架中&#xff0c;Cascader&#xff08;级联选择器&#xff09;和DateTimePicker&#xff08;日期时间选择器&#xff09;是两个非常实用且常用的组件&#xff0c;它们分别用于日期选择和多层级选择&#xff0c;提供了丰富的交互体验和便捷的数据…