首页 > 其他分享 >el-cascader组件懒加载动态回显问题

el-cascader组件懒加载动态回显问题

时间:2022-12-15 15:44:40浏览次数:60  
标签:el 回显 问题 组件 cascader 加载

Cascader 是element ui 的一类级联选择器组件,当一个数据集合有清晰的层级结构时,就可以使用它展示层级结构。尤其,当数据比较多时,全部获取数据速度太慢,体验不太好,可改为懒加载,一级一级地选择,就能很好避免速度慢的问题。但是,动态懒加载数据时,回显容易出现问题。

 

以下就是项目中遇到的el-cascader组件动态懒加载数据,引发的一个回显问题的实例,如下图:(新增弹窗 和 修改弹窗)

注释:有新增和修改的需求。新增时没有问题,修改时回显偶尔为空。

 

问题分析:引发回显不出来的原因有两个:

第一,修改回填组件value时,回填的数据类型与列表中对应项的属性数据类型不一致;

第二,手动赋值二级列表数据时,列表数据没有及时更新到视图层;导致即使组件的value值没问题也回显不出来;

 

具体地,如下图展示:

(1)组件和懒加载方法配置

(2)修改时,回填 el-cascader组件value值

注意:下图红色标注的地方

注意:一些多层数据的更新,比如动态表格中的表单数据的回显问题,运用此法也可以从根本上修复问题;

 

其实,看过一些其他人写的博客,他们推荐对 el-cascader组件进行隐藏-显示进行切换,或者 修改组件绑定的key值,来达到对组件数据的一个即时更新。

或许,这样子能解决一些人的问题吧,但个人感觉有点勉强!

 

好了,就这样子了。

 

标签:el,回显,问题,组件,cascader,加载
From: https://www.cnblogs.com/bky419/p/16985162.html

相关文章

  • opencl 学习kernel,work_item和workgroup,工作组,工作项的理解
    https://zhuanlan.zhihu.com/p/558573914https://www.cnblogs.com/biglucky/p/3755189.html转载自:http://www.cmnsoft.com/wordpress/?p=1429前几节我们一起学习了几个......
  • Shell 标准输入和输出
    无论是要交给程序处理的数据,还是控制脚本的简单命令,都少不了输入和输出。程序要做的第一件事就是处理如同一阴一阳的“输入与输出”。1、从文件获取输入当我们希望向文件......
  • Intelli idea 常用快捷键汇总
    Tonavigatetotheimplementation(s)ofanabstractmethod,positionthecaretatitsusageoritsnameinthedeclarationandpressCtrl+Alt+B. UseCtrl+Jto......
  • element-ui 文件上传多个
      <template><div><el-uploadref="upload":action="action":limit="5":file-list="fileList":on-exceed="handleExcee......
  • Shell 标准输入和输出
    无论是要交给程序处理的数据,还是控制脚本的简单命令,都少不了输入和输出。程序要做的第一件事就是处理如同一阴一阳的“输入与输出”。1、从文件获取输入当我们希望向文......
  • ELK介绍说明
    介绍ELK是由Elasticsearch、Logstash、Kibana三个开源软件的组成的一个组合体,ELK是elastic公司研发的一套完整的日志收集、分析和展示的企业级解决方案,在这三个软......
  • 18、electron报SyntaxError: Unexpected token 'export'
    写了个脚本,导出的时候报SyntaxError:Unexpectedtoken'export'  查一下发现是Node的导入导出规范跟浏览器ES6不太一样  将导出由export{   xxx}改成......
  • elment-ui 文件上传
      <template><div><el-uploadref="upload":action="action":limit="1":file-list="fileList":on-exceed="handleExcee......
  • 安装Elasticsearch和插件
    说明:es7版本以后,软件包的有带和不带jdk版本,都需要配置环境变量,有jdk版本路径:/usr/share/elasticsearch/jdk无jdk版本:需要配置环境变量。1.安装JDKopenjdk安......
  • [Java SE/JDK]Intellij IDEA中设置JDK版本
    1IntellijIDEA修改JDK版本第1步:配置JDK环境变量装好JDK之后,要添加一个环境变量:JAVA_HOME第2步:修改Idea配置由Maven决定的版本<build><plugins><p......