首页 > 其他分享 >Elementui中el-tree获取节点的选中、设置节点的选中

Elementui中el-tree获取节点的选中、设置节点的选中

时间:2024-01-17 10:01:13浏览次数:27  
标签:el refs tree id item 选中 data 节点

this.$refs.tree.getCheckedNodes()//返回的是数组,包含所有选中的节点,不只是叶子节点。
this.$refs.tree.setCheckedKeys(ids)//传递的是叶子节点的id合集
例子:

/**
 * 节点被点击时的回调
 * @param data - 传递给 data 属性的数组中该节点所对应的对象
 */
nodeClick (data) {
  console.log(data)
  if (data.type === 'user') {
    // 筛选出已经选中的子节点的id集合
    const treeCheckedNodeIds = [...new Set(this.$refs.tree.getCheckedNodes().filter(_item => !_item.child).map(item => item.id))]
    // 获取当前节点的选中状态
    if (!treeCheckedNodeIds.includes(data.id)) {
      if (this.multiple) {
        // 多选
        this.$refs.tree.setCheckedKeys([data.id, ...treeCheckedNodeIds])
      } else {
        // 单选
        this.$refs.tree.setCheckedKeys([data.id])
      }
    } else {
      if (this.multiple) {
        // 多选
        this.$refs.tree.setCheckedKeys([...treeCheckedNodeIds.filter(item => item !== data.id)])
      } else {
        // 单选
        this.$refs.tree.setCheckedKeys([])
      }
    }
  }
}

标签:el,refs,tree,id,item,选中,data,节点
From: https://blog.51cto.com/u_16359506/9286640

相关文章

  • [oeasy]python005_退出游乐场_重启游乐场_系统态shell_应用态_quit
    退出终端_重启游乐场_shell_quit......
  • 遍历链表,将节点接到末端 【1月16日学习笔记】
    点击查看代码//遍历链表,将节点接到末端#include<iostream>usingnamespacestd;structnode{ intdata;//数据 node*next;//尾巴};//定义节点结构体node*A;//头指针固定,globalvariabl......
  • Asp .Net Core 系列:集成 Ocelot+Consul实现网关、服务注册、服务发现
    什么是Ocelot?Ocelot是一个开源的ASP.NETCore微服务网关,它提供了API网关所需的所有功能,如路由、认证、限流、监控等。Ocelot是一个简单、灵活且功能强大的API网关,它可以与现有的服务集成,并帮助您保护、监控和扩展您的微服务。以下是Ocelot的一些主要功能:路由管理:Ocelot允许......
  • IntelliJ IDEA 2024年最新下载、安装使用教程、亲测可用
    本文讲的是2023.3最新版本IntelliJIDEA破解、IntelliJIDEA激活码、IntelliJIDEA安装、IntelliJIDEA永久激活码的最新永久激活教程,本文有mac和windows系统的idea安装教程。1.下载安装IntelliJIDEA首先先到官网下载最新版的IntelliJIDEA,下载后傻瓜式安装就好了官网下载......
  • 一个excel文件,我用pandas如何取行,只能用pandas?
    大家好,我是皮皮。一、前言前几天在Python白银交流群粉丝问了一个Pandas数据筛选的问题。问题如下:我突然想到,如果一个excel文件,我用pandas如何取行,只能用pandas。二、实现过程后来【月神】给了一个思路和代码如下:其实粉丝之前也问了一个类似的花式索引的问题,可能时就间太久......
  • element ui tooltips不显示的bug
    form表单中一刷新页面input为什么会自动校验,明明是有值的,也提示必填但是手输之后又是正常校验原因:初始化没有响应式,因为addFields里面没有写这个初始化的变量解决办法:让其响应式,初始化addFields里面添加此变量,或者用对象set的方式//this.addFields.passNoticeTime=!!d......
  • RHCE第三周(bash shell)
    一:初始bashshellshell:就是一个解释器,将命令翻译成内核看的懂的语言shell的种类:bashshell,csh,ksh等会了rhel其他的也回了,因为其他的版本的shell默认都是bashshell所以他们的命令万变不离其宗二:bashshell提供的功能1:快捷键 ctrl+A移动的命令的最前面ctrl+E移动......
  • RelativeSource
    RelativeSourceSelfTemplateParentAscsterTypeRelativeSource和ElementName的区别RelativeSource必须是父级控件,它是沿着可视化树向上查找。ElementName不需要,同一级控件也可以。具体原因学习NameScope就行了。Mode=Self数据源是作为目标依赖属性所属的实例。下面的例......
  • Python随笔3(流程控制if else )
    #answer=input('你是会员名y/n')##pass是空语句#if(answer=='y'):#pass#else:#pass'''只要是空的就是False'''print(bool(False))print(bool(0))print(bool(0.0))print(bool(None))print(bool(''))......
  • Linux --CentOS系统中 使用Vscode调试shell bash脚本 环境搭建基本步骤
    Linux--CentOS系统中使用Vscode调试shellbash脚本环境搭建基本步骤操作系统:Linux--CentOS.step1:在Vscode中安装BashDebug Step2:创建一个名字为123.sh的shell脚本;输入123.sh,回车: ​​​​​​Step3:编辑简单的待打印的内容,如下: Step4:配置编译器修改......