解决element-ui的el-tree组件半选中回显的问题（setCheckedKeys、setChecked）

已于 2022-03-15 21:02:14 修改
阅读量3.5k 收藏 13
点赞数 8
文章标签： vue.js elementui el-tree tree回显
于 2022-03-15 20:53:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cwin8951/article/details/123511718
版权

1、问题如下

当后台返回包含有半选中状态的menu id时；用element 文档的this.$refs.tree.setCheckedKeys(res.data.checkedKeys)此方法无法解决回显问题
在这里插入图片描述
在这里插入图片描述

2、解决办法如下（应该使用setChecked）

在这里插入图片描述

关键代码

res.data.checkedKeys.forEach(val => {
          this.$nextTick(() => {
            this.$refs.tree.setChecked(val, true, false)
          })
        })
        // res.data.checkedKeys:是后台返回选中的id数组

相关文章

基于ElementUi或Antd再次封装基础组件文档

wocwin
关注
使用element-ui的el-tree组件入坑讲解之setCheckedKeys
weixin_33743703的博客
12-03 5万+
1、前提基础 掌握vue、element-ui相关前端知识，若有还没掌握的童鞋可以先去看我的vue全家桶一文：juejin.im/post/5bfe4a…。 2、业务场景描述 假设现在我们有一个人员列表，需要给每个人配置特定的权限来限制哪些人可以干些什么： 3、代码 新建AuthTree.vue页面： <template> <div class="auth_t...
使用el-tree 处理权限树父节点半选和子节点选中获取，及回显父节点不覆盖所以子节点处理
努力飞起的菜鸟
07-18 616
1 获取 父子节点 key 当前 key = id 设置el-tree。2 权限父子关联 又不想父级会显导致 子节点全选处理。
vue3中使用el-tree的setCheckedKeys方法勾选失效回显问题
最新发布
weixin_72439307的博客
09-21 601
el-tree勾选问题
element的tree的半选状态及回显问题解决
m0_66039084的博客
04-06 1149
element的tree的半选状态及回显问题解决
使用element-ui的el-tree组件setCheckedKeys设置无效的解决办法/setCheckedNodes设置不上数据
为写出赏心悦目、容易维护的代码而探索
05-11 7952
使用element-ui的el-tree组件setCheckedKeys设置无效的解决办法/setCheckedNodes设置不上数据。当我们使用el-tree时经常会涉及到回显，有的时候回显失败怎么解决，下面是我常用的两种回显方式。关于el-tree的禁用，你只需要在你想要禁止选择或取消选择的数据里加一个disabled参数。注意：一定要确保树形选择器里的数据先与上方代码获取到。
el-tree设置利用setCheckedNodes/setCheckedKeys默认勾选节点，以及通过setChecked新增勾选指定节点
热门推荐
weixin_43312391的博客
03-30 3万+
实现目标：在生成el-tree时，默认勾选其中某几个选项；或在进行某个选项的选中时，同时勾选上另一个选项。 实现效果： 在生成树结构时，默认勾选其中的两个选项。 在勾选其中一个选项时，另一个选项也被同时勾选。 实现方法： <el-tree :data="data" show-checkbox default-expand-all node-key="id" ref="tree" highlight-current :props="defaultProps"&
element-ui el-tree 设置回显节点半选 解决方案
CN_CKG__KK的博客
07-21 7415
1、element-ui el-tree 设置回显节点半选 解决方案 项目需求：树节点选择添加完后，再次编辑，若节点为全选，则设置为全选。若改节点下未设置全选，父节点设置为半全选 实现原理：利用tree组件渲染后带有的isLeaf(是否为叶子节点)属性，如果为叶子节点就选中。这样利用tree的API就实现了正确的回显效果。并没有过多的逻辑，只是利用tree本身的API 出BUG的概率也不会变高。手动设置node其实和prop的default-checked-keys ，原理是一样的，其实内部也都是循环
Element-ui el-tree新增和删除节点后如何刷新tree的实例
01-21
补充知识：element-ui组件el-tree添加按钮管用，删除按钮，数据会变，但是页面不更新 可能是element-ui 的版本太低了 我用的element-ui 2.4.6 后来发现2.4.11的是管用的 所有更新element-ui版本 cnpm i eleme
element-ui 远程搜索组件el-select在项目中组件化的实现代码
10-15
Element-UI的`el-select`组件是用于创建下拉选择框的，它提供了丰富的功能，包括远程搜索（remote search）。远程搜索在大型数据集或动态获取数据的情况下非常有用，因为它只在用户输入时向服务器请求数据，提高了...
详解element-ui级联菜单（城市三级联动菜单）和回显问题
10-16
在本文中，我们将深入探讨Element-UI框架中的级联菜单（Cascader）组件，特别是在实现城市三级联动菜单以及处理回显问题时所遇到的技术细节。Element-UI是一款基于Vue.js的高质量UI组件库，提供了丰富的组件供开发者...
基于element-ui封装可搜索的懒加载tree组件的实现
10-15
- 尝试使用Element-UI的el-tree组件自带的懒加载方式，但发现存在问题，不能直接展开节点。 - 经过思考，决定采用非懒加载形式，手动控制数据加载时机。 3. **数据格式处理**： - 定义树节点数据格式，每个节点...
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
10-16
在本案例中，我们关注的是如何在使用Element-UI的`el-menu`组件时，确保用户在导航选中后刷新页面时仍能保持当前选中的状态。这涉及到Vue.js的路由管理和组件状态持久化。 `el-menu`是Element-UI中用于创建导航菜单...
element-plus el-tree setCheckedKeys触发check-change事件
hafhcfgjb的博客
11-13 2683
el-tree 显示复选框，父子不互相关联，点击父节点需要setCheckedKeys选中第一级子节点，会调用check-change事件，从而导致孙子节点也会被选中，不符合预期。
element tree组件半节点回显问题
天高任鸟飞
09-02 798
一、需求 keys：[半选节点key+勾选节点key] 通过keys进行tree树回显 节点为全选，则设置为全选。若改节点下未全部勾选，父节点设置为半全选。 样式： keys： keys:[1,4,9] data： data: [{ id: 1, label: '一级 1', children: [{ id: 4, label: '二级 1-1', children: [{ id: 9, label: '三级 1-1-1' },
在useAsynsState中使用el-tree的setCheckedKeys
weixin_48975022的博客
05-30 809
我们知道，一般可以使用checkedNodesKeys来进行树形数据的回显，但是我发现这个方法有个坑，就是你一定要在树形数据回来之前调用，因为如果你在树形数据有了之后调用，那么他就会触发这棵树的check事件，如果你的事件中有push数据等方法，那么就会被调用一次。因此一定要在树形数据回来之前调用这个方法，按我的理解就是，先把keys存起来，等树形数据回来的时候，自然就会渲染上。
elementui的setCheckedKeys方法
前端-黎姿
04-01 1万+
项目中有一个常见的需求，elementui的checkbox的全选全部选的设置，用到了elementui的setCheckedKeys方法 方法：
VUE2 ElementUi Tree 半回显
x_y_c_1的博客
11-20 122
【代码】VUE2 ElementUi Tree 半回显。
解决element-ui u-tree树形组件父节点半勾选回显数据问题
imsopoor的博客
10-12 2633
问题描述：因为e-tree组件默认关闭了check-strictly就严格遵循了父子关联关系，只要父节点勾选上了，全部子节点默认会勾选上。如果接口返回的勾选节点id包括了父节点，其子节点都是会被e-tree默认勾上参考，大致的思路就是动态控制check-strictly，在回显之前开启父子节点互不关联，然后在节点获取到赋值id后再关闭，这样就能实现了 关键代码如下具体文章可移步但是这里也会有bug 就是父节点不会出现半勾选状态。这里就引出第二个。
element tree树状控件，半选回显的坑
qq_38138664的博客
06-22 1161
在角色选择权限菜单的时候，选择一个菜单的某个子集，后端要求，半选的菜单父集code,也要给，那么我们用，回显的时候，有会把半选的父集全部选上，所有一下是我总结的方法。 1.这个方法不好用，我出现报错的情况，不推荐使用，出现问题：getNode为空的，要提前把Tree的data给它，然后在获取node，获取的时候有个小问题，Tree还没渲染完，就去拿肯定拿不到，用$nextTick延迟执行一段代码,也就是渲染完成之后在getNode();就可以拿到啦！ isLeaf（判断节点是否为叶子节点） getNo
element-ui el-cascader 数据回显
10-19
在 element-ui 的 el-cascader 中，可以通过 v-model 绑定选中的值，然后在选中值发生变化时触发 @change 事件，将选中的值保存到数据中，再在初始化时将数据中保存的值赋给 v-model 即可实现数据回显。 具体实现步骤如下： 1. 在 data 中定义一个变量，用于保存选中的值。 ``` data() { return { selectedValue: [] } } ``` 2. 在 el-cascader 中使用 v-model 绑定选中的值，并在 @change 事件中将选中的值保存到 selectedValue 中。 ``` <el-cascader v-model="selectedValue" :options="options" @change="handleChange" ></el-cascader> methods: { handleChange(value) { this.selectedValue = value; } } ``` 3. 在初始化时将 selectedValue 赋给 v-model。 ``` <el-cascader v-model="selectedValue" :options="options" @change="handleChange" ></el-cascader> mounted() { this.selectedValue = [1, 2, 3]; } ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

wocwin

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值