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.rhkb.cn/news/467367.html

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

相关文章

关于Flutter空安全升级方案整理

前言 Flutter 从 2.0 版本开始支持空安全&#xff08;Null Safety&#xff09;。dart 版本为&#xff1a; environment:sdk: ">2.12.0 < 3.0.0"升级到空安全后&#xff0c;由于语法的变动&#xff0c;基本上整个工程&#xff0c;代码都爆红&#xff0c;这对项…

免费送源码:Java+ssm+MySQL ssm家电售后服务 计算机毕业设计原创定制

摘 要 信息化社会内需要与之针对性的信息获取途径&#xff0c;但是途径的扩展基本上为人们所努力的方向&#xff0c;由于站在的角度存在偏差&#xff0c;人们经常能够获得不同类型信息&#xff0c;这也是技术最为难以攻克的课题。针对家电售后服务等问题&#xff0c;对家电售后…

共享汽车管理新纪元:SpringBoot框架应用

4系统概要设计 4.1概述 本系统采用B/S结构(Browser/Server,浏览器/服务器结构)和基于Web服务两种模式&#xff0c;是一个适用于Internet环境下的模型结构。只要用户能连上Internet,便可以在任何时间、任何地点使用。系统工作原理图如图4-1所示&#xff1a; 图4-1系统工作原理…

yaml文件编写

Kubernetes 支持YAML和JSON格式管理资源 JSON 格式:主要用于 api 接口之间消息的传递 YAML 格式;用于配置和管理,YAML是一种简洁的非标记性语言,内容格式人性化容易读懂 一&#xff0c;yaml语法格式 1.1 基本语法规则 使用空格进行缩进&#xff08;不使用制表符&#xff0…

ssm071北京集联软件科技有限公司信息管理系统+jsp(论文+源码)_kaic

毕 业 设 计&#xff08;论 文&#xff09; 题目&#xff1a;北京集联软件科技有限公司信息管理系统 \ 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本信息…

满足大众需求的理想选择:1000平米气膜羽毛球馆—轻空间

随着全民健身热潮的兴起和羽毛球运动的广泛普及&#xff0c;越来越多的企事业单位、学校以及社区开始寻求适合的大型羽毛球场地。对于大众需求者而言&#xff0c;如何在有限的预算和时间内建设一个高效且灵活的羽毛球馆&#xff1f;1000平米气膜羽毛球馆正是应运而生的理想解决…

原生鸿蒙应用市场:赋能开发者全生命周期服务体验

文章目录 背景自动化检测前移&#xff1a;早发现&#xff0c;早解决技术细节&#xff1a;静态代码分析与兼容性测试应用场景 按需加载&#xff1a;优化性能&#xff0c;提升用户体验技术细节&#xff1a;模块化与懒加载实现应用场景 应用加密&#xff1a;保护应用代码安全&…

vue3组合式API下封装hooks使用生命周期,在await之后调用hooks会有警告

起因&#xff1a;想封装一个hooks实现echarts图表随屏幕大小resize并且组件销毁时移除监听。结果在组件里面调用这个hooks&#xff0c;有个告警提示 [Vue warn]: onBeforeUnmount is called when there is no active component instance to be associated with. Lifecycle inje…

wget命令之Tomcat(三)

引言 Tomcat是一个开源的Java Web应用服务器&#xff0c;实现了多个关键的Java EE规范&#xff0c;包括Servlet、JSP&#xff08;JavaServer Pages&#xff09;、JavaWebSocket等。由于Tomcat技术先进、性能稳定且免费&#xff0c;它成为了许多企业和开发者的首选Web应用服务器…

【机器学习】决定系数(R²:Coefficient of Determination)

决定系数&#xff0c;也称为 R 平方&#xff0c;是一种用于衡量回归模型预测效果的统计指标。它表示了模型解释目标变量总变异的程度&#xff0c;数值介于 0 和 1 之间&#xff0c;数值越接近 1 表明模型的解释力越强。 1. 的定义和公式 的公式如下&#xff1a; 其中&#xf…

Cross Modal Transformer: Towards Fast and Robust 3D Object Detection

代码地址 https://github.com/junjie18/CMT 1. 引言 在本文中&#xff0c;我们提出了Cross-Modal Transformer&#xff08;CMT&#xff09;&#xff0c;这是一种简单而有效的端到端管道&#xff0c;用于鲁棒的3D对象检测&#xff08;见图1&#xff08;c&#xff09;&#xf…

十四、Linux线程(一)

1.守护进程 1.守护进程的特点 是后台服务进程 独立于控制终端 周期性执行某任务 不受用户登录注销影响 一般采用以d结尾的名字&#xff08;服务&#xff09; 2.进程组 进程的组长&#xff1a; 组里边的第一进程 进程组的ID进程中的组长的ID 进程中组长的选择&#xff1…

多模态数字人AI产品正在革新金融业,解密头部银行、证券公司都在用的AI工具

在人工智能迅猛发展的时代背景下&#xff0c;金融业正迎来一场深刻的变革。 多模态的人工智能&#xff0c;以其独特的魅力&#xff0c;正在重塑金融行业的格局&#xff0c;为金融服务带来前所未有的新想象。从今年以来行业对AI技术的探索与实践中&#xff0c;AIGC 3D数字人多模…

多态性核SSR的鉴定

多态性核SSR的鉴定 文章目录 多态性核SSR的鉴定前言一、使用bwa对测序数据进行mapping二、使用SOAPdenovo2对核序列进行从头组装成scaffolds三、使用CandiSSR寻找多态性核SSR3.1. 安装CandiSSR软件的准备3.2. 运行CandiSSR时的准备3.3. 整理得到的结果文件 四、统计Contig的数量…

【AIGC探索】AI实现PPT生产全流程

AI实现PPT生产流程 简单概括流程就是&#xff1a; 选择用百度文库AI生成PPT&#xff0c;使用WPS和islide辅助美化&#xff0c;使用文字大模型生成大纲&#xff0c;使用宏指令快速规范细节。 理由如下&#xff1a; 大多数PPT工具生成大纲会有文字篇幅限制&#xff0c;通过大模型…

鸿蒙ArkTS中的获取网络数据

一、通过web组件加载网页 在C/S应用程序中&#xff0c;都有网络组件用于加载网页&#xff0c;鸿蒙ArkTS中也有类似的组件。   web组件&#xff0c;用于加载指定的网页&#xff0c;里面有很多的方法可以调用&#xff0c;虽然现在用得比较少&#xff0c;了解还是必须的。   演…

数学建模(基于Python实现)--灰色关联分析法讲解,含案例

前言 这是去年底学数学建模老哥的建模课程笔记&#xff1b; 未来本人将陆陆续续的更新数学建模相关的一些基础算法&#xff0c;大家可以持续关注一下&#xff0c;主要在于运用&#xff1b; 提示&#xff1a;数学建模只有实战才能提升&#x1f525;​&#x1f525;​&#x1f…

【go从零单排】error错误处理及封装

&#x1f308;Don’t worry , just coding! 内耗与overthinking只会削弱你的精力&#xff0c;虚度你的光阴&#xff0c;每天迈出一小步&#xff0c;回头时发现已经走了很远。 &#x1f4d7;概念 在 Go 语言中&#xff0c;error 是一个内置的接口类型&#xff0c;用于表示错误情…

论文阅读笔记:Depth Pro: Sharp Monocular Metric Depth in Less Than a Second

论文阅读笔记&#xff1a;Depth Pro: Sharp Monocular Metric Depth in Less Than a Second 1 背景1.1 动机1.2 提出的方法 2 创新点3 方法4 模块4.1 训练目标4.2 课程训练 4.3 边缘评价指标4.4 焦距估计 5 效果5.1 和SOTA方法的对比 论文&#xff1a;https://arxiv.org/abs/24…

flutter 项目初建碰到的控制台报错无法启动问题

在第一次运行flutter时&#xff0c;会碰见一直卡在Runing Gradle task assembleDebug的问题。其实出现这个问题的原因有两个。 一&#xff1a;如果你flutter -doctor 检测都很ok&#xff0c;而且环境配置都很正确&#xff0c;那么大概率就是需要多等一会&#xff0c;少则几十分…