解决使用element-ui做权限分配时，权限树节点回显错误问题

最新推荐文章于 2024-07-24 15:51:28 发布
最新推荐文章于 2024-07-24 15:51:28 发布
阅读量350 收藏
点赞数
文章标签： vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41945145/article/details/118694061
版权

日常开发中使用element-ui做系统前端权限分配树时，发现在查看已完成权限分配用户的权限列表时，其列表中子级节点未全部勾选，父级节点却全部勾选。

由于element-ui树组件父节点自身存在半选中与全选中两种状态，且其可根据子节点勾选状态自动判别自身勾选状态，所以只需在回显权限列表前，将含有子级的父节点过滤掉即可正常显示。

注：转载请注明出处！ 

小熊饼干丿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Element-UI快速入门
专注于Java领域开发 关注我 带你玩转Java
03-09 9万+
什么是Element UI 这篇文章会告诉你 带你快速入门 学会Element UI
79.(前端)分配权限数据回显——element-ui的树形结构回显功能的使用
m0_63953077的博客
10-26 3003
element-ui的树形结构回显功能的使用
2024年最新vue+element-ui实现动态的权限管理和菜单渲染_权限设置ui，高级前端开发必看
2301_82243839的博客
05-07 558
面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。前端面试题汇总JavaScript性能linux前端资料汇总。
element-ui el-tree 设置回显节点半选 解决方案
CN_CKG__KK的博客
07-21 7208
1、element-ui el-tree 设置回显节点半选 解决方案 项目需求：树节点选择添加完后，再次编辑，若节点为全选，则设置为全选。若改节点下未设置全选，父节点设置为半全选 实现原理：利用tree组件渲染后带有的isLeaf(是否为叶子节点)属性，如果为叶子节点就选中。这样利用tree的API就实现了正确的回显效果。并没有过多的逻辑，只是利用tree本身的API 出BUG的概率也不会变高。手动设置node其实和prop的default-checked-keys ，原理是一样的，其实内部也都是循环
使用element-ui实现树形穿梭框
知无涯
11-21 5755
使用element实现一个树形穿梭框。
使用element-ui 中el-select 嵌套 tree树形控件的问题
qq_58247332的博客
10-13 2192
使用element ui 遇到的问题
工具：element-UI树回显时，父节点联动无权限子节点的问题
laurel_y的博客
02-24 349
例子 1:问题原因：我们可能使用 this.$refs.tree.setCheckedKeys(this.defalutArr); 或者使用 :default-expanded-keys=“treeDataSelect” :default-checked-keys=“treeDataSelect” 来进行回显的 获取数据 解决： if (res.data.code == 200) { //默...
解决element-ui的el-tree组件半选中回显的问题（setCheckedKeys、setChecked）
wocwin的博客
03-15 3400
1、问题如下 当后台返回包含有半选中状态的menu id时；用element 文档的this.$refs.tree.setCheckedKeys(res.data.checkedKeys)此方法无法解决回显问题 2、解决办法如下（应该使用setChecked） 关键代码 res.data.checkedKeys.forEach(val => { this.$nextTick(() => { this.$refs.tree.setChecked
vue element-ui tree树形控件中默认选中和回显问题
qq_44552416的博客
04-18 8714
问题： 我们使用树形控件在编辑时候有时候，会遇到回显数据是上一条回显给的数据。这个问题是由于我们的树形控件没有重新渲染导致的。比较笨的方法是每次编辑的时候重新加载一遍树形控件然后再进行回显选中的数据。不过这样会导致页面多次渲染影响加载速度和性能。 解决办法： 1，通过 this.$refs.tree组件上自定义ref名.setCheckedKeys(this.defaultList) <el-tree ref="tree" :data="dataList" show-checkbox
element-ui el-tree数据回显问题
嘿嘿
08-10 1038
1:问题原因：我们可能使用 this.$refs.tree.setCheckedKeys(this.defalutArr); 或者使用 :default-expanded-keys=“treeDataSelect” :default-checked-keys=“treeDataSelect” 来进行回显的 获取数据 解决： if (res.data.code == 200) { //默认选中的树的数据 let that = this setTimeout(function(...
详解element-ui级联菜单（城市三级联动菜单）和回显问题
10-16
在本文中，我们将深入探讨Element-UI框架中的级联菜单（Cascader）组件，特别是在实现城市三级联动菜单以及处理回显问题时所遇到的技术细节。Element-UI是一款基于Vue.js的高质量UI组件库，提供了丰富的组件供开发者...
Element-ui el-tree新增和删除节点后如何刷新tree的实例
01-21
一, 当新增节点后刷新当前节点 node.loaded = false; node.expand(); //新建子节点是刷新一次本节点的展开请求，而重命名和删除则需要刷新父级节点的的展开事件， 二, 删除节点 node.parent.loaded = false ...
详解关于element级联选择器数据回显问题
10-17
总结来说，解决 Element UI 级联选择器数据回显问题的关键在于： 1. 理解级联选择器的数据结构，包括 `value`、`label` 和子级 `children` 的定义。 2. 在编辑或更新表单时，将后端返回的数据（通常是 ID）转换为...
基于Vue2+element-ui+AntV X6实现的流程图编辑器
11-02
基于Vue2+element-ui+AntV X6实现的流程图编辑器，框架核心功能已经搭好，组态化呈现，自定义节点、属性绑定、样式调整等，采用Vuex统一管理各个属性，根据自己需求在此基础上自定义调整修改添加等，最终可导出json...
基于Vue2+element-ui+AntV X6 实现的流程图编辑器
07-25
基于Vue2+element-ui+AntV X6 流程图编辑器，框架核心功能已搭好，组态化呈现，自定义节点、属性绑定、样式调整等，采用Vuex统一管理各个属性，根据自己需求在此基础上自定义调整修改添加等，最终可导出json数据加以...
【elementui】记录el-table设置左、右列固定时，加大滚动条宽度至使滚动条部分被固定列遮挡的解决方法
bbt953的博客
07-24 486
记录el-table设置左、右列固定时，加大滚动条宽度至使滚动条部分被固定列遮挡的解决方法
qt练习控件label控件-lineEdit控件样例代码
最新发布
07-30
qt练习控件label控件-lineEdit控件样例代码
【JCR一区级】麻雀搜索算法SSA-CNN-LSTM-Attention故障诊断分类预测【含源码 5689期】.zip
07-30
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法-CNN-LSTM-Attention分类系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-LSTM-Attention分类 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-LSTM-Attention分类 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-LSTM-Attention分类 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-LSTM-Attention分类 4.4.5 萤火虫算法FA/差分算法DE-CNN-LSTM-Attention分类
element -tree -default-expanded-keys 回显
07-28
回答: 通过引用\[1\]和\[2\]的内容，我们可以知道在element-ui的树形控件中，可以使用default-expanded-keys属性来设置默认展开的节点。而使用default-checked-keys属性来设置默认勾选的节点。这样可以实现树形控件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值