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

news2024/11/28 5:08:17

1.导入插件

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

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

2.组件调用

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

<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>
data(){
    return {
        localData:[], //省市区地址
		curLocation: uni.getStorageSync('location_address'),
    }
}

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

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

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

在页面中引入:

const cityRows = require('@/common/opendb-master/collection/opendb-city-china/data.json')
// 省市区数据树生成
			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
			},
onLoad(options){
    this.localData = this.get_city_tree()
}

最后的效果:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2235485.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

力扣:94--中序遍历二叉树

树 – 二叉树 完全二叉树&#xff1a; 完全二叉树可以用数组完美匹配位置&#xff08;先序存储&#xff1a;根左右&#xff09;&#xff0c; 推论一 &#xff1a; 位置为k的节点&#xff0c;左孩子&#xff1a;2*k 1 &#xff0c;右孩子 &#xff1a; 2 * &#xff08;k 1&…

「C/C++」C/C++STL篇 之 数组赋值给std::vector多种方法

✨博客主页何曾参静谧的博客&#x1f4cc;文章专栏「C/C」C/C程序设计&#x1f4da;全部专栏「VS」Visual Studio「C/C」C/C程序设计「UG/NX」BlockUI集合「Win」Windows程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「PK」Parasoli…

关于 Qt+Osg中使用背景图HUD受到后绘制几何图形顶点颜色影响 的解决方法

若该文为原创文章&#xff0c;转载请注明出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/143607816 长沙红胖子Qt&#xff08;长沙创微智科&#xff09;博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV、Op…

使用python向钉钉群聊发送消息

使用python向钉钉群聊发送消息 一、在钉钉群中新建机器人二、使用代码发送消息 一、在钉钉群中新建机器人 在群设置中添加机器人 选择自定义 勾选对应的安全设置 完成后会展示webhook&#xff0c;将地址复制出来&#xff0c;并记录&#xff0c;后面会用到 二、使用代码发送消…

第100+31步 ChatGPT学习:概率校准 Quantile Calibration

基于Python 3.9版本演示 一、写在前面 最近看了一篇在Lancet子刊《eClinicalMedicine》上发表的机器学习分类的文章&#xff1a;《Development of a novel dementia risk prediction model in the general population: A large, longitudinal, population-based machine-learn…

这款神器,运维绝杀 !!!

项目简介 CrowdSec 是一款开源的、基于社区协作的网络安全防护工具&#xff0c;它通过分析和共享IP信誉数据来对抗恶意行为。该软件不仅支持IPv6&#xff0c;而且相较于传统的Python实现&#xff0c;其采用Go语言编写&#xff0c;运行速度提升了60倍。CrowdSec 利用Grok模式解析…

Unreal5从入门到精通之如何在指定的显示器上运行UE程序

前言 我们有一个设备,是一个带双显示器的机柜,主显示器是一个小竖屏,可以触屏操作,大显示器是一个普通的横屏显示器。我们用这个机柜的原因就是可以摆脱鼠标和键盘,直接使用触屏操作,又可以在大屏观看,非常适合用于教学。 然后我们为这款机柜做了很多个VR项目,包括Uni…

R7:糖尿病预测模型优化探索

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 一、实验目的&#xff1a; 探索本案例是否还有进一步优化的空间 二、实验环境&#xff1a; 语言环境&#xff1a;python 3.8编译器&#xff1a;Jupyter notebo…

Django 框架:全方位技术分析

Django 框架:全方位技术分析 介绍 Django 是一个高级 Python Web 框架,鼓励快速开发和遵循设计的最佳实践。由经验丰富的开发人员打造,开源并可扩展,Django 旨在让构建 Web 应用更快、更轻松。 历史背景 Django 始于 2003 年,最初是 Lawrence Journal-World 报社的一个内…

如何用 ChatPaper.ai 打造完美的 AI 课堂笔记系统

作为学生&#xff0c;我们都遇到过这样的困扰&#xff1a;上课时记笔记太投入就听不进讲解&#xff0c;专注听讲又担心错过重要知识点。有了AI助手&#xff0c;这个问题就可以优雅地解决了。今天跟大家分享如何用ChatPaper.ai构建个人的智能课堂笔记系统。 为什么需要AI辅助记笔…

《手写Spring渐进式源码实践》实践笔记(第十六章 三级缓存解决循环依赖)

文章目录 第十六章 通过三级缓存解决循环依赖背景技术背景Spring循环依赖循环依赖类型三级缓存解决循环依赖 业务背景 目标设计一级缓存实现方案设计思路代码实现测试结果 三级缓存实现方案 实现代码结构类图实现步骤 测试事先准备属性配置文件测试用例测试结果&#xff1a; 总…

Java8新特性/java

1.lambda表达式 区别于js的箭头函数&#xff0c;python、cpp的lambda表达式&#xff0c;java8的lambda是一个匿名函数&#xff0c;java8运行把函数作为参数传递进方法中。 语法格式 (parameters) -> expression 或 (parameters...) ->{ statements; }实战 替代匿名内部类…

ubuntu双屏只显示一个屏幕另一个黑屏

简洁的结论&#xff1a; 系统环境 ubuntu22.04 nvidia-535解决方案 删除/etc/X11/xorg.conf 文件 记录一下折腾大半天的问题。 ubuntu系统是22.04,之前使用的时候更新驱动导致桌面崩溃&#xff0c;重新安装桌面安装不上&#xff0c;请IT帮忙&#xff0c;IT一番操作过后也表示…

Oracle OCP认证考试考点详解082系列15

题记&#xff1a; 本系列主要讲解Oracle OCP认证考试考点&#xff08;题目&#xff09;&#xff0c;适用于19C/21C,跟着学OCP考试必过。 71. 第71题&#xff1a; 题目 解析及答案&#xff1a; 对于数据库&#xff0c;使用数据库配置助手&#xff08;DBCA&#xff09;可以执行…

为什么说SQLynx是链接国产数据库的最佳选择?

第一是因为SQLynx提供了广泛的国产数据库支持&#xff0c;除了市面上的主流数据库MYSQL、Oracle、PostgreSQL 、SQL Server、SQLite、MongoDB外、还支持达梦人大金仓等国产数据源&#xff01; 近几年随着国产数据库市场的不断发展和成熟&#xff0c;越来越多的企业和机构开始选…

一个基于强大的 PostgreSQL 数据库构建的无代码数据库平台,快速构建应用程序,而无需编写一行代码(带私活源码)

随着企业和个人开发需求的不断增加&#xff0c;无代码平台成为了现代开发的重要组成部分&#xff0c;帮助那些没有技术背景的用户也能轻松创建和管理数据库应用程序。今天&#xff0c;我将向大家推荐一个非常出色的开源项目——Teable&#xff0c;它不仅支持无代码开发&#xf…

软件开发项目管理:实现目标的实用指南

由于软件项目多数是复杂且难以预测的&#xff0c;对软件开发生命周期的深入了解、合适的框架以及强大的工作管理平台是必不可少的。项目管理系统在软件开发中通常以监督为首要任务&#xff0c;但优秀的项目计划、管理框架和软件工具可以使整个团队受益。 软件开发项目管理的主要…

计算网络信号

题目描述&#xff1a; 网络信号经过传递会逐层衰减&#xff0c;且遇到阻隔物无法直接穿透&#xff0c;在此情况下需要计算某个位置的网络信号值。注意&#xff1a;网络信号可以绕过阻隔物 array[m][n]的二维数组代表网格地图&#xff0c; array[i][j]0代表i行j列是空旷位置&…

ESP8266 自定义固件烧录-Tcpsocket固件

一、固件介绍 固件为自定义开发的一个适配物联网项目的开源固件&#xff0c;支持网页配网、支持网页tcpsocket服务器配置、支持串口波特率设置。 方便、快捷、稳定&#xff01; 二、烧录说明 固件及工具打包下载地址&#xff1a; https://download.csdn.net/download/flyai…

数据结构与算法——Java实现 52.力扣98题——验证二叉搜索树

我将一直向前&#xff0c;带着你给我的淤青 —— 24.11.5 98. 验证二叉搜索树 给你一个二叉树的根节点 root &#xff0c;判断其是否是一个有效的二叉搜索树。 有效 二叉搜索树定义如下&#xff1a; 节点的左子树只包含 小于 当前节点的数。节点的右子树只包含 大于 当前节点的…