uniapp picker实现：市区镇村4级懒加载

使用这种方法的原因：

• 市区镇村4级数据太大，后台接口响应时间太长

方法实现：

• 样式
  

• view

      <view class="inputbox clearfix outbox" @click="showTrue">
        <text class="fl lefttxt">所在地区</text>
		<picker mode="multiSelector" :range="mulSelect" :range-key="'deptName'" @change="pickerChange" @columnchange="colChange">
			<view :class="{active:isActive}" v-if="!address">
				<u--input fontSize="12px" class="fl oneinput" suffixIcon="arrow-down" suffixIconStyle="color: #3CB261"
				v-model="userInfo.address" disabled placeholder="请选择" border="none"></u--input>
			</view>
			<view v-else style="font-size:12px;">{{address}}</view>
		</picker>
      </view>

• data

  data() {
      return {
		province: [], //省数组
		city: [], //市数组
		district: [], //区数组
		street: [], //街道数组
		mulSelect: [], //四级联动显示数组，该数组的值为[[province],[city],[district],[street]]
		provinceId: 0, //省的id
		cityId: 0, //市的id
		districtId: 0,//区的id
		isActive:false,
		address:'',
      }
 }

• methods

    onLoad(options) {
		this.getProvince();
    },
    methods: {
        colChange(e) {
			switch (e.detail.column){
				case 0://选择市
					this.provinceId=this.mulSelect[0][e.detail.value].deptId;
					// 获取对应的 区县
					getCountyListByCityApi({deptId:this.provinceId}).then(res=>{
						if(res.code == 200){
							this.city = res.data;
							this.mulSelect[1]=this.city;
							// 获取对应的乡镇
							getCountyListByCityApi({deptId:this.city[0].deptId}).then(res=>{
								if(res.code == 200){
									this.district = res.data;
									this.mulSelect[2]=this.district;
									// 获取对应的村
									getCountyListByCityApi({deptId:this.district[0].deptId}).then(res=>{
										if(res.code == 200){
											this.street = res.data;
											this.mulSelect[3]=this.street;
										}
									})
								}
							})
						}
					})
					break;
				case 1://选择区县
					this.cityId=this.mulSelect[1][e.detail.value].deptId;
					// 获取对应的乡镇
					getCountyListByCityApi({deptId:this.cityId}).then(res=>{
						if(res.code == 200){
							this.district = res.data;
							this.mulSelect[2]=this.district;
							// 获取对应的村
							getCountyListByCityApi({deptId:this.district[0].deptId}).then(res=>{
								if(res.code == 200){
									this.street = res.data;
									this.mulSelect[3]=this.street;
									
								}
							})
						}
					})
					break;
				case 2://选择镇
					this.districtId=this.mulSelect[2][e.detail.value].deptId;
					getCountyListByCityApi({deptId:this.districtId}).then(res=>{
						if(res.code == 200){
							this.street = res.data;
							this.mulSelect[3]=this.street;
						}
					});
					break;
				case 3://选择街道
					break;
				default:
					break;
			}
		},
        pickerChange(e) {
			//什么都不选的话，e.detail.value的值为[null,null,null,null]
			//只选择省的话，e.detail.value的值为[数字,null,null,null]
			//只选择市的话，e.detail.value的值为[数字,数字,null,null]
			//所以获取e.detail.value的值先判断是否为null，如果为null则取值为0
			for(var i=0;i<e.detail.value.length;i++){
				if(e.detail.value[i]===null){
					e.detail.value[i]=0;
				}
			}
			var s_province=this.mulSelect[0][e.detail.value[0]];//获取选中的省
			var s_city=this.mulSelect[1][e.detail.value[1]||0];//获取选中的市
			var s_district=this.mulSelect[2][e.detail.value[2]||0];//获取选中的区
			var s_street=this.mulSelect[3][e.detail.value[3]||0];//获取选中的街道
			// console.log(e.detail.value);
			//赋值显示在页面
			this.address=s_province.deptName+s_city.deptName+s_district.deptName+s_street.deptName;
			//将字体颜色修改为黑色
			this.isActive=true;
			console.log(s_street);
			// 给表单复制
			this.userInfo.address = s_street.deptId
		},
    	getProvince() { // 此方法可以继续优化
			var that = this;
			getAllCityListApi({}).then(res=>{
				that.province = []
				if(res.code == 200){
					that.province = res.data;;
					that.mulSelect.push(that.province);
					var p = that.province[0].deptId;
					getCountyListByCityApi({deptId:p}).then(res=>{
						if(res.code == 200){
							that.city = res.data;
							that.mulSelect.push(that.city);
							var p = that.city[0].deptId;
							getCountyListByCityApi({deptId:p}).then(res=>{
								if(res.code == 200){
									that.district = res.data;
									that.mulSelect.push(that.district);
									var p = that.district[0].deptId;
									getCountyListByCityApi({deptId:p}).then(res=>{
										if(res.code == 200){
											that.street = res.data;
											that.mulSelect.push(that.street);
										}
									})
								}
							})
						}
					})
				}
			})
		},

    }