1、调用api接口略，那个只是数据接口

{
  id:1,
  title:'北京',
  city:[
     id:1,
     title:'北京市',
     area:[
       ...
     ]
  ]
}

2、html布局部分

<u-picker mode="region"
		    ref="uPicker"
			:show="areaPickerShow"  
			:columns="addressColumns"
			:defaultIndex="areaDetault"
			keyName="title"
			title="请选择区域"
			:closeOnClickOverlay="true"
			@change="changeHandler"
			@cancel="areaPickerShow = false"
			@close="areaPickerShow = false"
			@confirm="localConfirm"
			></u-picker>

结合上述代码引入对应参数

3、js data参数

data(){
   return {
        areaPickerShow:false, //控制弹窗显示与隐藏
	areaData:[], //原始数据
	addressColumns:[],//数据数组
	areaDetault:[],//数据回显时的默认数据
   }
}

4、逻辑函数

//1、通过接口获取城市数据 并拼接数组
	getCityList() {
			kdv.getPublicMember({},'citylist','get',res=>{
				if(res.code==200){
					//console.log(res)
					this.areaData = res.data
					//拼装数组数据
					let  arr = [this.areaData,this.areaData[0].city,this.areaData[0].city[0].area]
					this.addressColumns=arr
				}
			})
		},
//2、选中时数据回填
changeHandler(e) {
			let {columnIndex,index,indexs,picker=this.$refs.uPicker} = e
			if(columnIndex ==0){
				let children1 = this.areaData[index].city.map(r=>{
					return {title:r.title,id:r.id}
				})
				picker.setColumnValues(1,children1)
				let children2 = this.areaData[index].city[indexs[1]].area.map(e => {
				     return {title:e.title,id:e.id}
				})
				picker.setColumnValues(2, children2)
			}
			if(columnIndex == 1){
				let children3 = this.areaData[indexs[0]].city[indexs[1]].area.map(e => {
				   return {title:e.title,id:e.id}
				 })
			   picker.setColumnValues(2, children3)
			}
		},
//3、点击确定时  数据回填和文本显示
//点击确定
		localConfirm(e) {
			//this.currentCity=e.value
			this.setDefault(e.value)
			this.areaPickerShow = false
		},
//4、根据回填显示数据  默认选中
setDefault(checkdata) {
			let temp = []
		    temp = checkdata
			let index,index1,index2 = 0
			let arr,arr1,arr2 = []
			this.areaData.forEach((item,v) => {
				if(item.title == temp[0].title){
					index = v
					item.city.forEach((sm,si) => {
						if(sm.title == temp[1].title){
							index1 = si
							sm.area.forEach((j,m) => {
								if(j.title == temp[2].title){
									index2 = m
								}
							})
						}
					})
				}
			})
			//匹配省市区对应每列的第几个
			arr = this.areaData.map(r => {
				return r;
			})
			arr1 = this.areaData[index].city.map(r => {
				return r;
			})
			arr2 = this.areaData[index].city[index1].area.map(r => {
				return r;
			})
			this.addressColumns = [arr,arr1,arr2]
			this.areaDetault = [index,index1,index2]
			//回填选择文本处显示名称
			//*******
			//此处填写文本显示数据 赋值
			//*****
		},