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()
}

最后的效果:

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

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

相关文章

28系统监控(CPU、内存、磁盘等)

每天五分钟学Linux | 第二十八课&#xff1a;系统监控&#xff08;CPU、内存、磁盘等&#xff09; 大家好&#xff01;欢迎再次来到我们的“每天五分钟学Linux”系列教程。在前面的课程中&#xff0c;我们学习了如何查看系统日志。今天&#xff0c;我们将探讨如何监控Linux系统…

electron 中 contextBridge 作用

1. 安全地实现渲染进程和主进程之间的通信 在 Electron 应用中&#xff0c;主进程和渲染进程是相互隔离的&#xff0c;这是为了安全和稳定性考虑。 然而&#xff0c;在很多情况下&#xff0c;渲染进程需要访问主进程中的某些功能&#xff0c;例如系统级别的操作或者一些应用级…

软件分享丨火绒应用商店

【资源分享】 资源名&#xff1a;火绒应用商店 官方网址&#xff1a;点击跳转 火绒应用商店是由火绒安全推出的一款独立软件。它提供了海量的应用程序&#xff0c;涵盖办公、社交、游戏、视频、工具等多种领域和类别&#xff0c;方便用户轻松找到所需的应用并进行一键下载安装…

Spring Cloud Alibaba Spring Cloud Spring Boot JDK 版本依赖关系

Spring Cloud Alibaba & Spring Cloud & Spring Boot & JDK 版本依赖关系 Spring Cloud Alibaba & Spring Cloud & Spring Boot Spring Cloud & Spring Boot Spring Boot & JDK JDK 8的新项目推荐版本 Spring Cloud Alibaba 2021.0.5.0* &…

S32G-VNP-RDB2开发环境搭建

下载官方镜像 刷机 cat /proc/partition or df -lh //查看sdcard卡再/dev目录挂在点 export DEVSD/dev/sdb sudo dd iffsl-image-auto-s32g274ardb2.sdcard of${DEVSD} bs1M && sync以上将SD-card插入就可以将开发板启动&#xff0c;串口接UART1&#xff0c;进入Lin…

信息化运维方案,实施方案,开发方案,信息中心安全运维资料(软件资料word)

1 编制目的 2 系统运行维护 2.1 系统运维内容 2.2 日常运行维护方案 2.2.1 日常巡检 2.2.2 状态监控 2.2.3 系统优化 2.2.4 软件系统问题处理及升级 2.2.5 系统数据库管理维护 2.2.6 灾难恢复 2.3 应急运行维护方案 2.3.1 启动应急流程 2.3.2 成立应急小组 2.3.3 应急处理过程 …

MFC 重写了listControl类(类名为A),并把双击事件的处理函数定义在A中,主窗口如何接收表格是否被双击

刚接触MFC遇到的问题&#xff0c;我在主对话框的.cpp里添加了表格的双击处理事件&#xff0c;但是没用&#xff0c;试了下添加单击的&#xff0c;发现居然可以进单击的处理函数&#xff0c;就很懵逼&#xff0c;然后我就把处理双击事件的函数添加到表格的类中&#xff0c;那这样…

鸿蒙ArkTS中的布局容器组件(Column、Row、Flex、 Stack、Grid)

在鸿蒙ArkTS中&#xff0c;布局容器组件有很多&#xff0c;常见的有&#xff1a;   ⑴ Column&#xff1a;&#xff08;垂直布局容器&#xff09;&#xff1a;用于将子组件垂直排列。   ⑵ Row&#xff1a;&#xff08;水平布局容器&#xff09;&#xff1a;用于将子组件水…

Qt低版本多网卡组播bug

原文地址 最近在某个项目中&#xff0c;发现了一个低版本Qt的bug&#xff0c;导致组播无法正常使用&#xff0c;经过一番排查&#xff0c;终于找到了原因&#xff0c;特此记录。 环境 Qt&#xff1a;5.7.0 mingw32操作系统&#xff1a;windows 11 现象 在Qt5.7.0版本中&…

RPC核心实现原理

目录 一、基本原理 二、详细步骤 三、额外考虑因素 RPC&#xff08;Remote Procedure Call&#xff0c;远程过程调用&#xff09;是一种计算机通信协议&#xff0c;也是一种用于实现分布式系统中不同节点之间进行通信和调用的技术。其实现原理主要可以分为以下几个步骤&…

Android Studio加载旧的安卓工程项目报错处理

文章目录 Invalid Gradle JDK configuration foundNDK not configuredCMake 3.10.2 was not found安装cmake适配cmake版本号 com.intellij.openapi.externalSystem.model.ExternalSystemExceptiongradle版本过低或下载不了下载gradle与依赖库超时替换gradle国内源替换Maven 仓库…

电路原理:电阻桥。

电路的基础是电阻电路。电阻电路有两种基本接线方法&#xff08;串连和并连&#xff0c;二者有不同的解算与用法&#xff1a;串连分压、并连分流&#xff09;。电阻电路就是使用基本接线方法的组合方案&#xff0c;其解算方法主要内容是判断好整体布局以及各个局部的串并连关系…

Pytorch训练时报nan

0. 引言 Pytorch训练时在batchN时loss为nan。经过断点检查发现在batchN-1时&#xff0c;网络参数非nan&#xff0c;输出非nan&#xff0c;但梯度为nan&#xff0c;导致网络参数已经全部被更新为nan&#xff0c;遇到这种情况应该如何排查&#xff0c;如何避免&#xff1f;由于导…

全星魅-物联网定位终端-北斗定位便携终端-北斗有源终端

在当今快速发展的物流运输行业中&#xff0c;精准定位与实时监控已成为确保货物安全与高效运输的关键因素。为了满足这一需求&#xff0c;QMCZ10作为一款集4G&#xff08;LTE Cat1&#xff09;通讯技术与智能定位功能于一体的终端产品&#xff0c;应运而生。它不仅具备普通定位…

银行卡二要素核验 API 对接说明

本文将介绍一种 银行卡二要素核验 API 对接说明&#xff0c;它可用于校验姓名和银行卡号的真实性和一致性。 接下来介绍下 银行卡二要素核验 API 的对接说明。 注册链接 点击链接注册&#xff0c;即可使用&#xff01; 申请流程 要使用 API&#xff0c;需要先到 银行卡二要…

关于elementui el-radio 赋值问题

今天遇到这样的问题&#xff1a; 点击的时候&#xff0c;同时选中 照抄官网&#xff01; 后来发现了问题&#xff1a; 也就是说如果你的版本太低&#xff0c;就不能用value&#xff0c;而得用label&#xff0c;于是修改 <el-radio-group v-model"searchTime"&g…

Python 大数据展示屏实例

在当今数据驱动的时代&#xff0c;有效地展示大数据对于企业和组织来说至关重要。Python 提供了丰富的库和工具&#xff0c;可以帮助我们创建令人印象深刻的大数据展示屏。在这篇博客中&#xff0c;我们将通过一个实际的实例来展示如何使用 Python 构建一个简单的大数据展示屏&…

查缺补漏---子网划分方法(定长与不定长子网)

第一类题型&#xff1a; 方法&#xff1a;切蛋糕 例1&#xff1a; 现将一个 IP 网络划分成4个子网&#xff0c;若其中一个子网是 172.16.1.128/26&#xff0c;则下列网络中&#xff0c;不可能是另外三个子网之一的是&#xff08;&#xff09; A.172.16.1.0/25 B.172…

P11229 [CSP-J 2024] 小木棍

[CSP-J 2024] 小木棍 题目描述 小 S 喜欢收集小木棍。在收集了 n n n 根长度相等的小木棍之后&#xff0c;他闲来无事&#xff0c;便用它们拼起了数字。用小木棍拼每种数字的方法如下图所示。 现在小 S 希望拼出一个正整数&#xff0c;满足如下条件&#xff1a; 拼出这个数…

嵌入式开发之进程函数

1、进程创建-fork #include <unistd.h> pid_t fork(void); 创建新的进程&#xff0c;失败时返回-1成功时父进程返回子进程的进程号&#xff0c;子进程返回0通过fork的返回值区分父进程和子进程 pid_t pid; //fork子进程之后&#xff0c;子进程和父进程会同时继续往下执行…