elementui el-tree 菜单树多选框勾选父子节点显示问题

最新推荐文章于 2024-08-07 15:40:47 发布

小狐狸和小兔子

最新推荐文章于 2024-08-07 15:40:47 发布

阅读量4.8k

点赞数 2

分类专栏： Vue.js 文章标签： elementui element el-tree el-tree父子多选节点

本文链接：https://blog.csdn.net/qq_27331631/article/details/111990863

版权

在ElementUI的el-tree组件中，处理菜单权限选择时遇到问题。当只勾选部分子节点时，由于el-tree的默认父子关联特性，会导致父节点全被选中。为解决此问题，需要在后台数据处理中，为每个节点添加ischecked属性，并在保存时将选中的权限设为true，未选中的设为false。同时，对于返回的树结构数据，如果节点没有children，将其id添加到checkedSet中，仅保留最低级别节点的ID，从而实现正确的半选中效果。

摘要由CSDN通过智能技术生成

elementui el-tree 关于菜单权限选择的问题，如图，比如系统设置下有用户管理、角色管理、组织架构管理，现在分配权限只勾选了如图所示权限，我们先将数据保存到后台

// 保存权限设置验证
// 获取所有选中的节点
const checkeds = this.$refs.tree.getCheckedKeys();
// 获取目前半选中节点
const checkedParent = this.$refs.tree.

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小狐狸和小兔子

关注关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue3+ElementPlus el-tree树添加虚线滚动时虚线显示问题处理

朝花夕拾的博客

05-23

650

【代码】Vue3+ElementPlus el-tree树添加虚线滚动时虚线显示问题处理。

el-tree获取父级及祖先级节点

最新发布

weixin_46391404的博客

08-07

252

【代码】vue-treeselect 禁止父级选中,不禁止子集选中。

element-plus el-tree 鼠标悬停展示被省略的文字

gu9611的博客

07-26

441

【代码】element-plus el-tree 鼠标悬停展示被省略的文字。

elementui中select搭配tree使用多选,并且实现选中所有子集展示的是父级

m0_64603959的博客

04-21

2530

代码可能会有问题,因为开发电脑是内网,没办法把代码粘过来,有任何问题可以评论告诉我。

vue+element-plus的el-tree和el-tree-select

weixin_63954739的博客

09-10

1431

在项目中有一个添加的类目里面有一个这样的选择，刚开始做项目一直用的是el-tree,于是做这个的时候用的也是el-select+el-tree等做完之后才发现还有更方便的el-tree-select结合，于是也做了一边接下来我把俩个方法都写上，首先是el-select+el-tree。这个方法就完成了，接下来是el-tree-select这个方法。好了，这就ok了js都是一样的。

所以告诉我有关链表的信息

weixin_26751591的博客

09-17

318

Having recently graduated from a coding bootcamp, I’ve been deep into studying data structures and algorithms to better my fundamental knowledge. Linked lists are a relatively simple data structure, b...

【JavaScript源代码】element的el-tree多选树(复选框)父子节点关联不关联.docx

12-28

在el-tree中，如果需要实现多选（复选框）功能，我们可以利用`show-checkbox`属性来开启复选框。在处理父子节点之间的关联性时，`check-strictly`属性扮演着关键角色。 `check-strictly`属性决定了父子节点之间是否...

vue3 - element-plus树形控件el-tree快捷全选、反选、清除选择功能，Tree树形控件组件实现点击按钮一键全勾选和一键全取消勾选快捷按钮（详细示例运行源码，一键复制开箱即用！）

高级前端工程师

03-11

4256

vue3，element plus，el-select，树形组件，Tree树形控件，vue3 elementplus如何实现tree树组件一键全选和反选功能，el-select实现全选、取消全选效果，树形下拉选择器组件，element-plus tree树形全选和反选，el-tree实现一键全选、反选功能el-tree 全选，el-tree实现全选/全不选，tree全选全不选,获取所有选中，清空el-tree复选框选中项，el-select下拉框多选实现全选的实现，一键全选多个树形，el-tree树增加全选

el-tree选中当前节点时，当前节点的父级、子级不能选/节点区内容自定义/寻找当前节点的前辈

weixin_39418338的博客

10-10

1348

el-tree选中当前节点时，当前节点的父级、子级不能选/节点区内容自定义/寻找当前节点的前辈

el-tree获取当前选中节点及其所有父节点的id(包含半选中父节点的id)

qq_37635012的博客

01-18

1007

如下图，我们现在全勾中的有表格管理及其下的子级，而半勾中的有工作台和任务管理及其子级。与源数据id一模一样，达到目的。

处理勾选的节点，有父节点就是显示父节点，有部分子节点被勾选就显示具体子节点

qq_39771221的博客

02-22

358

接上一篇博客：https://blog.csdn.net/qq_39771221/article/details/104399694 已经处理了父子节点的之间的勾选关系：节点的子节点都被勾选，则节点被勾选，节点的子节点是部门勾选，则节点不会被勾选；现在：在所有被选择的的节点中，节点的父节点存在，则去掉该节点（开始想的递归，因为节点的父节点的父节点也有可能被选了），其实很简单...

vue3.2 element-plus el-tree仅点击子级最后一级高亮，父级不高亮

nlhhln的博客

06-12

1356

vue3.2 element-plus el-tree仅点击子级最后一级高亮，父级不高亮

el-select嵌套el-tree子节点全选只返回父节点方案

weixin_59685936的博客

10-11

1190

el-select嵌套el-tree子节点全选只返回父节点方案

ElementUI tree 解决父节点选中，回显选中所有子节点问题

嘿嘿

08-10

4291

一、当前面临的问题当tree中被选择的节点提交给后端时发现没有带父节点的选项向后端提交了部分子节点 和部分子节点的父节点 的数据，当回显的时候，该父节点下全部被选中二、问题解决第一个问题的解决方法如下： this.$refs.tree.getCheckedNodes(false,true).map(i => i.id) getCheckedNodes 接收两个 boolean 类型的参数，1. 是否只是叶子节点，默认值为 false 2. 是否包含半选节点，默认值为 false

element el-tree 获取选中节点的父节点

cc蒲公英的博客

03-26

898

element el-tree 获取选中节点的父节点

element tree 获取到父ID 并回显

小米粒的博客

07-30

1052

描述：el-tree 子菜单未选中的情况，也能获取父节点Id，回显时后台也将父节点的Id传回来，但是子节点全部选中，主要解决这两个问题。 1、获取父id ①getHalfCheckedKeys 使用这个方法用来获取父节点半选择状态ID值 this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys()) 2、回显时获取父节点，子节点不能全选 <el-tree @check-change="...

ElementUI el-tree节点操作详解：添加、修改、删除与获取选中ID

本文主要探讨了在ElementUI框架中如何实现el-tree组件的节点操作，包括获取选中节点的ID、添加新节点、修改节点以及删除节点等常见功能。通过实例代码展示了具体的操作方法。在ElementUI中，el-tree组件是一个强大...