element Plus el-tree-select load 懒加载时数据不回显问题

最新推荐文章于 2024-03-25 20:47:27 发布
最新推荐文章于 2024-03-25 20:47:27 发布
阅读量1.9k 收藏
点赞数
分类专栏： vue3+ts element plus 文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/byking818/article/details/130107046
版权

element Plus el-tree-select load 懒加载时数据不回显问题（首先数据是能打印出来的 只是视图没有更新）

1、你的绑定的数据一定要时ref 或者reactive 如果不是请转到vue3官方文档

在这里插入图片描述
在这里插入图片描述

因为初始化的时候load只加载一次 所以数据请求到了 但是试图并没有更新 不论你用nextTick还是watch都不管用，因为你数据已经有了，查了很多资料才发现 没更新视图是因为load懒加载的问题，

划重点 为了让他重新执行load 用v-if来盘他，然后就会发现它解决了解决了

无名小码农
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
基于element ui 二次封装的el-tree组件，支持懒加载数据，多选和单选，以tag方式回显输入框中，支持删除tag
01-24
树形下拉选择组件，下拉框展示树形结构，提供选择某节点功能 基于element ui 二次封装的el-tree组件，支持懒加载数据，多选和单选，以tag方式回显输入框中，支持删除tag，提供调用组件示例代码
解决element ui select下拉框不回显数据问题的解决
10-17
主要介绍了解决element ui select下拉框不回显数据问题的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Element Plus + Vue3 踩坑 -- el-Table树形数据懒加载新增、编辑、删除子集不实时刷新问题
最新发布
weixin_42560976的博客
03-25 845
问题一、设置 Table 的 lazy 属性为 true 与加载函数 load，可实现懒加载树形数据。但在展开子集后新增、编辑、删除，却不实时更新数据。问题二、解决以上问题后，发现当子集只剩一条数据时，删除这条数据依旧不触发数据刷新。
el-select数据过多懒加载的解决(loadmore)
10-16
主要介绍了el-select数据过多懒加载的解决(loadmore)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
【vue】解决el-tree或el-table中树形列表懒加载数据改变后不能实时刷新问题以及使用
前端代码小白的日常博客
06-25 5459
首先从map中取出刚刚架子啊过子级节点的数据，再用this.$set清空对应父节点的数据，实现视图实时刷新，再通过取出的数据重新加载父节点。//封装一个增删改刷新table数据的方法,组件懒加载数据的节点，data return的maps，及被操作节点的父节点。在使用el-table表格懒加载子级数据，懒加载仅会在第一次展开时加载，后续会使用第一次缓存的数据，而不会重新加载。传入的三个参数分别是：组件懒加载数据的节点，存储的maps数据，被操作节点的。// 保存本次的展开或折叠状态，用于下次判断。
Element组件tree懒加载回显问题
qq_34631220的博客
06-10 886
Element组件tree懒加载回显问题
使用Vscode写了前端是用来el-tree来做树形控件但是页面不显示数据
qq_39965077的博客
05-26 403
使用Vscode写了前端不显示树形控件
element tree树形结构接口不支持搜索、懒加载情况下实现搜索
xt_XiTu的博客
12-08 1226
目前项目中，element tree树形结构由于数据太多使用了懒加载，并且接口不支持搜索，只能由前端实现搜索功能，暂时按照自己思路实现功能。 思路为：输入搜索内容后，直接遍历树形结构的数据，通过filter筛选出结果之后再赋值给树形结构。 demo中是三层树形结构的筛选 代码为： template中： ...
vue懒加载数据，数据回显时还未加载，只显示Id不显示名称label问题解决办法
qq_40529904的博客
11-17 3788
使用了懒加载方式解决了el-select 下拉框数据量过大导致页面卡顿的问题，但是又会出现另外一个问题，就是当数据回显时，数据还没加载，下拉框只会回显Id值，不会显示名称label值。 针对这个问题，我的解决办法是获取回显的那个值，将这条数据塞到下拉框数组里面。 先获取到回显页面的值，将这个值去后台查询出来，然后插入到v-if 的 循环数组里面 然后这个是懒加载的方法往数组里面添值的，第一个方法要在这个方法前插入到数组，最好这样。 这样解决完这个问题了。 。。。。。。。。。。。。。。。 但是随之而来又
mvc 路由增加文件夹名_vue路由及组件
weixin_39724004的博客
11-23 277
继续搞Vuejs的前端，在之前我已经在Windows系统上配置好了一个初始的vue-cli页面，目前我需要做的工作，就是开始写代码，学习增删页面，加入输入框按钮什么的。另外希望能尽快学会如何通过API取数据，感觉上，能学会这些东西，就能达到一项技术2/8原则里边那个8了。为了实现这个目的，我上网看了一系列的博客教程，照着抄了很多代码，最后都没办法用。我怀疑原因可能是大家用的版本不一样，感觉上Vue...
基于element-ui封装可搜索的懒加载tree组件的实现
10-15
主要介绍了基于element-ui封装可搜索的懒加载tree组件的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
10-17
主要介绍了详解如何实现Element树形控件Tree在懒加载模式下的动态更新，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
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
【Vue】el-select 数据回显不显示名称，只显示value不显示lable 下拉框不显不lable
guochanof的专栏
08-15 1722
el-select 数据回显不显示名称，只显示value不显示lable 下拉框不显不lable
elementui-plus el-tree组件数据不显示问题解决
fury的博客
11-07 1666
对比以后发现是template中的#default='{data}'没有写大括号导致的。注意看右侧的树是没有文字的,数据已经渲染,个数是对的,但就是没有文字,
element树形数据与懒加载失效
qq_38062838的博客
10-03 776
element树形数据与懒加载失效
Tree树形控件做权限时，保持选项联动的同时，解决数据无法回显的问题
qq_34082921的博客
07-02 608
要求树形控件要有父子联动，也就是选择父级选项，子级也要选中，那么属性就不能设置死,我的是,在data中赋值有变量。我之前设置check-strictly，就没了联动效果，所以这边做了一下处理。
如何解决由于动态数据导致el-select下拉组件无法回显数据的问题
riluokk的博客
01-09 1737
问题：如何解决由于动态数据导致el-select下拉组件无法回显数据的问题 解决方案： 使用el-select的修改回调事件，及change事件，在change事件使用一次深拷贝即可实现回显。 代码如下： changeValue() { this.standardForm2 = JSON.parse(JSON.stringify(this.standardForm2)); } 问题原因：可能由于数据层级太多的问题，或许是因为原本的form不存在改绑定的值，通过深拷贝复制一次就可以了 ...
element-ui el-select组件数据回显时只显示value值,不显示label值
Ru_yin_hai的博客
03-29 3268
问题排查思路: select数据回显是一个类似于Map结构的数据类型 key就是我们的value value是我们label 当key不匹配时,则找不到label,就会按照key进行显示 一般出现此问题有两种情况 1:el-select所引用的数组对象确实没有改key值 2:key值类型不匹配,回显时可能是字符,但是数组内是数值类型,也会导致不匹配 解决: 此问题是由key值类型不匹配所导致的 ...
el-tree懒加载数据回显
08-25
在el-tree懒加载模式下，想要实现数据回显，需要注意几个方面。首先，需要在组件刚渲染的时候，就构造想要的树节点，可以通过设置default-expanded-keys属性来表示默认展开节点的key数组。这样el-tree-select会按照这个keys数组自动调用loadNode方法，获取数据并渲染树节点。 其次，需要在代码中处理数据回显的逻辑。可以通过在change事件中获取已勾选的节点，并将其对应的key保存到一个数组中，最后将这个数组传给后端。例如，在hChangeTree方法中，可以通过this.$refs.tree.getCheckedNodes()获取已勾选的节点，然后循环遍历这些节点，将它们的entityId保存到一个数组中，最后使用vuex的commit方法将这个数组保存起来。这样就实现了数据的回显功能。 总之，要实现el-tree懒加载数据的回显，需要在组件渲染时构建想要的树节点，并在代码中处理数据回显的逻辑。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Element Plus的el-tree-select组件，懒加载 + 数据回显](https://blog.csdn.net/qq_38118138/article/details/126659253)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [详解如何实现Element树形控件Tree在懒加载模式下的动态更新](https://download.csdn.net/download/weixin_38609571/12943439)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [el-tree懒加载回显数据](https://blog.csdn.net/qq_30351747/article/details/123640964)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

无名小码农

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

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

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

打赏作者

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

抵扣说明：

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

余额充值