uniapp组件实现省市区三级联动选择

1.导入插件

先将uni-data-picker组件导入我们的HBuilder项目中,在DCloud插件市场搜索uni-data-picker

点击下载插件并导入到我们的项目中

2.组件调用

curLocation :获取到的当前位置(省市区)

javascript 复制代码
<uni-data-picker v-slot:default="{data, error, options}" :localdata="localData" popup-title="请选择省市区" @change="onchange" @nodeclick="onnodeclick">
						<view class="selectedAddress">
							<view v-if="data.length == 0 && curLocation">{{ curLocation }}</view>
							<view v-if="data.length" class="selected">
								<view v-for="(item,index) in data" :key="index" class="selected-item">
								<text>{{item.text}} </text> 
								</view>
							</view>
							<view class="addrlocation">
								<uni-icons type="location" color="#ec4149" size="24"></uni-icons>
							</view>
						</view>
					</uni-data-picker>
javascript 复制代码
data(){
    return {
        localData:[], //省市区地址
		curLocation: uni.getStorageSync('location_address'),
    }
}

3.处理我们需要的省市区数据

1)在https://gitee.com/dcloud/opendb下载省市区源数据,collection/opendb-city-china

2)下载后的数据是一组一维对象数组,接下来把这个数组处理成树形结构

在页面中引入:

javascript 复制代码
const cityRows = require('@/common/opendb-master/collection/opendb-city-china/data.json')
javascript 复制代码
// 省市区数据树生成
			get_city_tree () {
				let res = []
				if (cityRows.length) {
					// 递归生成
					res = this.handleTree(cityRows)
				}
				return res
			},


handleTree (data, parent_code = null) {
				let res = []
				
				let keys = {
					id: 'code',
					pid: 'parent_code',
					children: 'children',
					
					text: 'name',
					value: 'code'
				}
				
				let oneItemDEMO = {
					text: '',
					value: '',
					children: []
				}
				let oneItem = {}
				
				// 循环
				for (let index in data) {
					// 判断
					if (parent_code === null) {
						// 顶级菜单 - 省
						if (!data[index].hasOwnProperty( keys.pid ) || data[index][keys.pid] == parent_code) {
							// 不存在parent_code,或者已匹配
							oneItem = JSON.parse(JSON.stringify(oneItemDEMO))
							oneItem.text = data[index][keys.text]
							oneItem.value = data[index][keys.value]
							
							// 递归下去
							oneItem.children = this.handleTree(data, data[index][keys.id])
							res.push(oneItem)
						} 
					} else {
						// 非顶级菜单 - 市、区、街道
						if (data[index].hasOwnProperty( keys.pid ) && data[index][keys.pid] == parent_code) {
							// 已匹配
							oneItem = JSON.parse(JSON.stringify(oneItemDEMO))
							oneItem.text = data[index][keys.text]
							oneItem.value = data[index][keys.value]
							
							// 递归下去
							oneItem.children = this.handleTree(data, data[index][keys.id])
							res.push(oneItem)
							
						}
					}
				}
				return res
			},
javascript 复制代码
onLoad(options){
    this.localData = this.get_city_tree()
}

最后的效果:

相关推荐
儿时可乖了几秒前
使用 Java 操作 SQLite 数据库
java·数据库·sqlite
ruleslol2 分钟前
java基础概念37:正则表达式2-爬虫
java
雯0609~15 分钟前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ18 分钟前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
xmh-sxh-131419 分钟前
jdk各个版本介绍
java
学习前端的小z24 分钟前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
天天扭码38 分钟前
五天SpringCloud计划——DAY2之单体架构和微服务架构的选择和转换原则
java·spring cloud·微服务·架构
程序猿进阶38 分钟前
堆外内存泄露排查经历
java·jvm·后端·面试·性能优化·oom·内存泄露
FIN技术铺43 分钟前
Spring Boot框架Starter组件整理
java·spring boot·后端
彭世瑜1 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript