- uni-app的picker地址联动只有三级联动。
- 想要四级联动只能将picker的mode改为“multiSelector”，再自行获取数据填写
<template>
<view class="content">
<view class="address">
<image src="/static/images/index/address.png" mode="widthFix"></image>
<!-- 当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容,range-key只接受字符串 -->
<picker mode="multiSelector" :range="mulSelect" :range-key="'name'" @change="pickerChange" @columnchange="colChange">
<view :class="{active:isActive}">{{address}}</view>
</picker>
</view>
</view>
</template>
js部分：
<script>
export default {
data() {
return {
provinceList: [{
id: 1,
name: '广东省',
cityList: [
{
id: 1,
name: '广州市',
districtList: [
{
id: 1,
name: '天河区',
streetList: [{id:1,name:'黄村新村大街'},{id:2,name:'玉树新村大街'}]
},
{
id:2,
name:'白云区',
streetList:[{id:1,name:'大河大街'},{id:2,name:'小何大街'}]
}
],
},
{
id:2,
name:'茂名市',
districtList:[
{
id:1,
name:'信宜市',
streetList:[{id:1,name:'东镇大街'},{id:2,name:'锦江大街'}]
},
{
id:2,
name:'电白县',
streetList:[{id:1,name:'小区大街'},{id:2,name:'大区大街'}]
}
]
}
]
},
{
id: 2,
name: '广西省',
cityList: [
{
id:1,
name:'南宁市',
districtList:[
{
id:1,
name:'楠楠区',
streetList:[{id:1,name:'安安大街'},{id:2,name:'安全大街'}]
},
{
id:2,
name:'安南区',
streetList:[{id:1,name:'南山大街'},{id:2,name:'俺家大街'}]
}
]
},
{
id:2,
name:'吉普市',
districtList:[
{
id:1,
name:'吉尔区',
streetList:[{id:1,name:'吉祥大街'},{id:2,name:'吉吉大街'}]
},
{
id:2,
name:'吉子市',
streetList:[{id:1,name:'季付大街'},{id:2,name:'集合大街'}]
}
]
}
]
}
],
province: [], //省数组
city: [], //市数组
district: [], //区数组
street: [], //街道数组
mulSelect: [], //四级联动显示数组，该数组的值为[[province],[city],[district],[street]]
provinceId: 0, //省的id
cityId: 0, //市的id
districtId: 0,//区的id
address:'请选择地址',
isActive:false//字体颜色样式
}
},
onReady() {
// console.log(this.arrList[0].name)
},
methods: {
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.name+s_city.name+s_district.name+s_street.name;
//将字体颜色修改为黑色
this.isActive=true;
},
colChange(e) {
// console.log(e.detail);
// console.log(this.mulSelect[0][e.detail.value])
switch (e.detail.column){
case 0://选择省
this.provinceId=this.provinceList[e.detail.value].id;
this.getCity();
this.mulSelect[1]=this.city;
this.getDistrict();
this.mulSelect[2]=this.district;
this.getStreet();
this.mulSelect[3]=this.street;
break;
case 1://选择市
for(var i=0;i<this.provinceList.length;i++){
if(this.provinceList[i].id==this.provinceId){
this.cityId=this.provinceList[i].cityList[e.detail.value].id;
}
}
this.getDistrict();
this.mulSelect[2]=this.district;
this.getStreet();
this.mulSelect[3]=this.street;
break;
case 2://选择区
for(var i=0;i<this.provinceList.length;i++){
if(this.provinceList[i].id==this.provinceId){
for(var j=0;j<this.provinceList[i].cityList.length;j++){
if(this.provinceList[i].cityList[j].id==this.cityId){
this.districtId=this.provinceList[i].cityList[j].districtList[e.detail.value].id;
}
}
}
}
this.getStreet();
this.mulSelect[3]=this.street;
break;
case 3://选择街道
break;
default:
break;
}
},
getProvince() {
for(var i=0;i<this.provinceList.length;i++){
var pro={};
pro.id=this.provinceList[i].id;//获取省id
pro.name=this.provinceList[i].name;//获取省名
this.province.push(pro);//将获取到的id，name放入省名称数组
}
},
getCity() {
for(var i=0;i<this.provinceList.length;i++){
//寻找与省id匹配的索引
if(this.provinceList[i].id==this.provinceId){
if(this.city.length){//清空历史数据
this.city=[];
}
for(var j=0;j<this.provinceList[i].cityList.length;j++){
var ci={};
ci.id=this.provinceList[i].cityList[j].id;//获取城市id
ci.name=this.provinceList[i].cityList[j].name;//获取城市名
//将城市id，name放入城市数组
this.city.push(ci);
}
}
}
},
getDistrict(){
for(var i=0;i<this.provinceList.length;i++){
//寻找与省id匹配的索引
if(this.provinceList[i].id==this.provinceId){
// console.log(this.provinceId)
for(var j=0;j<this.provinceList[i].cityList.length;j++){
//寻找与市id匹配的索引
if(this.provinceList[i].cityList[j].id==this.cityId){
// console.log(this.cityId)
if(this.district.length){//清空历史数据
this.district=[];
}
for(var k=0;k<this.provinceList[i].cityList[j].districtList.length;k++){
var di={};
di.id=this.provinceList[i].cityList[j].districtList[k].id;//获取区id
di.name=this.provinceList[i].cityList[j].districtList[k].name;//获取区名
//将区id，name放入区数组
this.district.push(di);
}
}
}
}
}
},
getStreet() {
for(var i=0;i<this.provinceList.length;i++){
//寻找与省id匹配的索引
if(this.provinceList[i].id==this.provinceId){
for(var j=0;j<this.provinceList[i].cityList.length;j++){
//寻找与市id匹配的索引
if(this.provinceList[i].cityList[j].id==this.cityId){
for(var k=0;k<this.provinceList[i].cityList[j].districtList.length;k++){
//寻找与区id匹配的索引
if(this.provinceList[i].cityList[j].districtList[k].id==this.districtId){
//循环遍历输出街道
if(this.street.length){//清空历史数据
this.street=[];
}
for(var l=0;l<this.provinceList[i].cityList[j].districtList[k].streetList.length;l++){
var st={};
st.id=this.provinceList[i].cityList[j].districtList[k].streetList[l].id;
st.name=this.provinceList[i].cityList[j].districtList[k].streetList[l].name;
this.street.push(st);
}
}
}
}
}
}
}
}
},
onNavigationBarButtonTap(e) {
},
onLoad() {
//默认展示id为1的项
this.getProvince();
this.mulSelect.push(this.province);
this.provinceId=1;
this.getCity();
this.mulSelect.push(this.city);
this.cityId=1;
this.getDistrict();
this.mulSelect.push(this.district);
this.districtId=1;
this.getStreet();
this.mulSelect.push(this.street);
// console.log(this.mulSelect)
}
}
</script>
css部分：
<style lang="scss">
.active{
color: #000000;
}
.content {
width: 100%;
height: 40px;
line-height: 40px;
.address{
display: flex;
justify-content: flex-start;
image{
width: 30px;
height: 30px;
margin: 5px 5px;
vertical-align: middle;
}
picker{
color: #CCCCCC;
}
}
}
</style>
2908
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
