全国三级联动实现

实现效果 数据结构为三级 使用uniapp内置组件picker组件

multiArray数组结构为三级 [[],[],[]] multiIndex下标也为[0,0,0] 因为要对应每一列的下标取信息 取缓存是用的本方法大佬们可以指点一下 获取到token 获取全国数据到initDataPicker方法里 将数据排成我需要的结构 排版就出来了 调用bindMultiPickerColumnChange事件来获取每个省对应市的再去对应县 获取到点击的下标 第一个switch case 0 代表着第一个市 case 1代表着第二个省 每一次都去清空multiArray的数组 然后再往里面推数据

<picker mode="multiSelector" 
        @columnchange="bindMultiPickerColumnChange" 
        :value="multiIndex"		
        :range="multiArray">
	<view style="background-color: white;" v-if="isNationwide">
		全国
	</view> 
	<view style="background-color: white;" v-else>
		{{ multiArray[2][multiIndex[2]] }}
	</view>
</picker>


<script>
	import {
		getRegion
	} from '../../request/api.js'
	export default {
		data() {
			return {
				multiArray: [],
				multiIndex: [0, 0, 0],
				intiArr: [],
				province: '',
				isNationwide:true
			};
		},
		created() {
			this.getCityList()
		},
		methods: {
			getCityList() {
				uni.getStorage({
					key: 'token',
					success: (res) => {
						getRegion({
							token: res.data,
							app_id: '10001'
						}).then(res => {
							this.initDataPicker(res.data.data.regionData) //初始化省份列表
						})
					}
				})
			},
			initDataPicker(value) {
				this.intiArr = value
				let arr = []
				let arr1 = ['市辖区', '市中心'];
				let arr2 = []
				this.intiArr.forEach(item => {
					arr.push(item.name);
				})
				this.intiArr[0].city[0].region.forEach(item => {
					arr2.push(item.name);
				});
				this.multiArray.push(arr, arr1, arr2);
			},
			bindMultiPickerColumnChange(e) {
				this.isNationwide = false
				this.multiIndex[e.detail.column] = e.detail.value;
				//实现全国排版
				switch (e.detail.column) {
					case 0: //拖动第1列
						switch (this.multiIndex[0]) {
							case this.multiIndex[e.detail.column]:
								this.multiArray[1] = []
								this.multiArray[2] = []
								this.intiArr[this.multiIndex[e.detail.column]].city.forEach(item => {
									this.multiArray[1].push(item.name)
								})
								this.intiArr[this.multiIndex[e.detail.column]].city[0].region.forEach(item => {
									this.multiArray[2].push(item.name)
								})
								this.province = this.multiArray[0][this.multiIndex[e.detail.column]] //第一个省级
								break;
						}
						this.multiIndex.splice(1, this.multiArray[1].length, 0);
						this.multiIndex.splice(2, this.multiArray[2].length, 0);
						break;
					case 1: //拖动第2列
						switch (this.multiIndex[1]) {
							case this.multiIndex[e.detail.column]:
								this.multiArray[2] = []
								this.intiArr.forEach(item => {
									if (item.name == this.province) {
										item.city[this.multiIndex[1]].region.forEach(item2 => {
											this.multiArray[2].push(item2.name)
										})
									}
								})
								break;
						}
						this.multiIndex.splice(2, this.multiArray[2].length, 0);
				}
				this.$forceUpdate();
			}
		}
	};
</script>