uniapp-省市区三级联动的实现

uniapp-省市区三级联动

插件地址：https://ext.dcloud.net.cn/plugin?id=1301

目前还是个前端小白，所以都是找别人的插件来使用，如果有更好的求分享！！！

导入插件

我是用Hbuilder直接导入：

遇到的错误

报错：
Avoid using non-primitive value as key, use string/number value instead. 09:39:45.540 found in
解决：
v-for循环里，key值重复

报错：Duplicate keys detected: ‘[object Object]’. This may cause an update error.
09:41:20.954 found in
解决：还是键值的问题，检测到重复的键值

修改插件中的代码：
v-for="(item,index) in cityData" :key=“index”

修改内容

修改：
1.将原插件的四级联动修改成了三级联动

2.在最后一次地区选择方法中，加入一个返回值，可以返回给input标签
this.bb=this.province+" “+this.city+” "+this.area;
this.$emit(“conceal”,this.bb);

3.可以修改插件的高度
this.heightCot = (res.safeArea.height * 2) / 3

4.设置插件弹出时机
通过设置popup初始为false
点击输入框 设置 this.popup=true

代码

插件的内容
erha-picker.vue

<template>
	<view>
		<view class="ifshow" @click="showList">
			<view class="level-container">
					<ul class="name-list">
						<li :class="showIndex==0?'select':''" @click="anewSelect(0)">{{province}}</li>
						<li :class="showIndex==1?'select':''" @click="anewSelect(1)" v-if="showIndex>=1">{{city}}</li>
						<li :class="showIndex==2?'select':''" @click="anewSelect(2)" v-if="showIndex>=2">{{area}}</li>
					<!-- 	<li :class="showIndex==3?'select':''" @click="anewSelect(3)" v-if="showIndex>=3">{{street}}</li> -->
					</ul>
					<ul v-if="showIndex==0" class="content" :style="'height:'+ heightCot + 'rpx'">
						<li @click="selectPro(index,item.label)" v-for="(item,index) in provinceData" :key="index">{{item.label}}</li>
					</ul>
			
					<ul v-if="showIndex==1" class="content" :style="'height:'+ heightCot + 'rpx'">
						<li @click="selectCity(index,item.label)" v-for="(item,index) in cityData" :key="index">{{item.label}}</li>
					</ul>
			
					<ul v-if="showIndex==2" class="content" :style="'height:'+ heightCot + 'rpx'">A
						<li @click="selectaArea(index,item.label)" v-for="(item,index) in areaData" :key="index">{{item.label}}</li>
					</ul>
			<!-- 
					<ul v-if="showIndex==3" class="content" :style="'height:'+ heightCot + 'rpx'">
						<li @click="selectStreet(index,item)" v-for="(item,index) in streetsData" :key="index">{{item}}</li>
					</ul> -->
				</view>
		</view>
	</view>
</template>

<script>
	import provinceData from './city-data/province.js';
	import getCity from './city-data/city.js';
	import getArea from './city-data/area.js';
	// import getStreets from './city-data/streets.js';
	export default {
		data() {
			return {
				province: "请选择",
				city: "请选择",
				area: "请选择",
				// street: "请选择",
				cityDataAll: '', // 市的所有數據
				getAreaAll: '', // 区的所有数据
				// getStreetsAll: '', // 街道的所有数据
				presentIndex: [],
				proIndex: 0,
				cityIndex: 0,
				areaIndex: 0,

				provinceData: '', // 当前展示的省数据
				cityData: '', // 当前展示的市数据
				areaData: '', //当前展示的区数据
				// streetsData: '', //当前展示的区数据
				showIndex: 0,
				heightCot: 0,
				bb: 0
			}
		},
		created() {
			uni.getSystemInfo({
				success: res => {
					// 设置组件所占高度
					// console.log(res.safeArea.height)
					this.heightCot = (res.safeArea.height * 2) / 3
				}
			})
		},
		mounted() {
			// console.log(provinceData)
			this.provinceData = provinceData;
			this.cityDataAll = getCity;
			this.getAreaAll = getArea;
			// this.getStreetsAll = getStreets
		},
		methods: {
			showList(e){
				console.log("111111")
			},
			anewSelect(num) {
				switch (num) {
					case 0:
						this.showIndex = 0;
						this.areaData = [];
						// this.streetsData = [];
						this.city = '请选择';
						this.area = '请选择';
						// this.street = '请选择'
						break;
					case 1:
						this.showIndex = 1;
						this.areaData = [];
						// this.streetsData = [];
						this.area = '请选择';
						// this.street = '请选择'
						break;
					case 2:
						console.log(11111);
						break;
				}
			},
			selectPro(index, label) {
				console.log(index)
				const {
					cityDataAll
				} = this;
				this.proIndex = index; // 当前省的下标
				this.province = label;
				this.cityData = cityDataAll[index];
				this.showIndex = 1;

			},
			selectCity(index, label) {
				const {
					proIndex
				} = this;
				//当前选择的地区下标
				// console.log(this.getAreaAll)
				this.city = label;
				this.cityIndex = index; // 当前市的下标
				this.areaData = this.getAreaAll[proIndex][index];
				this.showIndex = 2;
			},
			selectaArea(index, label) {
				const {
					proIndex,
					cityIndex
				} = this;
				this.area = label;
				this.showIndex = 3;
				this.bb=this.province+" "+this.city+" "+this.area;
				// console.log(this.bb);
				this.$emit("conceal",this.bb);
			}
		}
	}
</script>

<style lang="less">
	.ifshow{
		
	}
	ul,li{
		list-style: none;
	}
	.level-container {
		width: 100%;
		background: #ffffff;
		position: fixed;
		bottom: 0;

		.select {
			color: red;
			position: relative;

			&::after {
				content: '';
				width: 40rpx;
				height: 6rpx;
				background: red;
				position: absolute;
				left: 50%;
				bottom: -8rpx;
				margin-left: -20rpx;
			}
		}

		li {
			font-size: 26rpx;
		}

		.content,
		.name-list {
			padding: 0 20rpx;
		}

		.title {
			font-size: 32rpx;
			margin: 30rpx 20rpx;
		}

		.name-list {
			display: flex;

			li {
				margin-right: 40rpx;
				padding-bottom: 6rpx;
			}
		}

		.content {
			margin-top: 20rpx;
			height: 600rpx;
			overflow-y: auto;

			li {
				border-bottom: 1px solid #f1f1f1;
				padding: 20rpx 0;
			}

			li:last-child {
				border-bototm: none !important;
			}
		}
	}
</style>

主页代码:

<template>
	<view class="item">
		<ehPicker @conceal="conceal" v-if="popup" />
		<view class="list11 f-r a-c">
			<text>选择地区</text>
			<input type="text" placeholder="选择省/市/区" v-model="address1" @click="add" />
			
		</view>
		<view class="p-t-20">
			<button style="background-color: #4a95df; color: #FFFFFF;" type="default" @click="addAddress">保存</button>
		</view>
	</view>
</template>

<script>
	import ehPicker from '@/components/erha-picker/erha-picker.vue'; 	
	export default {
		data() {
			return {
				name:'',
				phone:'',
				address:'',
				address1:'',
				address2:'',
				popup:false
			}
		},
		methods:{
			addAddress:e=>{
				console.log("已添加")
			}
		},
		components:{
		    ehPicker
		},
		methods:{
			add(e){
				this.popup=true
			},
			conceal(param) {
				// 获取到传过来的 省 市 区 县数据
				console.log("22222222");
				// 选择完毕后隐藏
				this.popup = false;		
				this.address1 = param;
			},		
			addAddress(e){
				console.log("已添加")
			}
		}

	}
</script>

<style>

	
	
</style>

实现效果