记录一次解决element中Cascader 级联选择器懒加载实现城市联动不能返显的问题

最新推荐文章于 2024-08-09 16:46:16 发布
最新推荐文章于 2024-08-09 16:46:16 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： element 解决问题记录 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39183005/article/details/111190560
版权
本文记录了解决Vue组件Cascader在懒加载模式下，城市联动数据无法正确返显的问题。问题源于详情接口数据与级联组件调用接口的异步顺序。解决方案是通过监听formObj.cityList数组变化，动态更新组件key，触发组件重新渲染，确保数据同步。
摘要由CSDN通过智能技术生成

这里先描述一下出现问题过程：

1、要做数据的增删改查，在数据编辑的时候是从右侧打开抽屉中显示form表单，我将抽屉封装成了一个组件单独抽离。就需要在父组件中将
:visible.sync="dialogVisible"绑定的dialogVisible置为true，然后在抽屉事件的open中调编辑详情接口，级联组件懒加载自动执行城市联动接口。

2、再说一下懒加载中城市返显要必备的条件：组件绑定的cityList是个数组，并且里面有城市id，例如：北京市 北京城区 东城区 要想返显这个数据则绑定的数组中是[1,2,3]，这样级联组件才可以用这个数据去调接口拿返显的数据

<el-cascader v-model="formObj.cityList" :props="casProps" style="width: 100%" :key="flag"></el-cascader>

3、现在出现返显的原因是：在级联组件执行调接口时候，详情接口还没有返回formObj.cityList这个数据，导致这个formObj.cityList数组是空，所以城市不能返显成功

接下来看一下没有返显成功的原因


                

                
                
        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  hanting0220
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
vue3 - element-plus组件库el-cascader级联选择器，“动态数据懒加载+回显/编辑时自动选中对应节点“ 问题，多选复选框、单选框级联选择器如何让数据回显？数据是动态加载回显咋办

				
			

			

				

					高级前端工程师
				

				

					06-28
					
					2001
					
				

			

		

		

			
				
elementPlus，vue3，element plus el-cascader 回显，级联选择器，回显，懒加载，el-cascader 动态加载选项、编辑时数据回显问题 、单选不加载下一级节点，级联选择器动态懒加载以及回显，解决el-cascader回显失败问题，三级联动数据回显，省市区回显，el-cascader 动态加载，编辑时数据回显，Element-plus Cascader级联选择器动态加载模式下数据回显时的问题，el-cascader列表是动态的怎么回显，赋值后，不回显怎么办，数据还没加载怎

			
		

	



                

              
                



	

		

			

				
					
java place inner holder 懒加载_读书笔记：多线程下的懒加载问题

				
			

			

				

					weixin_42657024的博客
				

				

					02-24
					
					157
					
				

			

		

		

			
				
最近看完了《Java并发编程的艺术》一书，差不多看明白了，做了很多的笔记，也敲完了书本上的所有代码。但是看完书本再合起来一想，就老是觉得什么都没学到，我觉得这是因为我只是在看书的当时理解了书上的内容，但是离把书本上的知识转化为我的知识储备这一过程还是没有做到，所以把自己的一些笔记整理成博文，本人的水准有限，还是希望被指出错误。在Java多线程程序中，有时候需要采用延迟初始化来降低初始化类和创建对象...

			
		

	



                


  
              

                


	

		

			

				
					
【前端疑难杂症bug——el-cascader手动设置值、页面不回显bug】

					
最新发布

				
			

			

				

					爪爪爪爪哇的博客
				

				

					08-09
					
					491
					
				

			

		

		

			
				
使用el-cascader级联选择器，选择器之外有快速选择的功能。

			
		

	





	

		

			

				
					
element 级联选择器懒加载回显

				
			

			

				

					qq_31970227的博客
				

				

					11-04
					
					5165
					
				

			

		

		

			
				
element 级联选择器懒加载



			
		

	



		

			
		



	

		

			

				
					
el-cascader回显失败；el-cascader回显不出来

				
			

			

				

					i_am_a_div的博客
				

				

					06-30
					
					5968
					
				

			

		

		

			
				
el-cascader回显失败；el-cascader回显不出来

			
		

	





	

		

			

				
					
elementui的Cascader 级联选择器，在懒加载的时候数据无法回显的解决办法

				
			

			

				

					qq_34157798的博客
				

				

					03-04
					
					3302
					
				

			

		

		

			
				
出现这种情况，一般是数据还没有加载完，就给Cascader 级联选择器赋值，导致无法找到数据。


<el-cascader style="width: 100%"
             placeholder="请选择区域"
             :props="props"
             v-model="value"
/>
...

			
		

	





	

		

			

				
					
el-cascader组件懒加载从服务器拉取数据 以优化性能

				
			

			

				

					qq_39246667的博客
				

				

					08-16
					
					1558
					
				

			

		

		

			
				
这几天在工作中遇到一个场景：
在项目中，我需要发送请求从后台拉取所有的部门列表作为下拉框的一级菜单，然后需要根据每一个部门的id从后台获取每个部门的所有人员列表。如下图:

乍一看，好像这个需求很容易实现，我只需要在获取每一个部门列表的请求中去拿到id然后在发请求给后台拿到所有的人员列表，并通过一系列数据结构的处理使之成为满足el-cascader要求的结构，如下
//Cascader.vue
<template>
    <el-cascader 
	    :options="depa

			
		

	





	

		

			

				
					
element Cascader级联选择器 数据懒加载回填实践

				
			

			

				

					qq_39373940的博客
				

				

					03-24
					
					1302
					
				

			

		

		

			
				
当前使用element版本2.15.1

			
		

	





	

		

			

				
					
关于Cascader组件编辑回显问题（关于地区的级联选择器）（elementUI踩坑）

				
			

			

				

					上官师哥
				

				

					08-13
					
					2969
					
				

			

		

		

			
				
关于elementUI Cascader组件编辑回显问题

			
		

	





	

		

			

				
					
其实巨简单 el-cascader动态加载回显的解决办法 省市区三级联动回显 el-cascader实现省市区县地区数据的动态加载和回显

				
			

			

				

					暂时还没想好博客简介
				

				

					11-14
					
					1943
					
				

			

		

		

			
				
el-cascader动态加载回显的解决办法 省市区三级联动回显
el-cascader实现省市区县地区数据的回显

			
		

	





	

		

			

				
					
el-cascader回显只选中不显示的问题

				
			

			

				

					mkbird的博客
				

				

					06-30
					
					3948
					
				

			

		

		

			
				
先看代码
因为el-cascader的v-model绑定的必须是数组所以在我点击对应页面发起请求的时候，将需要的值push到cityCascader中
此时就会出现标题的问题，我的cityCascader的数据是符合要求的，但是级联选择框没有默认数据，只有默认选中解决方法是，不使用数组的push方法，而是直接重新赋值
此时就可以默认显示啦...

			
		

	





	

		

			

				
					
Vue Element的el-Cascader 五级省市区联动 lazy开启动态加载，数据回显问题

				
			

			

				

					疑问 搜索 动手 解决 记录
				

				

					04-08
					
					4807
					
				

			

		

		

			
				
效果图

子组件
<template>
  <el-cascader
    v-if="isShowInfo"
    :props="props"
    v-model="selectedValue"
    placeholder="请选择省市区"
    @change="handleChange"
  ></el-cascader>
</template>
<script>
import { getRegion } from '@/ap

			
		

	





	

		

			

				
					
elementui  el-cascader  异步加载及防止重复加载

					
热门推荐

				
			

			

				

					ccy的博客
				

				

					08-06
					
					1万+
					
				

			

		

		

			
				

  使用el-cascader当数据量过大时，推荐使用异步加载机制，异步加载的好处也不用多说，当异步加载时，可能相同操作会重复从后台读取资源，占用资源不说，也对不起异步的初衷，其实很简单，判断绑定options是否加载过即可；




change-on-select差异


  在做项目的过程中，el-cascader的使用有两种情况，一种是只能选择到最后一级，一种是可以选择任何一级，即cha...

			
		

	





	

		

			

				
					
修复element ui级联懒加载问题，二次封装成el-cascader-plus

				
			

			

				

					迪拉克之海
				

				

					02-22
					
					1116
					
				

			

		

		

			
				
el-cascader-plus

经常碰到懒加载不回显的问题，使用起来很不方便，于是花了些时间二次开发了这个组件，下次遇到同样问题就能直接解决，在此开源出来，希望对遇到相同问题的人有帮助。开源互助使程序的世界更美好！


el-cascader-plus基于 element-ui 级联二次封装，弥补了原 element-ui 级联组件懒加载经常无法回显的不足，用法与原级联组件一致。


使用前请确保安装了 vue 和 element ui （或者已单独按需引入 element ui 的级联 Cascade

			
		

	





	

		

			

				
					
cascader 动态加载 回显_Vue（二十八）el-cascader 动态加载 - 省市区组件

				
			

			

				

					weixin_39568889的博客
				

				

					12-21
					
					431
					
				

			

		

		

			
				
v-model="selectedOptions"placeholder="请选择省市区":options="cascaderData"@active-item-change="handleItemChange":props="{value: 'id',label: 'name',children: 'cities'}">exportdefault{name:'my-provinces',d...

			
		

	





	

		

			

				
					
uniapp 异步加载级联选择器（Cascader，data-picke）

				
			

			

				

					每天都要努力学习哦~~
				

				

					05-02
					
					2511
					
				

			

		

		

			
				
由于uniapp uni-ui的data-picke 不支持异步作者自己写了一个 插件市场下载使用插件市场地址。

			
		

	





	

		

			

				
					
vue手机端，纯前端实现滚动懒加载，分页加载数据

				
			

			

				

					银鞍照白马的博客
				

				

					08-21
					
					3174
					
				

			

		

		

			
				
最近做的一个项目，后端的接口由于某种的原因，一次性把所有的列表数据全部返回给前端了。所以需要前端做个滚动懒加载的功能，并把数据做个拦截处理。效果如下图所示：


因为我的框架用得是：http://mint-ui.github.io/docs/#/zh-cn2/infinite-scroll
html部分
 <div
   class="progress_list"
   v-infinite-scroll="loadMore"
   infinite-scroll-disabled="loading"

			
		

	





	

		

			

				
					
vue项目 element-ui 级联选择器 el-cascader 回显的完美解决

				
			

			

				

					05-12
				

			

		

		

			
				
对于 Element UI 的级联选择器 el-cascader，如果需要回显已经选中的值，可以通过设置 v-model 和 :options 属性来实现。  假设有一个三级联动的级联选择器，选项数据如下：  ``` options: [{  value: 'zhinan',  ...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值