uniapp+uv-picker 地址选择功能，非常规数据结构应用

1、最终实现效果

2、数据结构如下

3、具体匹配数据做法详解，在 uv-ui中，Picker 选择器中需要进行地址选择功能，有一个推荐写法：省市区三级联动，这个推荐可以满足大部分多级选择功能的使用，但这个方法在应对某些数据结构时是无法完全进行套用的，当然这个问题我们可以重写数据结构来解决，但在前端重写大量的数据结构完全是不必要的。

4、以下就是针对部分非常规数据结构的使用，如图2-3-4这种类型结构，当然其他结构数据也可以使用同样的方式解决，只是在处理方式上有些许不同。

5、搭建需要的基础页面如图 1

6、在表单外面写入

	<uv-picker ref="picker" :columns="addressList" keyName="name" @change="change" @confirm="confirm">
		</uv-picker>

详解js部分：

<script>
//数据可以使用接口获取也可以本地引入，我这里是放在本地的
	import {
		datalist
	} from '@/config/address.js'// 初始数据
	export default {
		data() {
			return {
				provinces: [], //省
				citys: [{
					id: '0',
					name: '请选择'
				}], //市
				areas: [{
					id: '0',
					name: '请选择'
				}], //区
				id: '',
				ID: '',
				datalist: [],//这个是获取的重写初级数据
			}

		},
		computed: {
			addressList() {//这个是最终数据
				return [this.provinces, this.citys, this.areas];//数据变更自动触发同步到组件内
			},
			cityList() {//标杆更新后 cityList 数据自动更新
				let data = []
				this.datalist[1].forEach(item => {
					if (item.id.substr(0, 3) == this.id) {
						data.push(item)
					}
				})
				return data
			},
			countyList() {//标杆更新后 countyList数据自动更新
				let data = []
				this.datalist[2].forEach(item => {
					if (item.id.substr(0, 4) == this.ID) {
						data.push(item)
					}
				})
				return data
			}
		},
		methods: {
			handlePickValueDefault() { //将数据key与属性值拆分重新为单个数据对象
				let city_list = []
				let county_list = []
				Object.keys(datalist().province_list).forEach(key => {
					// console.log('key:',key,'value:',datalist().province_list[key])
					this.provinces.push({
						id: key,//至于重写后的key可以根据自己的需求进行定义方便后期使用，我这里原来的key现在作为id,属性值作为name数据
						name: datalist().province_list[key]
					})
				})
				Object.keys(datalist().city_list).forEach(key => {
					city_list.push({
						id: key,
						name: datalist().city_list[key]
					})
				})
				Object.keys(datalist().county_list).forEach(key => {
					county_list.push({
						id: key,
						name: datalist().county_list[key]
					})
				})
				this.datalist = [this.provinces, city_list, county_list]//拆分后的数据放到this.datalist数组中
			},
			change(e) {
				console.log(e)
				const {
					columnIndex,
					index,
					indexs,
					value
				} = e
				this.id = value[0].id.substring(0, 3)//获取当前省数据根据id数据排列规律匹配截取前三位作为市级数据的标杆数据
				// this.ID=this.cityList[1].id.substring(0, 4)
				// // 改变了省
				if (columnIndex === 0) {//切换省数据
					this.$refs.picker.setIndexs([index, 0, 0], true)//通知显示变更
					this.citys = this.cityList//获取最新市级数据
					this.ID = this.cityList[0].id.substring(0, 4)//市级数据匹配标杆更新
					this.areas = this.countyList//this.areas获取更新后的区级数据
				} else if (columnIndex === 1) {//改变市
					this.$refs.picker.setIndexs([indexs[0], indexs[1], 0], true)//通知显示变更
					this.ID = value[1].id.substring(0, 4)//市级数据匹配标杆更新
					this.areas = this.countyList//this.areas获取更新后的区级数据
				}
				// console.log(this.datalist,'this.datalist')
			},
			open() {
				this.$refs.picker.open();//打开选择器
				this.handlePickValueDefault()//调用处理数据
			},
			confirm(e) {
				console.log('确认选择的地区：', e);
				if (e.value[0].id == '0') return false//确定选择了数据
				this.model1.provinces =`${e.value[0].name}/${e.value[1].name}/${e.value[2].name}`//选择数据写入this.model1.provinces字段
				// this.toast(`${e.value[0].name}/${e.value[1].name}/${e.value[2].name}`
				// )
			},
			
		}
	}
</script>