uniapp三级省市区联动
页面
<picker mode="multiSelector" @change="func_changeJG(0)" @columnchange="func_changeColumnJG" "
:value="citysIndex" :range="cityArray">
<view class="picker">
<block>{{inputForm.szcs ? inputForm.szcs: '请选择'}}</block>
</view>
</picker>
导入本地 js 三级城市数据
import cityArr from '../../../common/cityArray.js'; //可在百度上搜索数据,下载到本地
在页面加载时处理数据
//data 声明字段
data() {
return {
citysIndex: [0, 0, 0],
cityArray: [
[],
[],
[]
],
global_sheng: '',
ssq: "",
address:'',
alladdress:[],
}
}
created() {
// 获取省市区三级数据
this.alladdress=cityArr.getAreaInfo()
this.citycon()
},
//处理方法
methods:{
//点击确定赋值
func_changeJG: function() {
var that = this;
var cityArray = that.cityArray;
var address = '';
let addCode = '';
if (that.ssq == '') {
//下面方法中没有设置ssq,应该给它默认值 ,此时citysIndex相当于[0,0,0]
var citysIndex = that.citysIndex;
for (let i in citysIndex) {
address += cityArray[i][citysIndex[i]]+"/"
}
} else {
address = that.ssq;
}
this.inputForm.szcs=address
// console.log('22',this.shengcon(this.inputForm.szcs))
},
//监听滚动 处理联动
func_changeColumnJG: function(e) {
var that = this;
var cityArray = that.cityArray;
var list1 = []; //存放第二列数据,即市的列
var list2 = []; //存放第三列数据,即区的列
var citysIndex = [];
var arrays = this.alladdress
//主要是注意地址文件中的字段关系,省、市、区关联的字段有 sheng、di、level
switch (e.detail.column) {
case 0:
//滑动左列
for (let i = 0, len = arrays.length; i < len; i++) {
if (arrays[i]['name'] == cityArray[0][e.detail.value]) {
var sheng = arrays[i]['sheng'];
}
if (arrays[i]['sheng'] == sheng && arrays[i]['level'] == 2) {
list1.push(arrays[i]['name']);
}
if (arrays[i]['sheng'] == sheng && arrays[i]['level'] == 3 && arrays[i]['di'] == arrays[1][
'di'
]) {
list2.push(arrays[i]['name']);
}
}
citysIndex = [e.detail.value, 0, 0];
var ssq = cityArray[0][e.detail.value] + "/" + list1[0] + "/" + list2[0] + '';
that.global_sheng = sheng
break;
case 1:
//滑动中列
var di;
var sheng = that.global_sheng;
list1 = cityArray[1];
for (let i = 0, len = arrays.length; i < len; i++) {
if (arrays[i]['name'] == cityArray[1][e.detail.value]) {
di = arrays[i]['di'];
}
}
for (let i = 0, len = arrays.length; i < len; i++) {
if (arrays[i]['sheng'] == sheng && arrays[i]['level'] == 3 && arrays[i]['di'] == di) {
list2.push(arrays[i]['name'] );
}
}
citysIndex = [that.citysIndex[0], e.detail.value, 0];
var ssq = cityArray[0][that.citysIndex[0]] + "/" + list1[e.detail.value] + "/" + list2[0] + '';
break;
case 2:
//滑动右列
list1 = cityArray[1];
list2 = cityArray[2];
citysIndex = [that.citysIndex[0], that.citysIndex[1], e.detail.value];
var ssq = cityArray[0][that.citysIndex[0]] + "/" + list1[that.citysIndex[1]] + "/" + list2[e
.detail.value] + '';
break;
}
let ssqn = ssq.substring(0, ssq.indexOf("#"));
let bh = ssq.substring(ssq.indexOf("#") + 1, ssq.length);
this.cityArray[1] = list1;
this.cityArray[2] = list2;
this.ssq = ssqn //生源地
this.citysIndex = citysIndex //更新索引
},
//弹框出来展示数据
citycon() {
//定义三列空数组
var cityArray = [
[],
[],
[],
];
var arrays = this.alladdress
for (let i = 0, len = arrays.length; i < len; i++) {
let leve = parseInt(arrays[i]['level']);
switch (leve) {
case 1:
//第一列
cityArray[0].push(arrays[i]["name"]);
break;
case 2:
//第二列(默认由第一列第一个关联)
if (arrays[i]['sheng'] == arrays[0]['sheng']) {
cityArray[1].push(arrays[i]["name"]);
}
break;
case 3:
//第三列(默认第一列第一个、第二列第一个关联)
if (arrays[i]['sheng'] == arrays[0]['sheng'] && arrays[i]['di'] == arrays[1]['di']) {
cityArray[2].push(arrays[i]["name"]);
}
break;
}
}
this.cityArray = cityArray
},
}