uniapp使用picker动态获取省市区

使用picker的多列选择 将mode属性设置为 ：mode=“multiSelector”，利用@columnchange这个方法，获取到哪个列发生了更改，当第一列省发生了更改，那么将刷新第二列，将第三列的数据设置为:[]；

<template>
	<view>
		<view class="header">
		</view>
		<view>{{newArea}}</view>
		<picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :range="range" range-key="region_name"  @change="change">
			<button type="default">点击选择省市区</button>
		</picker>
		<button class="btn" type="primary">提交</button>
	</view>
</template>
<script>
import {requestHttp} from '../../store.js'
export  default{
	data(){
		return{
			show:true,
			range:[
				[],
				[]
			],
			code:'',
			newArea:''
		}
	},
	onLoad() {
	//首次加载获取省
		this.getCode().then(res=>{
			this.range.unshift(res)
		})
	},
	methods:{
		change(e){
			//点击确认之后获取对应的省市区，因为这个picker本身没有做限制，比如选只选择一列数据，也是允许提交的，但是获取省市区的时候，因为没有选择区，所以我用三元运算符手动设置限制，如果没选择的话会获取到一个空
			let province=this.range[0][e.detail.value[0]]?this.range[0][e.detail.value[0]].region_name:'';
			let city=this.range[1][e.detail.value[1]]?this.range[1][e.detail.value[1]].region_name:'';
			let area=this.range[2][e.detail.value[2]]?this.range[2][e.detail.value[2]].region_name:'';
			console.log(province,city,area,99999999999)
			if(!(province&&city&&area)){
				uni.showToast({
					title:'请选择完整的省市区！',
					icon:'none',
					duration:2000
				})
			}else{
				this.newArea=province+city+area
			}
		},
		//核心代码，piker中的数据动态生成
		bindMultiPickerColumnChange(e){
			this.code=this.range[e.detail.column][e.detail.value].id;
			console.log(this.code,9999999999)
			if(e.detail.column=='0'){
			//如果第一个选项的数据发生变化
				this.getCode().then(res=>{
				//将第二列获取的数据放在新的选项中，此处用$set设置数组中的元素效果一样
				   this.range.splice(1,1,res);
				   //将第三列清空，不然如果选择了新的省，但是没有选择市的时候，那么区的数据就没有更新，此处清空区的数据，等市选择之后再把区的数据更新
				   this.range.splice(2,1,[]);
				})
			}else if(e.detail.column=='1'){
				    this.getCode().then(res=>{
				    this.range.splice(2,1,res);
				})
			}
			
		},
		//获取省市区对应的数据，此处的逻辑是传省的code会返回市的数据，传市的code会返回区的数据，具体获取数据方法跟根据后台来定
		getCode(){
			const  option={
				urlName:'depponown/selectProvinces',
				method: 'POST',
				data: {
					headerInfo:{},
					data:{
						parentId:this.code,
					},
				}
			}
		   return new Promise(function(resolve,reject){
		   //requestHttp是封装的请求不用在意，回调方式封装的
			   requestHttp(option,function(res){
					if(res.success){
						resolve(JSON.parse(res.result))
					}
			   	})
		   })  	
		}
	}
}
</script>
<style scoped>
	.btn{
		position: absolute;
		bottom: 50rpx;
		width: 100%;
	}
</style>