封装uniapp省市区三级联动

<template>
	<view>
		<view class="list" :style="{width:width+'rpx',height:height+'rpx'}">
			<text class="must">
				商户所在地区：
			</text>
			<picker class="picker" mode="multiSelector" :range="region" range-key="areaName" :value="regionIndex" @change="pickerChange"
			 @columnchange="pickerColumnchange">
				<view class="pbox" :class="{'pbox_hover':regionStr != '请选择省市区'}">
					<view>{{regionStr}}</view>
					<text class="iconfont icon-you"></text>
				</view>
			</picker>
		</view>
	</view>
</template>

单独编写一个独立文件存放City.vue

<script>
	export default {
		data() {
			return {
				// 原数组
				totalCity:[],
				// 处理后的数组
				region: [
					[],
					[],
					[]
				],
				// 选择省市区的下标
				regionIndex: [500, 220, 200],
				// 省市区字符串
				regionStr: '请选择省市区'
			};
		},
		props: {
			// 组件高度
			height: {
				type: Number,
				default: 92
			},
			// 组件宽度
			width: {
				type: Number,
				default: 710
			},
			codeList:{
				type:Array,
				default:()=>[]
			},
			// 是否是为修改(true为修改)
			isRevise: {
				type: [Boolean],
				default: false
			}
		},
		created() {
			this.post("请求接口url",{},data=>{
				this.totalCity = data.result.items;
				this.region[0] = this.totalCity;
				this.region[1] = this.totalCity[0].children;
				this.region[2] = this.region[1][0].children
				if(this.codeList[0]){
					this.setDefault()
				}
			 });
		},
		methods: {
		**(编辑场景)回显选择的默认值**
			setDefault(){
				let str = ""
				this.totalCity.find((item,index)=>{
					if(item.areaCode == this.codeList[0]){
						
						item.children.find((cItem,cIndex)=>{
							if(cItem.areaCode == this.codeList[1]){
								cItem.children.find((aItem,aIndex)=>{
									if(aItem.areaCode == this.codeList[2]){
										str = `${item.areaName} ${cItem.areaName} ${aItem.areaName}`
										this.region[1] = item.children;
										this.region[2] = cItem.children
										this.$set(this.regionIndex,0,index)
										this.$set(this.regionIndex,1,cIndex)
										this.$set(this.regionIndex,2,aIndex)
									}
								})
							}
							
						})
					}
				})
				this.regionStr = str
			},
			**选择事件**
			pickerChange(e) {
				let [a,b,c] = e.detail.value
				this.totalCity.find((item,index)=>{
					if(index == a){
						item.children.find((cItem,cIndex)=>{
							if(cIndex == b){
								cItem.children.find((aItem,aIndex)=>{
									if(aIndex == c){
										this.regionStr = `${item.areaName} ${cItem.areaName} ${aItem.areaName}`
										this.$emit('region',[item.areaCode,cItem.areaCode,aItem.areaCode])
									}
								})
							}
						})
					}
				})
			},
			**滚动关联信息**
			pickerColumnchange(e) {
				let {column,value} = e.detail
				if(column === 0){
					this.region[1] = this.region[0][value].children
					this.region[2] = this.region[1][0].children
					this.$set(this.regionIndex,0,value)
					this.$set(this.regionIndex,1,0)
					this.$set(this.regionIndex,2,0)
				}
				if(column === 1){
					this.region[2] = this.region[1][value].children
					this.$set(this.regionIndex,1,value)
					this.$set(this.regionIndex,2,0)
				}
			}
		},
		
	}
</script>

<style lang="less">
	.list {
		padding:10upx 0;
		display: flex;
		flex-direction: column;
		background:#fff;
		&>text{
			font-size:28upx;
			color:#999;
		}
		&>.picker{
			height: 60upx;
			font-size:36upx;
			padding:10upx 0 0 30upx;
			color:#666;
			display: flex;
			justify-content: space-between;
			align-items: center;
			&:after{
				content:'';
				width:0;
				height:0;
				border-width: 15upx;
				border-style: solid;
				border-color:transparent #ccc #ccc transparent;
				margin-right:30upx;
				transform: rotate(-45deg);
			}
		}

		.name {
			font-size: 28rpx;
			color: #666;
		}

		.icon-you {
			font-size: 28rpx;
			color: #999999;
		}

		.input {
			flex: 1;
			height: 100%;
			line-height: 92rpx;
			color: #9080A1;
		}

		.textarea {
			flex: 1;
			height: 100%;
			color: #A9A9A9;
		}
	}
</style>

**利用组件注入的方式使用即可**
<view class="cu-form-group">
	<cityPicker :codeList="[formData.comProvinceCode || 0,formData.comCityCode || 0 ,formData.comTownCode || 0]"  @region="cityInfo"></cityPicker>
</view>