element-ui_el-tree_树形结构_element 树形结构-程序员宅基地

技术标签： elementui tree

element-ui_el-tree_树形结构

文章目录

内容

1、简介

应用场景：树形结构或者层级数据的简单展示
效果图示：

2、详解

常用属性

名称	类型	取值	默认值	描述
data	array	-	-	被渲染的数据
node-key	string	-	-	节点的唯一标志
props	object	-	-	配置项，见prop详细
load	boolean	-	false	加载子级数组，当lazy为true是有效
default-expand-all	boolean	-	true	是否默认全部展开
default-expended-keys	array	-	-	默认展开项的key数组，前提设置node-key
show-checkbox	boolean	-	false	是否显示多选框
check-strictly	boolean	-	false	父级与子级关联绑定
accordion	boolean	-	false	是否同级只展示1个
lazy	boolean	-	false	是否开启懒加载

props配置

名称	类型	取值	默认值	描述
label	string,function(data,node)	-	-	指定对象的哪个属性做标签使用
children	string	-	-	指定对象的哪个属性为子级数据
isLeaf	boolean,function(data,node)	-	-	是否是叶子节点

常用方法

名称	参数	描述
getCheckedKeys	leafOnly	获取选中节点的key数组
setCheckedKeys	keys,leafOnly	设置选中的节点key数组
getHalfCheckedKeys		获取半选中节点key数组

常用事件

名称	参数	描述
node-click		点击节点触发
check-change		多选框选择改变触发

3、tree常见问题及解决方法

效果图源代码：

   <el-tree
  			ref="tree"
  			:data="permList"
  			:props="defaultProps"
  			:check-strictly="checkStrictly"
  			show-checkbox
  			default-expand-all
  			node-key="id"
  			class="permission-tree"
  	 />

3.1、tree的回显

初始版本
1. 使用属性，:default-checked-keys=“checkedIds”。
2. 在触发弹出框之前，异步请求角色有的权限id数组，初始化checkedIds
问题，虽然效果实现了但是角色没有权限的回显也会显示之前有权限回显的数据

解决方法

改用属性:check-strictly=“checkStrictly”

 showAssign(id) {
 	  this.checkStrictly = true
 	  // this.checkedIds  = []
 	  this.assignForm.id = id;
 	  getPermsByRoleId(id).then(resp => {
 		this.assignDialogVisible = true
 		this.$refs.tree.setCheckedKeys(resp.permIds)
 		this.checkStrictly = false
 	  })

 }

如遇到新问题持续更新……

参考地址：
https://my.oschina.net/gmarshal/blog/1843526
https://blog.csdn.net/jasmine0178/article/details/103600508

页面和后端完整代码在下面仓库中。

后记：

本项目为参考某马视频开发，相关视频及配套资料可自行度娘或者联系本人。上面为自己编写的开发文档，持续更新。欢迎交流，本人QQ:806797785

 后端JAVA源代码地址:https://gitee.com/gaogzhen/ihrm-parent    // 后端项目
 前端项目源代码地址：https://gitee.com/gaogzhen/ihrm-vue    // 前端后台管理系统

本文链接：https://blog.csdn.net/gaogzhen/article/details/112757259

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

网络安全（黑客）—2024自学到精通-程序员宅基地

文章浏览阅读822次，点赞20次，收藏24次。网络安全教程从web攻防-通用漏洞、漏洞发现、代码审计、权限提升、免杀对抗、信息打点、内网安全、应急响应等方面全方位的介绍网络安全工程师所需要掌握的各项技能，帮助大家掌握网络信息安全工作中所需掌握的技能，红队中高级，蓝队初中级，CTF-Web选手，SRC猎人等；安全服务，渗透测试，网络安全，安全开发，红队对抗等岗位

文章浏览阅读6k次，点赞22次，收藏101次。一、MVC模式简介MVC是一种架构型模式，它本身并不引入新的功能，只是用来指导我们改善应用程序的架构，使得应用的模型和视图相分离，从而得到更好的开发和维护效率。在MVC模式中，应用程序被划分成了模型（Model）、视图（View）和控制器（Controller）三个部分。其中，模型部分包含了应用程序的业务逻辑和业务数据；视图部分封装了应用程序的输出形式，也就是通常所说的页_mvc模式

macOS下QT设置应用程序图标、程序坞图标_qt macos 软件图标-程序员宅基地

文章浏览阅读2k次，点赞2次，收藏5次。1. 设置应用程序图标（finder中展示的图标）在Qt助手（QT Assistant）中，输入“setting”，可以看到下面的列表中有Setting the Application Icon，双击它就可以看到右侧窗口中的帮助文档，帮助文档里介绍了如何设置应用程序图标。文档内容很全面，包括如何设置windows、OS X和linux的程序图标。这里我们介绍如何设置macOS下应用程序的图标。如Qt助手中介绍的方法，QWindows::setWindowIcon()只能设置在程序坞中展示的图标，_qt macos 软件图标

手把手教你系列之微信公众号 java后端获取code（重定向解决）_微信授权后端重定向获取code可行么-程序员宅基地

文章浏览阅读8.4k次，点赞7次，收藏20次。微信开发文档上，获取code是在前端页面获取，但是现在也不知道为啥非得在后端获取，获取就获取吧，安排一下。获取code的目的，其实就是为了获取openid和token，获取openid和token的目的，其实是为了获取unionid和用户信息。先写个工具类，主要是两个方法，需要的，你们直接复制粘贴就好public class WxGzhUtils {/*** 获取openid access_token* @param appid* @param secret* @param code* _微信授权后端重定向获取code可行么

switch case 语句-程序员宅基地

文章浏览阅读131次。简单介绍了switch case，快来看看吧~

随便推点

Spring Boot + Mybatis + 二级缓存实例（Ehcache，Redis）_springboot+mybatis+ehcahe+redis-程序员宅基地

文章浏览阅读7.1k次。使用Mybatis自带二级缓存MyBatis 包含一个非常强大的查询缓存特性,它可以非常方便地配置和定制。MyBatis 3 中的缓存实现的很多改进都已经实现了,使得它更加强大而且易于配置。默认情况下是没有开启缓存的,除了局部的 session 缓存,可以增强变现而且处理循环依赖也是必须的。要开启二级缓存,你需要在你的 SQL 映射文件中添加一行:<cache/>..._springboot+mybatis+ehcahe+redis

最新蚂蚁Java岗面经：HashMap+多线程+缓存+中间件（含答案解析）-程序员宅基地

文章浏览阅读175次。蚂蚁一面二叉搜索树和平衡二叉树有什么关系，强平衡二叉树（AVL 树）和弱平衡二叉树（红黑树）有什么区别？B树和B+树的区别，为什么MySQL要使用B+树？HashMap 如何解决 Hash 冲突？epoll 和 poll 的区别，及其应用场景简述线程池原理，FixedThreadPool 用的阻塞队列是什么？sychronized 和 ReentrantLock 的区别..._java用于多线程缓存的map

IDEA下解决Maven依赖冲突_idea如何解决依赖冲突-程序员宅基地

文章浏览阅读891次。但是这个oss对象的依赖包的冲突解决了,但是会出现问题,由于那个common-lang是Apache的工具类,那个标签又不加version标签,如果去掉那里这里的2.3的版本和2.5的版本就都去掉了.显然是不合理的.不建议去掉这里的冲突.目前项目使用的版本号是2.5的.但是有2.3的依赖存在,导致发生了冲突,如果有许多的version的,也只会使用一个其他的就会标红表示发生了依赖冲突的.1.3 目前是发现了冲突所在的详细位置了,接下来就是解决冲突了.点击项目的pom.xml文件._idea如何解决依赖冲突

概率论基础复习题-程序员宅基地

文章浏览阅读912次，点赞13次，收藏11次。显著性水平从0.05降低到0.01，说明拒绝域也减小，在拒绝域大的情况下接受，那么在该拒绝域变小的情况下也定然接受。[3] 茆诗松, 周纪芗. 概率论与数理统计 (第三版). 中国统计出版社, 2007。[4] 陈家鼎等. 数理统计学讲义 (第二版). 高等教育出版社, 2006。[5] 王松桂等. 概率论与数理统计 (第三版). 科学出版社, 2011。[1] 陈希孺. 概率论与数理统计. 中国科学技术大学出版社, 2009。样本方差是总体方差的无偏估计。统计值是一个数值，统计量是一个随机变量。

使用BeanUtils.populate将map集合封装为bean对象_beanutils.populate(customer, map);-程序员宅基地

文章浏览阅读1.3k次。背景把jsp页面中表单的内容存到数据库，和request.getParameterMap配合使用可以将jsp页面表单的数据转化为bean对象。在对象参数比较多的情况下，使用request.getParameter比较麻烦BeanUtils位于org.apache.commons.beanutils.BeanUtils下面，其方法populate的作用解释如下：完整方法：BeanUtils.populate( Object bean, Map properties )，这个方法会遍_beanutils.populate(customer, map);

站长常用的200个js代码-程序员宅基地

文章浏览阅读134次。站长常用的200个js代码1.文本框焦点问题onBlur:当失去输入焦点后产生该事件onFocus:当输入获得焦点后，产生该文件Onchange:当文字值改变时，产生该事件Onselect:当文字加亮后，产生该文件<input type="text" value="郭强" onfocus="if(value=='郭强') {value=''}" onb..._站长之家h5端站点统计js代码