vue中使用ele中的tree树形控件

news/2024/9/22 7:05:48/

这里只演示获取当前选择层级例如:第一节点,第二节点和第三节点

  <el-treeref="tree":data="data":show-checkbox="true"node-key="id"default-expand-all></el-tree><el-button @click="getCheckedKeys">通过 key 获取</el-button>

 这个是数据类型

 

 data: [{id: 1,label: "一级 1",children: [{id: 11,label: "二级 1-1",children: [{id: 111,label: "三级 1-1-1",},{id: 112,label: "三级 1-1-2",},],},{id: 12,label: "二级 1-2",children: [{id: 121,label: "三级 1-2-1",},{id: 122,label: "三级 1-2-2",},],},],},{id: 2,label: "一级 2",children: [{id: 21,label: "二级 2-1",children: [{id: 211,label: "三级 2-1-1",},{id: 212,label: "三级 2-1-2",},],},{id: 22,label: "二级 2-2",children: [{id: 221,label: "三级 2-2-1",},{id: 222,label: "三级 2-2-2",},],},],},],

这个是点击事件

 getCheckedKeys() {const checkedKeys = this.$refs.tree.getCheckedKeys();const thirdNodeIds = [];for (let i = 0; i < checkedKeys.length; i++) {const nodeData = this.$refs.tree.getNode(checkedKeys[i]);// 获取所有的节点id信息 也可以获取其他的看nodeData的信息// if (nodeData.level === 2) {thirdNodeIds.push(nodeData.data.id);// }// 获取层级为2的节点id信息 也可以获取其他的看nodeData的信息if (nodeData.level === 2) {thirdNodeIds.push(nodeData.data.id);}// 获取层级为3的节点id信息 也可以获取其他的看nodeData的信息if (nodeData.level === 3) {thirdNodeIds.push(nodeData.data.id);}}// 打印所有选中的第三级节点的 id 集合console.log(thirdNodeIds);},

 上方都有相应的解释

下方是截图

 

 

其余功能在探索中.... 


http://www.ppmy.cn/news/40414.html

相关文章

分享88个ASP其他类别源码,总有一款适合您

分享88个ASP其他类别源码&#xff0c;总有一款适合您 88个ASP其他类别源码下载链接&#xff1a;https://pan.baidu.com/s/15Hx5mKAqhabvmdKij4C-3g?pwdxgrp 提取码&#xff1a;xgrp Python采集代码下载链接&#xff1a;采集代码.zip - 蓝奏云 我的博客地址&#xff1a;亚…

JavaScript对象类型之function

目录 一、Function 定义函数 调用函数 默认参数 匿名函数 箭头函数 二、函数是对象 三、函数作用域 四、闭包 五、let、var与作用域 一、Function 定义函数 function 函数名(参数) {// 函数体return 结果; } 例如&#xff1a; function add(a, b) {return a b; …

最火爆的持续集成工具 jenkins ,详细教程来啦(傻瓜式教程)

很多小伙伴在安装以及配置jenkins的时候&#xff0c;总会遇到一些问题。 今天在这边特地把jenkins的安装&#xff0c;以及常用的一些功能的配置整理到了这篇文章中&#xff0c;希望对大家有所帮助&#xff01; 1安装JDK JDK安装完需要配置环境变量&#xff0c;大家可以自行百度…

8-数据可视化-地图可视化

文章目录1.基础地图2.国内疫情地图3.省内疫情地图1.基础地图 &#xff08;1&#xff09;基础结构 from pyecharts.charts import Map mapMap() # 准备地图对象 data[ # 数据是由元组组成的列表("北京市",100),("台湾省",99),("上海市",98),(&q…

SDK之动态链接库开发—基本概念

动态链接库&#xff08;Dynamic Link Library&#xff0c;简称 DLL&#xff09;是一种在运行时加载的库&#xff0c;可用于在多个应用程序之间共享代码和数据。与静态链接库相比&#xff0c;动态链接库的主要优劣势如下&#xff1a; 优势&#xff1a; 空间效率更高&#xff0…

砝码称重(第十二届蓝桥杯省赛第一场C++A/B/研究生组)

突然决定要参加蓝桥&#xff0c;已经超级久没复习C/C的我考前还是决定打几道题捡一捡C/C的语法和思路。 2023年蓝桥的题之后会出&#xff0c;因为 AcWing上还没有出可以测试的程序&#xff0c;也没把握说自己考场上做的就是对的。 题目 你有一架天平和 N 个砝码&#xff0c;…

0201服务注册源码解析-nacos2.x-微服务架构

文章目录1 搭建测试服务1.1 搭建服务1.2 启动测试2 nacos 服务注册原理2.1 客户端注册2.2 服务端注册结语1 搭建测试服务 1.1 搭建服务 我们基于springboot来搭建简单的订单和库存服务&#xff0c;通过订单服务调用库存服务,项目代码和配置在文章最后的仓库有&#xff0c;项目…

关于FTP文件传输协议说明,带你了解更详细的文件传输协议

FTP是文件传输协议的缩写。顾名思义&#xff0c;FTP用于在网络上的计算机之间传输文件。您可以使用文件传输协议在计算机帐户之间交换文件&#xff0c;在帐户和台式计算机之间传输文件或访问在线软件档案。但是请记住&#xff0c;许多文件传输协议站点已被大量使用&#xff0c;…