uniapp element-china-area-data 三级联动

首先安装 element-china-area-data

npm install element-china-area-data -S

<template>
	<view class="block">
					<view class="title">
						居住地
					</view>
					<view class="muster">
						<picker class="pickerList" mode="multiSelector"
						:range="newProvinceDataList"
						range-key="label"
						:value="multiIndex" 
						@change="pickerChange" 
						@columnchange="pickerColumnchange">
							<!-- <view>{{provinceDataList[0].name}}--{{provinceDataList[0].city[0].name}}--{{provinceDataList[0].city[0].area[0]}}</view> -->
							<!-- <view class="">{{select}}</view> -->
							<view class="select-city">
								<view class="input" v-if="select !== ''">{{select}}</view>
								<view v-else class="placeholder-input">请输入居住地</view>
								<text class="iconfont icon-xiangyou"></text>
							</view>
						</picker>
					</view>
				</view>
</template>
<script>
import {regionData} from 'element-china-area-data'
export default{
		data(){
			return{
				oldpProvinceDataList: regionData,
				newProvinceDataList:[[],[],[]],
				multiIndex: [0, 0, 0],
				select:'',
				addressData:{
					name:'',
					phone:'',
					address:''
				},
				binhao:'1',
				live_in_area1: 0,
				live_in_area2: 0,
				live_in_area3: 0,
				live_in_area1_name: '',
				live_in_area2_name: '',
				live_in_area3_name: '',
			}
		},
		onLoad:function(option){
			for(let i=0; i<this.oldpProvinceDataList.length; i++){
				// console.log(this.oldpProvinceDataList[i].label);
				this.newProvinceDataList[0].push(this.oldpProvinceDataList[i]);
			}
			for(let i=0; i<this.oldpProvinceDataList[0].children.length; i++){
				// console.log(this.oldpProvinceDataList[0].children[i].label)
				this.newProvinceDataList[1].push(this.oldpProvinceDataList[0].children[i]);
			}
			for(let i=0; i<this.oldpProvinceDataList[0].children[0].children.length; i++){
				// console.log(this.oldpProvinceDataList[0].children[0].children)
				this.newProvinceDataList[2].push(this.oldpProvinceDataList[0].children[0].children[i]);
			}
		},
		methods:{
			// 省市区确认事件
			pickerChange(e){
				this.multiIndex = e.detail.value;
				// 数组内的下标
				console.log(this.multiIndex);
				// console.log(e)
				console.log('获取省')
				// console.log(this.newProvinceDataList)
				// 获取省
				// console.log(this.newProvinceDataList[0][this.multiIndex[0]])
				// 获取市
				// console.log(this.newProvinceDataList[1][this.multiIndex[1]])
				// 获取区
				// console.log(this.newProvinceDataList[2][this.multiIndex[2]])
				this.select = `${this.newProvinceDataList[0][this.multiIndex[0]].label}
								-${this.newProvinceDataList[1][this.multiIndex[1]].label}
								-${this.newProvinceDataList[2][this.multiIndex[2]].label}`
				this.live_in_area1 = this.newProvinceDataList[0][this.multiIndex[0]].value
				this.live_in_area2 = this.newProvinceDataList[1][this.multiIndex[1]].value
				this.live_in_area3 = this.newProvinceDataList[2][this.multiIndex[2]].value
				this.live_in_area1_name = this.newProvinceDataList[0][this.multiIndex[0]].label
				this.live_in_area2_name = this.newProvinceDataList[1][this.multiIndex[1]].label
				this.live_in_area3_name = this.newProvinceDataList[2][this.multiIndex[2]].label
			},
			pickerColumnchange(e){
				// 第几列滑动
				console.log(e);
				console.log('第几列滑动的下标')
				// 第几列滑动的下标
				// console.log(e.detail.value)
				// 第一列滑动
				if(e.detail.column === 0){
					this.multiIndex[0] =  e.detail.value
					// console.log('第一列滑动');
					// this.newProvinceDataList[1] = [];
					this.newProvinceDataList[1] = this.oldpProvinceDataList[this.multiIndex[0]].children.map((item,index)=>{
						// console.log(item)
						return item
					})
					// console.log(this.multiIndex)
					if(this.oldpProvinceDataList[this.multiIndex[0]].children.length === 1){
						this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].children[0].children.map((item,index)=>{
							// console.log(item)
							return item
						})
					}else{
						this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].children[this.multiIndex[1]].children.map((item,index)=>{
							// console.log(item)
							return item
						})
					}
					// 第一列滑动  第二列 和第三列 都变为第一个
					this.multiIndex.splice(1, 1, 0)
					this.multiIndex.splice(2, 1, 0)
				}
				// 第二列滑动
				if(e.detail.column === 1){
					this.multiIndex[1] =  e.detail.value
					// console.log('第二列滑动');
					// console.log(this.multiIndex)
					this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].children[this.multiIndex[1]].children.map((item,index)=>{
						// console.log(item)
						return item
					})
					// 第二列 滑动 第三列 变成第一个
					this.multiIndex.splice(2, 1, 0)
				}
				// 第三列滑动
				if(e.detail.column === 2){
					this.multiIndex[2] =  e.detail.value
					// console.log('第三列滑动')
					// console.log(this.multiIndex)
				}
			},
		}
	}
</script>

第二种方法

<template>
	<picker class="picker" mode="multiSelector" :range="region" 
		range-key="label" :value="regionIndex" @change="pickerChange"
		@columnchange="pickerColumnchange">
		<view class="uni-form-item">
			<input type="text" class="input select"
			 v-model="regionStr" name="region" :disabled="true"
			placeholder-style="color: #A7A7A7;" placeholder="请选择用工所在地址" />
			<text class="iconfont icon-xiangxia"></text>
		</view>
	</picker>
</template>
<script>
import { regionData} from 'element-china-area-data'
export default{
		data(){
			return{
				region:'',
				genderStr:'',
				regionData:regionData,
				region: [[],[],[]],
				regionIndex: [0, 0, 0],
				regionStr: '',
				address: '',
			}
		},
		created(){
			this.region[0] = this.regionData
			this.region[1] = this.regionData[0].children
			this.region[2] = this.regionData[0].children[0].children
		},
		methods:{
			pickerChange(e) {
				// console.log(e, '1');
				this.regionIndex = e.detail.value;
				this.regionStr = this.region[0][this.regionIndex[0]].label + ' ' + this.region[1][this.regionIndex[1]].label + ' ' +
					this.region[2][this.regionIndex[2]].label;
				this.address = this.region[0][this.regionIndex[0]].label + 
							this.region[1][this.regionIndex[1]].label +
							this.region[2][this.regionIndex[2]].label+'';
				console.log('编号',this.region[0][this.regionIndex[0]].value, this.region[1][this.regionIndex[1]].value, this.region[
					2][this.regionIndex[2]].value)
			},
			pickerColumnchange(e) {
				if (e.detail.column === 0) {
					// 声明城市数组
					let cityArr = [];
					let countyArr = [];
					// 设置下标
					this.regionIndex = [e.detail.value, 0, 0];
					this.$set(this.region, 1, this.regionData[e.detail.value].children);
					this.$set(this.region, 2, this.regionData[e.detail.value].children[0].children);
				}
				if (e.detail.column === 1) {
					this.regionIndex[1] = e.detail.value;
					this.regionIndex[2] = 0;
					this.$set(this.region, 2, this.regionData[this.regionIndex[0]].children[this.regionIndex[1]].children);
				}
				if (e.detail.column === 2) {
					this.regionIndex[2] = e.detail.value;
				}
			},
		}
	}
</script>