关于element中el-cascader懒加载数据回显不上的bug

最近在项目开发中由于业务需求用到了el-cascader,刚开始用时很顺利、很快乐;但是等数据保存完修改要回显时,问题就来了,一个头两个大,下面就来说说具体的问题以及解决的办法;欢迎大佬指正,提出意见见解......

  • 用法

这里就讲一下props的leaf属性:就是定义一个树行isLeaf,isLeaf等于true就是末级,就不会有后面的箭头;

  • 代码示例 懒加载获取数据

  • 问题描述:

    当页面刚开始第一次打开弹框,回显是没有问题的,然后关了弹框,再次打开回显就回显不上(只要不是第一次,后面都回显不上)

这里可以看到带一次弹框打开时this. r e f s . c a s c a d e r 是 u n d e f i n e d ;后面在关闭时 t h i s . refs.cascader是undefined;后面在关闭时this. refs.cascader是undefined;后面在关闭时this.refs.cascader这个dom还是在的;后面弹框再打开回显应该不是回显的对应的这个dom上,我这里猜测每次应该是回显的dom不一样才会导致回显会不显示。大佬觉得这里有讲的部队的地方欢迎指正。

  • 解决办法

    直接给这个表单加一个v-if,如图:

  • 注意点

    我们在回显数据时先拿到第一级的数据,然后在拿第二级的数据的时候,options配置的懒加载数据给children赋值的时候,我们要用this.$set,不然回显也不会显示,如图:

  • 结尾

    文章写的略显粗糙,有不好的地方欢迎大佬指点。谢谢各位大佬!!!!

相关推荐
小码过河.19 分钟前
oceanbase中zone和observer、分区表之间关系
前端·数据库·oceanbase
平头哥技术团队2 小时前
Day 16 | 用 ul、ol、li 一个标签,把散资料收成有序的技能清单页
开发语言·前端·html·html5
代码青铜z2 小时前
不会写代码做小程序,模板开发和AI 编程靠谱吗?创业前先看这 5 件事
前端
小傅哥2 小时前
Java + DDD,1:1 复刻 Deepseek Harness 项目
前端·后端·ai编程
积硅步致千里2 小时前
Word 里的 .wmf 其实是 EMF:一次 metafile 转 PNG 排障
前端·后端
mayaairi2 小时前
Vue2 组件通讯(二):ref、自定义事件与provide/inject实战
前端·javascript·vue.js
开开心心就好2 小时前
PDF图片去水印软件,支持批量处理页面
前端·javascript·人工智能·智能手机·pdf·语音识别
爱敲代码的小杨.2 小时前
【Spring】Spring Web MVC
前端·spring·mvc
是立不是利3 小时前
深入理解JavaScript事件委托
开发语言·前端·javascript
晴天163 小时前
React 版本迭代解析:从15到19 核心差异-Day40
前端·react.js·前端框架