uView2.0 u-picker三级联动省市区

效果图:

html:

<u-form-item @click="poptanqi" label="所在地区" labelWidth="70" borderBottom ref="item1">
					<u-picker keyName="name" :show="addressShow" ref="uPicker" @cancel="pickerCancel" :columns="columns"
						@confirm="confirm" @change="changeHandler">
					</u-picker>
					<view>{{getAddressText()}}</view>
</u-form-item>

script:

	import {
		areaList
	} from '@/utils/address-data'
	export default {
		data(){
			return {
				//地址展示框
				addressShow: false,
				getLocationState: false,
				//要提交的表单信息
				userAddress: {},
				//三级联动组件展示框
				addressShow:false,
				//省市区数据
				columns: [
					[],
					[],
					[]
				]
			}
	},
	created() {
			this.columns[0] = areaList;
			this.columns[1] = areaList[0].cities;
			this.columns[2] = areaList[0].cities[0].districts;
	},
	computed: {
			getAddressText() {
				return () => this.userAddress.province + '  ' + this.userAddress.city + '  ' + this.userAddress.area;
			}
	},
	methods:{
		pickerCancel() {
				//隐藏联动展示框
				this.addressShow = false;
				//重置联动数据为初始状态
				this.$refs.uPicker.setIndexs([0, 0, 0], true);
				this.$refs.uPicker.setColumnValues(0, areaList);
				this.$refs.uPicker.setColumnValues(1, areaList[0].cities);
				this.$refs.uPicker.setColumnValues(2, areaList[0].cities[0].districts);
			},
		},
		//三级联动框滑动选择后触发的事件
		changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					indexs,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, areaList[index].cities)
					picker.setColumnValues(2, areaList[indexs[0]].cities[0].districts)
				} else if (columnIndex === 1) {
					// picker为选择器this实例，变化第三列对应的选项
					picker.setColumnValues(2, areaList[indexs[0]].cities[indexs[1]].districts)
				}
		},
		// 点击确定事件,回调参数为包含columnIndex、value、values
		confirm(e) {
			console.log('confirm', e)
			//省
			this.userAddress.province = e.value[0].name;
			//市
			this.userAddress.city = e.value[1].name;
			//区
			this.userAddress.area = e.value[2].name;
			//区域代码
			this.userAddress.regionId = e.value[2].id;
			this.pickerCancel();
		},
		poptanqi() {
				let that = this;
				if (!that.getLocationState) {
					uni.showLoading({
						title: '加载中'
					});
					uni.getLocation({
						type: 'wgs84',
						isHighAccuracy: true,
						success: function(res) {
							console.log('当前位置的经度：' + res.longitude);
							console.log('当前位置的纬度：' + res.latitude);
							//自定义的接口,按照腾讯位置服务文档接入
							getAdInfoByLngAndLat({
								longitude: res.longitude,
								latitude: res.latitude
							}).then(res2 => {
								if (res2.data.head.code == '0') {
									let resData = res2.data.details;
									if (resData.status == 0) {
										that.$set(that.userAddress, 'province', resData.result.ad_info
											.province);
										that.$set(that.userAddress, 'city', resData.result.ad_info
											.city);
										that.$set(that.userAddress, 'area', resData.result.ad_info
											.district);
										that.$set(that.userAddress, 'regionId', resData.result.ad_info
											.adcode + '000');
										that.getLocationState = true;
									} else {
										that.$nextTick(()=>{
											that.$refs["cityPicker"].show();
										})
									}
								} else {
									that.$nextTick(()=>{
										that.$refs["cityPicker"].show();
									})
								}
							});
						},
						fail(err) {
							that.addressShow = true;
							console.log('遇到错误!');
							console.log(err);
						},
						complete() {
							uni.hideLoading();
						}
					});
				} else {
					that.$nextTick(()=>{
						this.$refs["cityPicker"].show();
					})
				}
			},
}

address-data.js下载地址