this.$refs.tree.setCheckedKeys()；不管树形数据有没有加载完成都不起作用。

最新推荐文章于 2025-04-27 10:06:20 发布
最新推荐文章于 2025-04-27 10:06:20 发布
阅读量5.6k 收藏 4
点赞数 1
文章标签： vue uni-app treeview elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_42412817/article/details/116534322
版权
在Vue项目中遇到一个问题，使用this.$refs.tree.setCheckedKeys()尝试设置树形数据的选中状态，但无论数据是否加载完成，此方法均未生效。经过排查，发现原因是初始窗口为隐藏状态。解决方法是在窗口显示时再调用该函数，简单的问题却耗费了大量时间。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

项目场景：

			this.$refs.tree.setCheckedKeys();不管树形数据有没有加载完成都不起作用。

问题描述：

在这里插入图片描述
调试到这一步已经完全排除了树形数据没有加载的原因

解决方案：

原来是因为窗口的问题，我这里设置了默认窗口隐藏，
在这里插入图片描述

需要在窗口打开的时候再调用函数就可以了，就是那么简单的问题吞噬了我一下午的时间。

pino-zhang
关注
vue2 - elementUI全国城市列表选择器组件，提供省市区联动选择器、选择地址省市区级联、复选框tree树状省份全部列出来勾选，支持数据懒加载节点动态加载（附带全国省市区县乡镇村json数据）
高级前端工程师
09-22 4345
vue2，element ui，城市选择器，省市区联动选择，Tree树组件列出省名称，全国省份列表，展开下级多级，vue2 elementUI实现省市区选择联动，地区选择器，把所有省份都展示出来，选择多个城市，省市区三级联动选择器，省市区json数据，树结构的城市列表，vue省市区tree树形级联，ElementUI级联和树形省市区，组件tree实现省市多级联动，vue省市区三级联动选择器，选择地址，选择地区，选择多个省市区、批量选择城市，选择当前位置，省市区数据懒加载，动态加载城市数据，插件，地址选择器组
Vue组件(一) - 二次封装ElementUI实现tree树形组件
HUMM
05-31 2212
文章目录功能描述代码base-tree.vue:treeDemo.vue: 功能描述 基础功能同el-tree 代码 base-tree.vue: <!-- * @Description: 公共树组件 * @Author: HMM * @Date: 2021-01-11 16:23:23 * @FilePath: base-tree.vue 变量： expandNode：是否展开所有节点 isShowFilter: 是否需要节点过滤 treeProps: 树形结构配置项 事件： @h
Vue+Element-UI树形控件报错：“TypeError: this.$refs.tree is undefined“
xiaozhuzhuyang的博客
04-13 3150
Vue+Element-UI树形控件报错：“TypeError: this.$refs.tree is undefined” 报错信息： 报错场景： 使用axios发送异步请求获得角色的所有权限： 将权限赋值到一个数组中： 这里我的想法是在弹出会话框前使用 this.$refs.tree.setCheckedKeys(this.functionList); 勾选上角色所有权限 效果图： 解决过程： 一开始我使用的是 ：:default-checked-keys="functionList" 后来
使用element-ui的el-tree组件入坑讲解之setCheckedKeys
热门推荐
weixin_33743703的博客
12-03 5万+
1、前提基础 掌握vue、element-ui相关前端知识，若有还没掌握的童鞋可以先去看我的vue全家桶一文：juejin.im/post/5bfe4a…。 2、业务场景描述 假设现在我们有一个人员列表，需要给每个人配置特定的权限来限制哪些人可以干些什么： 3、代码 新建AuthTree.vue页面： &lt;template&gt; &lt;div class="auth_t...
el-tree中的this.$refs.tree.setChecked
最新发布
m0_67841039的博客
04-27 912
第一种写法需确保node-key="menuId"且数据准确，适合明确配置的场景。因为它不依赖node-key的配置，直接通过节点对象操作，更直观且不易出错。需确保node.menuId存在且与node-key配置一致。此方式不依赖node-key的配置，通用性更强。直接传入节点对象（node），
使用element-ui的el-tree组件setCheckedKeys设置无效的解决办法/setCheckedNodes设置不上数据
为写出赏心悦目、容易维护的代码而探索
05-11 9239
使用element-ui的el-tree组件setCheckedKeys设置无效的解决办法/setCheckedNodes设置不上数据。当我们使用el-tree时经常会涉及到回显，有的时候回显失败怎么解决，下面是我常用的两种回显方式。关于el-tree的禁用，你只需要在你想要禁止选择或取消选择的数据里加一个disabled参数。注意：一定要确保树形选择器里的数据先与上方代码获取到。
el-tree:this.$refs.tree.setCheckedKeys([])清空失败
编写博客，学习交流
03-09 4011
解决 由于弹窗关闭，导致this.$refs.tree.setCheckedKeys([])无效。 此时，需要我们重新获取整个树组件的node，然后将对应的每个选项checked为空。 <el-checkbox v-model="checked" style="margin-left: 20px;" @change="checkAll">全选</el-checkbox> <el-tree ref="tree" style="overflow: auto;
el-tree使用setCheckedKeys清空树节点不生效
qq_40896145的博客
10-13 5535
问题描述： 在切换下拉选框的change事件中使用this.$refs.tree.setCheckedKeys([])清空目标树已选择节点，但不生效。 问题解决 // 清空 clearAllNodes: function() { this.$nextTick(function() { this.$refs.tree.setCheckedKeys([]) }) }, 关键：使用this.$nextTick()在清空所选树节点结束之后执行延迟回调 ..
使用element-ui的el-tree组件setCheckedKeys设置无效的解决办法
CaseyWei
09-29 2万+
例子 1:问题原因： this.$refs.tree.setCheckedKeys(this.defalutArr)，发现使用setCheckedKeys方法无效，换做setChecked方法可以解决 获取数据 解决： if (res.data.code == 200) { //默认选中的树的数据 setTimeout(() =>{ res.data.data.forEach(value => { this.$refs.rootTree.setCheck
15.树形虚拟列表实现（支持10000+以上的数据）el-tree（1万+数据页面卡死）
zifengningyu的博客
06-20 2216
使用vue-easy-tree来实现树形虚拟列表，注意：vue-easy-tree需要设置高度。支持与element-ui完全相同的主题样式更换，提供与element-ui相同的图标供选用。如果不引入样式文件可以不安装（sass-loader以及node-sass）（自己安装的时候失败了，所以选择不引入样式文件）如果使用element-ui的默认属性代码为。
el-tree setcheckedkeys不选中
03-14
在 Vue 的 Element UI 或者 Element Plus 库中的 `el-tree` 组件，`setCheckedKeys` 是用于设置树形结构中哪些节点被选中的方法。如果该方法未能正常工作，可能由以下几个原因引起： #### 原因一：属性绑定错误 ...
Vue.js中ElementUI Tree递归操作文件夹及文件
// 假设这是初始的树形数据结构 ], defaultProps: { children: 'children', label: 'label' } }; }, methods: { // 递归增加节点 addNode(parentKey, newNodeLabel) { let parent = this.findNodeByKey...
el-tree:this.$refs.tree.setCheckedKeys([])后仍有节点被选中
silver577的博客
02-22 1752
加上遍历节点，使checked为空。
el-tree清除节点勾选状态无效
L221545的博客
03-21 1833
el-tree清除节点勾选状态无效
解决 el-tree setChecked 方法偶尔失效的方法
weixin_59685936的博客
10-20 4272
解决 el-tree setChecked 方法偶尔失效的方法
vue的$nextTick使用总结，this.$refs为undefined的解决办法，element Ui的树形控件setCheckedKeys方法无法使用
asdfgh0077的博客
07-30 551
vue的$nextTick使用总结，this.$refs为undefined的解决办法，element Ui的树形控件setCheckedKeys方法无法使用
Vue+element tree使用，当弹窗关闭时，this.$refs.tree.setCheckedKeys([])不能清空选中
易函123
01-28 4248
问题 Vue+element tree使用，当弹窗关闭时，this.$refs.tree.setCheckedKeys([])不能清空选中。 解决 由于弹窗关闭，导致this.$refs.tree.setCheckedKeys([])无效。 此时，需要我们重新获取整个树组件的node，然后将对应的每个选项checked为空。 // 首先获取node let node = this.$refs.tree.getNode(this.data[0].id).parent; // 这里的this.data是指的
vue3中使用el-tree的setCheckedKeys方法勾选失效回显问题
Abao的博客
09-21 1313
el-tree勾选问题
使用el-tree问题之清空勾数据不生效
m0_52244931的博客
10-24 1540
她又说：那你清空肯定不行呀，还是要调用这棵树本身的清空方法，因为那个只是默认展示的数据，再次点击，组件缓存了，当然组件选中的子节点也缓存了，所以你还是得调用tree本身的清空方法进行清空。、紧接着点击角色2的权限按钮，给角色2分配修改权限数据（后三行是之前设置的 此刻回显的数据） 但是 当我点击角色2的权限按钮，弹出弹框时，角色1的数据 也渲染到树形结构上了。、此时我更多考虑的是 无非就是 无赋值时未清空上一次的数据 ，所以我接下来在 能初始化 数据的地方都设置了 如下代码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值