uniapp使用picker动态获取省市区
使用picker的多列选择 将mode属性设置为 :mode=“multiSelector”,利用@columnchange这个方法,获取到哪个列发生了更改,当第一列省发生了更改,那么将刷新第二列,将第三列的数据设置为:[];<template><view><view class="header"></view><view>{{newAr
·
使用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>
更多推荐
已为社区贡献3条内容
所有评论(0)