uniapp组件实现省市区三级联动选择
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()
}
最后的效果:

相关文章:
uniapp组件实现省市区三级联动选择
1.导入插件 先将uni-data-picker组件导入我们的HBuilder项目中,在DCloud插件市场搜索uni-data-picker 点击下载插件并导入到我们的项目中 2.组件调用 curLocation :获取到的当前位置(省市区) <uni-data-picker v-slot:defa…...
【C++】异常处理机制(对运行时错误的处理)
🌈 个人主页:谁在夜里看海. 🔥 个人专栏:《C系列》《Linux系列》 ⛰️ 天高地阔,欲往观之。 目录 引言 1.编译器可以处理的错误 2.编译器不能处理的错误 3.传统的错误处理机制 assert终止程序 返回错误码 一、…...
C++ boost steady_timer使用介绍
文章目录 1. 引入必要的头文件2. 基本用法2.1 同步定时器解释:2.2 异步定时器解释:3. 异步定时器与回调函数4. 设置定时器的超时时间4.1 使用秒、毫秒、微秒4.2 修改定时器的到期时间5. 多次使用定时器6. 循环执行任务7. 错误处理总结:C++ Boost 库提供了 boost::asio::stea…...
JVM 由多个模块组成,每个模块负责特定的功能
Java虚拟机(JVM, Java Virtual Machine)是一个抽象的计算机,它提供了一个运行环境,使得Java字节码可以在不同的平台上执行。JVM 由多个模块组成,每个模块负责特定的功能。以下是 JVM 的主要模块及其功能: …...
ORACLE批量插入更新如何拆分大事务?
拆分大事务 一、批量插入更新二、拆分事务之前文章MYSQL批量插入更新如何拆分大事务?说明了Mysql如何拆分,本篇文章探讨Oracle或OceanBase批量插入更新拆分大事务的问题 一、批量插入更新 oracle批量插入更新可使用merge语法eg: merge test ausing test_tmp bon (a.id = b.id…...
kafka+zookeeper的搭建
kafka从2.8版本开始,就可以不用配置zookeeper了,但是也可以继续配置。我目前使用的kafka版本是kafka_2.12-3.0.0.tgz,其中前面的2.12表示是使用该版本的scala语言进行编写的,而后面的3.00才是kafka当前的版本。 通过百度网盘分享…...
Spark中的宽窄依赖
一、什么是依赖关系 这里通过一张图来解释: result_rdd是由tuple_rdd使用reduceByKey算子得到的, 而tuple_rdd是由word_rdd使用map算子得到的,word_rdd又是由input_rdd使用flatMap算子得到的。它们之间的关系就称为依赖关系! 二…...
安装和运行开发微信小程序
下载HBuilder uniapp官网 uni-app官网 微信开发者工具 安装 微信小程序 微信小程序 官网 微信小程序 配置 运行 注意:运行前需要开启服务端口 如果运行看不到效果,设置下基础库选别的版本 配置...
地图框架之mapbox——(五)
今天主要学习mapbox中如何使用画笔! 一、导入画笔依赖 <script src"https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.2/mapbox-gl-draw.js"></script> <link rel"stylesheet" href"https://api.mapbox…...
Hive 的数据类型
基本类型 整型 TINYINT: 1字节整数,范围从 -128 到 127。SMALLINT: 2字节整数,范围从 -32,768 到 32,767。INT: 4字节整数,范围从 -2,147,483,648 到 2,147,483,647。BIGINT: 8字节整数,范围从 -9,223,372,036,854,775,808 到 9…...
2024下半年软考考后估分,快来预约!
2024下半年软考这周末就要开考了!考后大家最关心的,莫过于考试成绩。届时会为家更新回忆版真题及答案,现在就可以开始预约啦~ 因为是回忆版,老师做题也需要时间,答案会慢慢更新,大家耐心等待片刻ÿ…...
第8章 利用CSS制作导航菜单作业
1.利用CSS技术,结合链接和列表,设计并实现“山水之间”页面。 浏览效果如下: HTML代码如下: <!DOCTYPE html> <html><head><meta charset"utf-8" /><title>山水之间</title><…...
基于Spring Boot的船舶监造系统的设计与实现,LW+源码+讲解
摘要 近年来,信息化管理行业的不断兴起,使得人们的日常生活越来越离不开计算机和互联网技术。首先,根据收集到的用户需求分析,对设计系统有一个初步的认识与了解,确定船舶监造系统的总体功能模块。然后,详…...
linux强制修改mysql的root账号密码
在Linux环境下,如果您忘记了MySQL的root密码,可以通过以下步骤来强制修改root密码: 在执行这些步骤之前,请确保您有足够的权限来执行这些命令。 停止MySQL服务: systemctl stop mysql 启动MySQL的安全模式,…...
CentOS系统查看CPU、内存、操作系统等信息
Linux系统提供了一系列命令可以用来查看系统硬件信息,如CPU的物理个数、核数、逻辑CPU数量、内存信息和操作系统版本。 查看物理CPU、核数和逻辑CPU 在多核、多线程的系统中,了解物理CPU个数、每个物理CPU的核数和逻辑CPU个数至关重要。超线程技术进一步…...
针对解决前后端BUG的个人笔记
1-IDEA Q:Required Java version 17 is not supported by SDK 1.8. The maximum supported Java version is 8. A: 我们只知道IDEA页面创建Spring项目,其实是访问spring initializr去创建项目。故我们可以通过阿里云国服去间接创建Spring项目。将https…...
5G时代已来:我们该如何迎接超高速网络?
内容概要 随着5G技术的普及,我们的生活似乎变得更加“科幻”了。想象一下,未来的智能家居将不仅仅是能够听你说“开灯”;它们可能会主动询问你今天心情如何,甚至会推荐你一杯“维他命C芒果榨汁”,帮助你抵御夏天的炎热…...
企业级-实现Redis封装层
作者:fyupeng 技术专栏:☞ https://github.com/fyupeng 项目地址:☞ https://github.com/fyupeng/distributed-blog-system-api 留给读者 封装 Redis 客户端Dao层、分布式锁等。 一、介绍 二、代码 DataInitialLoadRunner.java /*** Clas…...
SpringBoot使用ApplicationContext.getBean启动报空指针处理记录
问题:项目启动报空指针 定位:新增filter中init方法使用getbean控制 解决:在新增filter上加注解 DependsOn({"applicationContextUtils"}) Component DependsOn({"applicationContextUtils"})//此处解决空指针问题 pu…...
MongoDB Shell 基本命令(三)聚合管道
管道含义 类似Linux中的管道,前一个命令的输出作为后一个命令的输入。 显示网络连接、路由表和网络接口统计信息 netstat -ano -netstat:network statistics 网络统计 -a:显示所有连接和监听端口,包括所有活动的TCP和UDP连接。 -n:以数字形式显示地址…...
后进先出(LIFO)详解
LIFO 是 Last In, First Out 的缩写,中文译为后进先出。这是一种数据结构的工作原则,类似于一摞盘子或一叠书本: 最后放进去的元素最先出来 -想象往筒状容器里放盘子: (1)你放进的最后一个盘子(…...
龙虎榜——20250610
上证指数放量收阴线,个股多数下跌,盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型,指数短线有调整的需求,大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的:御银股份、雄帝科技 驱动…...
基于大模型的 UI 自动化系统
基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统,利用大模型实现智能 UI 自动化,结合计算机视觉和自然语言处理技术,实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...
调用支付宝接口响应40004 SYSTEM_ERROR问题排查
在对接支付宝API的时候,遇到了一些问题,记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...
AI Agent与Agentic AI:原理、应用、挑战与未来展望
文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例:使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例:使用OpenAI GPT-3进…...
屋顶变身“发电站” ,中天合创屋面分布式光伏发电项目顺利并网!
5月28日,中天合创屋面分布式光伏发电项目顺利并网发电,该项目位于内蒙古自治区鄂尔多斯市乌审旗,项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站,总装机容量为9.96MWp。 项目投运后,每年可节约标煤3670…...
相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)
【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...
爬虫基础学习day2
# 爬虫设计领域 工商:企查查、天眼查短视频:抖音、快手、西瓜 ---> 飞瓜电商:京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空:抓取所有航空公司价格 ---> 去哪儿自媒体:采集自媒体数据进…...
2025季度云服务器排行榜
在全球云服务器市场,各厂商的排名和地位并非一成不变,而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势,对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析: 一、全球“三巨头”…...
【Redis】笔记|第8节|大厂高并发缓存架构实战与优化
缓存架构 代码结构 代码详情 功能点: 多级缓存,先查本地缓存,再查Redis,最后才查数据库热点数据重建逻辑使用分布式锁,二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...
