使用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>
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐