uview2.0 实现省市区三级联动

最新推荐文章于 2025-05-26 17:36:39 发布

蒜苔肉丝

最新推荐文章于 2025-05-26 17:36:39 发布

阅读量1.2k

点赞数 2

CC 4.0 BY-SA版权

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_66809960/article/details/137999067

文章描述了一个在Vue应用中使用u-picker组件展示和联动省份、城市和区县数据的过程，包括如何从API获取数据、如何根据一级和二级选择更新二级和三级选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

废话不多说直接上代码

	<u-picker :show="show" ref="uPicker" :columns="columns" @confirm="confirm" @cancel="show=false"keyName="name" @change="changeHandler"></u-picker>

columns: []需要再data里面定义

1.先要展示所有数据

onLoad(option) {	
			this.getarealist()
		},
methods：{
getarealist() {
				arealist().then(res => {
					let sheng = [];
					let shi = [];
					let qu = [];
					let origi = [];
					origi = res.data.datas.area_list;
					this.origiData = origi;

					for (const key in this.origiData) {
						if (this.origiData.hasOwnProperty(key)) {
							let data = {
								name: this.origiData[key].name,
								id: this.origiData[key].id
							}
							sheng.push(data);
							const province = this.origiData[key];
							for (const cityKey in province.list) {
								if (province.list.hasOwnProperty(cityKey)) {
									const city = province.list[cityKey];
									let data = {
										name: city.name,
										id: city.id
									}
									shi.push(data);
									for (const countyKey in city.list) {
										if (city.list.hasOwnProperty(countyKey)) {
											const county = city.list[countyKey];
											let data = {
												name: county.name,
												id: county.id
											}

											qu.push(data);
										}
									}
								}
							}
						}
					}

					this.columns.push(
						JSON.parse(JSON.stringify(sheng)),
						JSON.parse(JSON.stringify(shi)),
						JSON.parse(JSON.stringify(qu))
					);
					console.log('Columns:', this.columns);
				}).catch(error => {
					console.error('Error fetching area list:', error);
				});
			},
}

2.然后根据第一级和第二级的切换对应省市区

changeHandler(e) {
				console.log('Change event:', e);
				const {
					columnIndex,
					value,
					picker = this.$refs.uPicker
				} = e;

				if (columnIndex === 0) {
					console.log(value, '45454545')
					// picker为选择器this实例，变化第二列对应的选项

					for (const key in this.origiData) {
						if (this.origiData.hasOwnProperty(key)) {
							console.log(value[0]);
							if (value[0].name === this.origiData[key].name) {
								let shi = [];
								let flag = this.origiData[key].list;
								console.log(flag, 'flag');
								for (const cityKey in flag) {
									if (flag.hasOwnProperty(cityKey)) {
										const city = flag[cityKey];

										let data = {
											name: city.name,
											id: city.id
										}
										console.log(data, '99999999999999');
										shi.push(data);

										picker.setColumnValues(1, shi);
										console.log(shi, '市4444');



										const citiesArray = Object.values(
											flag); // Convert the values of the flag object into an array
										const firstCity = citiesArray[
											0]; // Access the first item in the array, which represents the first city
										const firstCityList = firstCity
											.list; // Access the 'list' property of the first city
										let qu = [];
										// Now you can loop through the districts of the first city and process them
										for (const key in firstCityList) {
											if (firstCityList.hasOwnProperty(key)) {
												const district = firstCityList[key];
												let data = {
													name: district.name,
													id: district.id
												}
												qu.push(data);
												console.log('区县数据', district);
											}
										}
										picker.setColumnValues(2, qu);


									}
								}
							}

						}

					}
				}
				if (columnIndex === 1) {
					for (const key in this.origiData) {
						if (this.origiData.hasOwnProperty(key)) {
							if (value[0].name === this.origiData[key].name) {
								let shi = [];
								let flag = this.origiData[key].list;
								console.log(flag, 'flag');
								for (const cityKey in flag) {
									if (flag.hasOwnProperty(cityKey)) {
										const city = flag[cityKey];
										shi.push(city.name, city.id);
										console.log(flag, '987654321');
										for (const key in flag) {
											if (flag.hasOwnProperty(key)) {
												const obj = flag[key].name;

												if (value[1].name == obj) {
													console.log(flag[key].list, );
													const districtList = flag[key].list;
													let qu = [];
													for (const districtKey in districtList) {
														if (districtList.hasOwnProperty(districtKey)) {
															const district = districtList[districtKey];
															let data = {
																name: district.name,
																id: district.id
															}
															qu.push(data);
															console.log('District=================', district);
														}
													}
													picker.setColumnValues(2, qu);

												}

											}
										}

									}
								}
							}
						}
					}


				}






			},