uniapp省市区3级联动组件_uniapp省市区三级联动插件

1、组件代码region.vue

<template>
	<view>
		
		<!-- 省市区3级联动组件 -->
		<picker mode="multiSelector" :value="multiIndex" :range="multiArray" @change="handleValueChange"
			@columnchange="handleColumnChange">
			<slot></slot>
		</picker>
		
	</view>
</template>
 
<script>
	// 省市区数据
    const regionData = require('./regions.json')
	// const regionData = uni.getStorageSync('regionData');
 
	export default {
		data() {
			return {
				cityArr: regionData[0].child,
				districtArr: regionData[0].child[0].child,
				multiIndex: [0, 0, 0],
				isInitMultiArray: true,
			}
		},
		methods: {
			// 某一列的值改变时触发 columnchange 事件
			handleColumnChange(e) {
				// console.log(e);
				let _this = this;
				_this.isInitMultiArray = false;
				let col = e.detail.column;
				let row = e.detail.value;
				_this.multiIndex[col] = row;
				try {
					switch (col) {
						case 0:
							if (regionData[_this.multiIndex[0]].child.length == 0) {
								_this.cityArr = _this.districtArr = [regionData[_this.multiIndex[0]]]
								break;
							}
							_this.cityArr = regionData[_this.multiIndex[0]].child
							_this.districtArr = regionData[_this.multiIndex[0]].child[_this.multiIndex[1]].child
							break;
						case 1:
							_this.districtArr = regionData[_this.multiIndex[0]].child[_this.multiIndex[1]].child
							break;
						case 2:
							break;
					}
				} catch (e) {
					// console.log(e);
					_this.districtArr = regionData[_this.multiIndex[0]].child[0].child
				}
			},
 
			// value 改变时触发 change 事件
			handleValueChange(e) {
				// console.log(e);
				// 结构赋值
				let _this = this;
				let [index0, index1, index2] = e.detail.value;
				let [arr0, arr1, arr2] = _this.pickedArr;
				let address = [arr0[index0], arr1[index1], arr2[index2]];
				// console.log(address);
				_this.$emit('getRegion', address)
			},
		},
		computed: {
			multiArray() {
				return this.pickedArr.map(arr => arr.map(item => item.name))
			},
			pickedArr() {
				// 进行初始化
				if (this.isInitMultiArray) {
					return [
						regionData,
						regionData[0].child,
						regionData[0].child[0].child
					]
				}
				return [regionData, this.cityArr, this.districtArr];
			}
		},
	}
</script>

2、组件的使用

<template>
	<view>
 
        <pickerRegion @getRegion="regionChange">
			<view class="pickerCon">
				<text v-if="address">{{address}}</text>
				<text style="color: #999;" v-else>请选择所在地区</text>
				<u-icon name="arrow-right" color="#ccc" size="28"></u-icon>
			</view>
		</pickerRegion>
 
	</view>
</template>
 
<script>
    import pickerRegion from '@/components/region/region.vue'
	export default {
		components: {
			pickerRegion
		},
		data() {
			return {
				// 地区
				address: '',
			}
		},
		onLoad(option) {},
		onShow() {},
		onReady() {},
		methods: {
            // 选择地区
			regionChange(res) {
				console.log(res)
				this.address = res[0].name + res[1].name + res[2].name;
			},
        }
    }
 
</script>

省市区json数据，请返回顶部下载。