uniapp 三级省市区

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
				},
}