uview2.x u-picker省市区三级联动

�rising girl��

已于 2022-06-01 15:26:34 修改

阅读量7.9k

点赞数 4

于 2022-06-01 11:20:52 首次发布

本文链接：https://blog.csdn.net/xiaoyou_xiaohe/article/details/125079886

版权

本文介绍了如何在uView2.x中实现省市区三级联动的效果，包括页面标签设置、数据加载、滑动事件处理、确认回调和回填数据的方法。详细步骤和代码示例提供，适用于需要此类功能的开发者参考。

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

uview2.x u-picker省市区三级联动

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

提示：这里可以添加本文要记录的大概内容：

搜索了很多网上素材，要么是uview1.x的三级联动，要么是不合适，所以我自己研究了下代码，官网给的静态数据一开始没看明白，把数据都分开了，后面才发现，默认开始显示第二列的是第一列的选中后的数据，这是运行后的结果
请添加图片描述

二、使用步骤

1.页面标签

<u-picker keyName="name" :show="isAddress" @cancel="isAddress=false" ref="uPicker" class="uPicker"
			:columns="addressColumns" @confirm="addressConfirm" @change="changeHandler" :defaultIndex="defaultAddress">
			
data(){
return {
	defaultAddress: [],
	addressColumns: [],
	addressData:[]
}
}

2.加载省市区数据

代码如下（示例）：初始化

let {
	provinceData,
		cityData,
		areaData
	} = city;
		let arr=[];
		let province=[];
		let arr1=[];
		let arr2=[];
		provinceData.forEach((item, index) => {
			arr.push({
				...item,
				children: []
			});
			arr[index].children.push(...cityData[index]);
			arr[index].children.forEach((item1, index1) => {
				item1['children'] = [];
				item1.children.push(...areaData[index][index1]);
				
			});
		});
		province=arr.map(e=>{return e.label});
		arr1=arr[0].children.map(e=>{return e.label});
		arr2=arr[0].children[0].children.map(e=>{return e.label});
		this.addressColumns=[province,arr1,arr2]
		this.addressData=arr;

3.滑动后进行数据变化

代码如下（示例）：

changeHandler(e) {
	const {
			columnIndex,
			value,
			values, // values为当前变化列的数组内容
			index,
			indexs,
			// 微信小程序无法将picker实例传出来，只能通过ref操作
			picker = this.$refs.uPicker
		} = e
		// 当第一列值发生变化时，变化第二列(后一列)对应的选项
		if (columnIndex === 0) {
			// picker为选择器this实例，变化第二列对应的选项
			let children1=this.addressData[index].children.map(e=>{return e.label})
			picker.setColumnValues(1, children1)
			// console.log(this.addressData[index].children[indexs[1]].children)
			let children2=this.addressData[index].children[indexs[1]].children.map(e=>{return e.label})
			picker.setColumnValues(2, children2)
		}
		if (columnIndex === 1) {
			// console.log("index",index,"indexs",indexs)
			let children3=this.addressData[indexs[0]].children[indexs[1]].children.map(e=>{return e.label})
			picker.setColumnValues(2, children3)
		}
},

4.点击确认

addressConfirm(e) {
				this.isAddress=false;
				this.addInfo.area=`${e.value[0]}-${e.value[1]}-${e.value[2]}`
			},

5.回填

let temp= item.area.split('-');
				let index,index1,index2=0;
				let arr,arr1,arr2=[];
				this.addressData.forEach((item, i) => {
					if(item.label==temp[0]){
						index=i;
						item.children.forEach((v,y)=>{
							if(v.label==temp[1]){
								index1=y;
								v.children.forEach((o,n)=>{
									if(o.label==temp[2]){
										index2=n;
									}
								})
							};
							
						})
					}
				});
				arr=this.addressData.map(e=>{return e.label});
				arr1=this.addressData[index].children.map(e=>{return e.label});
				arr2=this.addressData[index].children[index1].children.map(e=>{return e.label});
				this.addressColumns=[arr,arr1,arr2]
				this.defaultAddress=[index,index1,index2];

总结

希望我的代码可以给你帮助，有其他更好的写法可以一起分享，写的不好请勿喷
还有，当打包的小程序里面如果开发工具版本低的话会报setColumnValues is undefined，升级版本就可以
例如：以上就是今天要讲的内容，如果需要省市区的js可以去https://download.csdn.net/download/xiaoyou_xiaohe/85517461 这里面下载