关于uniapp省市区三级联动选择器

Lyn1421

已于 2023-08-17 10:37:28 修改

阅读量1.5k

点赞数

文章标签： uni-app 前端小程序

于 2023-04-28 15:21:01 首次发布

本文链接：https://blog.youkuaiyun.com/Lyn1421/article/details/130426865

版权

文章详细描述了在使用DCloud的省市区三级联动选择器时遇到的问题，包括regionId超过六位数时的回显失败以及在选择省市区时自动选择到第1位的错误。作者提供了修正方法，包括修改handleDefaultRegion函数的逻辑以及handleColumnChange事件处理，以确保正确回显和选择行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用的是省市区三级联动选择器（支持APP、H5、小程序） - DCloud 插件市场

1.回显时regionId超过六位数时回显失败

改正方法:

handleDefaultRegion(region){
				// console.log(region,"region")
                const isCode = !Array.isArray(region)
                this.isInitMultiArray = false;
                let children = this.CHINA_REGIONS;
				let num =0;
                for(let i=0;i<3;i++){
                    for(let j=0;j<children.length;j++){
						let condition;
						if(i==2){
							 condition = isCode?String(children[j].code).slice(0)==region.slice(0):children[j].name.includes(region[i]);
							// console.log(String(children[j].code).slice(0),region.slice(0))
						}else{
							 condition = isCode?String(children[j].code).slice(0,(i+1)*2)==region.slice(0,(i+1)*2):children[j].name.includes(region[i]);
							// console.log(String(children[j].code).slice(0,(i+1)*2)==region.slice(0,(i+1)*2))
							// console.log(String(children[j].code).slice(0,(i+1)*2),region.slice(0,(i+1)*2))
						}
						
					   if(condition){
							num++;
                           // 匹配成功进行赋值
                           // console.log(i,j,children.length-1);
                           // children = children[j].childs;
						   
						   
						   if(children[j].childs&&children[j].childs.length>0){
							   children = children[j].childs;
						   }else{ 
								let arr = [];
								arr.push(children[j]);
								children =arr;
						   }
						  
                           if(i==0){
                               this.cityArr = children 
							   
                           }else if(i==1){
                               this.districtArr = children 
                           }
						  
                           this.$set(this.multiIndex,i,j)
                          
                           break;
                       }else{
                           // 首次匹配失败就用默认的初始化
                           // console.log(i,j,children.length-1,"匹配失败");
                           if(i==0 && j==(children.length-1)){
                               this.isInitMultiArray = true;
							   this.multiIndex = [0,0,0]
							   this.$emit('failreagion');
                           }
						   // this.$emit('failreagion')
                       }
                    }
                }
				
				if(num == 3){
					let address = [this.CHINA_REGIONS[this.multiIndex[0]],this.cityArr[this.multiIndex[1]],this.districtArr[this.multiIndex[2]]];
					this.$emit('getRegion',address)
				}else{
					this.$emit('failureRegion')
					this.multiIndex = [0,0,0]
					this.isInitMultiArray = true;
					
				}
				
				
				
				
            }

其次在defaultRegion的监听里把那个region.length==6删掉，把判断条件判断if(region)；

2:选择省的时候，市，区自动选择到第1位。选择市时，区自动选到第1位;

handleColumnChange(e){
                // console.log(e);
                this.isInitMultiArray = false;
                const that = this;
                let col = e.detail.column;
                let row = e.detail.value;
                that.multiIndex[col] = row;
                try{
                    switch(col){
                        case 0:
							that.multiIndex[1]=0;
							that.multiIndex[2]=0;
                            if(CHINA_REGIONS[that.multiIndex[0]].childs.length==0){		
                                that.cityArr = that.districtArr = [CHINA_REGIONS[that.multiIndex[0]]]
                                break;
                            }
                            that.cityArr = CHINA_REGIONS[that.multiIndex[0]].childs
                            that.districtArr = CHINA_REGIONS[that.multiIndex[0]].childs[that.multiIndex[1]].childs
                            break;
                        case 1:
							that.multiIndex[2]=0;
                            that.districtArr = CHINA_REGIONS[that.multiIndex[0]].childs[that.multiIndex[1]].childs
                            break;
                        case 2:
                            break;
                    }
                }catch(e){
                    // console.log(e);
                    that.districtArr = CHINA_REGIONS[that.multiIndex[0]].childs[0].childs
                }
                
            },

欢迎指正