关于vue里elementui组件的级联选择器cascader回显懒加载重载问题

3,081 阅读2分钟

饿了么的级联选择有时候需要通过后台动态返回选择器的项,调用props里面的懒加载函数

image.png 通过懒加载动态加载级联的选项,比如省/市/区,

但是在回显的时候需要对已经选好的数据回显会有麻烦,比如回显第一条(湖北/武汉)成功,回显第二条(广东广州)时,区的条目没有重新加载,

   <el-cascader v-if="showca" :props="props" v-model="dataModel" ref='cascader'></el-cascader>

这里通过v-if=showca控制el的生存状态,

that.showca=false
that.addRuleForm.roomData = roomArr;
            setTimeout(() => {
              that.showca=true
       }, 10);

先将showca置为false然后置为true 就会重新调用lazyload重载函数 ,

selectLazyLoad:function(node,resolve){//楼栋懒加载
       var that = this
 
     const { level } = node;

      console.log(node)
      if(node.level == 0){//加载楼栋
      
                  
           that.loadProvince().then(res=>{//比如这是加载省份
                                   
					const nodes = res.data.data
                                .map(item => ({
                                      value: item.id,
                                      label: item.name,
                                      leaf: level >= 2
                                 }));
               
                  // 通过调用resolve将子节点数据返回,通知组件数据加载完成
                 resolve(nodes);
                                          
                                  
              }).catch(rej=>{
                 
               })
        }

       if(node.level == 1){
             var id=''
             if(that.diaFlag){//这里是判断是不是回显模式 如果是回显模式需要下面的参数
                                 
                 id = node.data.value
             }
             else{
                                      
               id = that.addRuleForm.roomData[0]//回显用的省份参数
             }
                                
                            
             that.loadingCity(id).then(res=>{//比如这是加载城市id是回显用的也可能是正常选择的
               const nodes = res.data.data
                 .map(item => ({
                    value: item.id,
                   	label: item.name,
                    leaf: level >= 2
                  }));
                 // 通过调用resolve将子节点数据返回,通知组件数据加载完成
              resolve(nodes);
                                  
           }).catch(rej=>{
                                       
           })
                        
       }

       if(node.level == 2){
             var id=''
             if(that.diaFlag){//同样 判断是否回显模式
                         
             id = node.data.value
            }
            else{//编辑模式
                 id = that.addRuleForm.roomData[1]
            }
                             
             that.loadingArea(id).then(res=>{//比如这里是加载地区 用之前节点选好的城市id来加载地区
                                    
                    const nodes = res.data.data
                              .map(item => ({
                                       value: item.room,
                                       label: item.room,
                                       leaf: level >= 2
                          		}));
                    // 通过调用resolve将子节点数据返回,通知组件数据加载完成
                     resolve(nodes);
            		setTimeout(() => {
                       that.diaFlag = true
                    }, 500);
                    //在回显模式完成后一定要取消回显模式的flag,因为可能会重新选择级联选项 重新加载子节点
                                     
               }).catch(rej=>{
                     setTimeout(() => {
                          that.diaFlag = true
                     }, 500);
                                     
               })                     
      	}
        
      },

在Data里

props: {
          lazy: true,
          
          lazyLoad (node, resolve) {
              that.selectLazyLoad(node,resolve)
              //这是上面写在methods里面的懒加载函数
          }
        }

这样子就能对cascader级联选择器进行回显的重载了,先将级联选择器的flag置为false在置为true