当前位置：首页 > news >正文

uniapp 选择省市区省市以及回显

news 来源：原创 2025/7/27 22:18:34

在这里插入图片描述

从gitee仓库可以拿到demo 以及 json省市区文件
// 这是组件部分

<template><uni-popup ref="popup" type="bottom"><view class="popup"><view class="picker-btn"><view class="left" @click="cancel">取消</view><view class="right" @click="confirm">确定</view></view><picker-view:indicator-style="indicatorStyle":value="valueArr"@change="bindChange"><picker-view-column><viewclass="item"v-for="(item, index) in province[0]":key="index">{{ item.name }}</view></picker-view-column><picker-view-column v-if="province[1]"><viewclass="item"v-for="(item, index) in province[1]":key="index">{{ item.name }}</view></picker-view-column><picker-view-column v-if="province[2]"><viewclass="item"v-for="(item, index) in province[2]":key="index">{{ item.name }}</view></picker-view-column></picker-view></view></uni-popup>
</template>
<script>
import provinces from "./provinces.json";
import cities from "./cities.json";
import areas from "./areas.json";
export default {props: {value: {type: String,default: "",},twoStage: {type: Boolean,default: false,},},name: "ZlAddress",data() {return {indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth / (750 / 100))}px;`,valueArr: [0, 0, 0], // 用于判断当前滑动的是哪一列province: [provinces], // 数据列表};},methods: {setIndex(i, value) {this.$set(this.valueArr, i, value);},initLoadArea() {this.loadCity(provinces[0].code);},loadCity(code) {let children = cities.filter((v) => v.provinceCode == code);this.$set(this.province, 1, children);if (!this.twoStage) {this.loadArea(children[this.valueArr[1]]?.code || children[0].code);}},loadArea(code) {this.$set(this.province,2,areas.filter((v) => v.cityCode == code));},bindChange(e) {const val = e.detail.value;if (this.valueArr[0] !== val[0]) {let code = provinces[val[0]].code;this.loadCity(code);} else if (this.valueArr[1] !== val[1]) {if (!this.twoStage) {let code = this.province[1][val[1]].code;this.loadArea(code);}}this.valueArr = val;},confirm() {let addressDetail = "";if (!this.twoStage) {addressDetail = `${this.province[0][this.valueArr[0]].name}-${this.province[1][this.valueArr[1]].name}-${this.province[2][this.valueArr[2]]?.name}`;} else {addressDetail = `${this.province[0][this.valueArr[0]].name}-${this.province[1][this.valueArr[1]].name}`;}this.$emit("confirm", addressDetail);},open() {this.$refs.popup.open();if (!this.value) {this.initLoadArea();} else {this.$nextTick(() => {this.echoLoad();});}},echoLoad() {let val = this.value.split("-");let sheng = provinces.findIndex((v) => v.name == val[0]);let shengcode = provinces.find((v) => v.name == val[0])?.code;this.setIndex(0, sheng);let children = cities.filter((v) => v.provinceCode == shengcode);this.$set(this.province, 1, children);let shi = this.province[1].findIndex((v) => v.name == val[1]);let shicode = this.province[1].find((v) => v.name == val[1])?.code;this.setIndex(1, shi);if (!this.twoStage) {let children2 = areas.filter((v) => v.cityCode == shicode);this.$set(this.province, 2, children2);let qu = this.province[2].findIndex((v) => v.name == val[2]);this.setIndex(2, qu);}},cancel() {this.$refs.popup.close();},},
};
</script><style lang="scss" scoped>
.popup {height: fit-content;width: 100%;background: #fff;
}.picker-btn {display: flex;height: 100rpx;width: 100%;line-height: 100rpx;background: #fff;font-size: 34rpx;z-index: 1;border-bottom: 1rpx solid #f8f8f8;.left {flex: 1;color: #0076ff;padding-left: 40rpx;box-sizing: border-box;}.right {flex: 1;text-align: right;padding-right: 40rpx;color: #fe4533;box-sizing: border-box;}
}picker-view {width: 100%;height: 500rpx;display: relative;
}
.item {line-height: 100rpx;text-align: center;
}
</style>

// 这是使用部分

<template><view class="content"><div @click="changeAddress">{{ address ? address : "请选择省市区" }}</div><Address :value="address" @confirm="confirmAddress" ref="address"></Address><div @click="changeAddress2">{{ address2 ? address2 : "请选择省市" }}</div><Address:value="address2"@confirm="confirmAddress2"ref="address2"two-stage></Address></view>
</template><script>
import Address from "@/components/address.vue";
export default {data() {return {address: "",address2: "",};},components: {Address,},onLoad() {},methods: {changeAddress() {this.$refs.address.open();},changeAddress2() {this.$refs.address2.open();},confirmAddress(val) {console.log(val, "eee");this.address = val;this.$refs.address.cancel();},confirmAddress2(val) {console.log(val, "eee");this.address2 = val;this.$refs.address2.cancel();},},
};
</script><style>
.content {display: flex;flex-direction: column;gap: 40rpx;padding: 40rpx;
}
</style>

uniapp 选择省市区省市以及回显

从gitee仓库可以拿到demo 以及 json省市区文件 // 这是组件部分 <template><uni-popup ref"popup" type"bottom"><view class"popup"><view class"picker-btn"><view class"left" click"…...

编程日记 2025/7/27 22:18:34

HashMap底层原理

jdk1.8之后hashmap底层结构 jdk1.8之后，是哈希表数据结构，也可以说是数组链表或红黑树，下图是没有添加数据的一个hashmap。现在开始添加数据，看下面具体步骤 put操作如下，我们来简单看看hashmap的put源码&#xff…...

编程日记 2025/7/28 18:34:27

【8210A-TX2】Ubuntu18.04 + ROS_ Melodic + TM-16多线激光雷达评测

简介：介绍 TM-16多线激光雷达在8210A载板，TX2核心模块环境（Ubuntu18.04）下测试ROS驱动，打开使用RVIZ 查看点云数据，本文的前提条件是你的TX2里已经安装了ROS版本：Melodic。大家好，…...

编程日记 2025/7/28 18:29:25

C语言--分支循环编程题目

第一道题目： #include <stdio.h>int main() {//分析：//1.连续读取int a 0;int b 0;int c 0;while (scanf("%d %d %d\n", &a, &b, &c) ! EOF){//2.对三角形的判断//a b c 等边三角形其中两个相等等腰三角形其余情…...

编程日记 2025/7/28 18:25:52

Flutter：AnimatedIcon图标动画，自定义Icon通过延时Interval，实现交错式动画

配置vsync，需要实现一下with SingleTickerProviderStateMixinclass _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin{// late延迟初始化 AnimationControllerlate AnimationController _controller;overridevoid initStat…...

编程日记 2025/7/26 16:32:47

单向链接表

# 封装普通节点的类 class Node:# 构造函数定义节点的属性def __init__(self, data):self.data data #普通节点的数据域self.next None #普通节点的链接域刚构造的节点该位置域为空# 封装链表的类（封装头节点） class LinkList:#构造函数def __init…...

编程日记 2025/7/28 0:39:37

用自由贸易去推动西安低空经济创新发展

——金庆培在中国（西安）国际低空经济发展大会上的发言首先，我非常感谢大会组织委员会能邀请我参加今天的盛会。我代表中国自由贸易区创新发展研究联盟向大会的召开表示最热烈的祝贺在此，并预祝大会圆满成功！ 我的发言…...

编程日记 2025/7/28 18:34:24

三开关VUE组件

一、使用效果 <template><QqThreeSwitch v-model"value" /><!-- <SqThreeSwitch v-model"value" :options"[test1, test2, test3]"><template #left-action><div style"display: flex"><IconMoon…...

编程日记 2025/7/25 4:25:37

介绍一下stricmp(c基础)

hi , I am 36 适合对象c语言初学者 stricmp(arr1,arr2);是不区分大小写的比较格式 #include <string.h> strcmp (arr1,arr2); 工作原理：strcmp函数按照ACII（字符编码顺序）比较两个字符串。它从两个字符串的第一个字符开始逐个比…...

编程日记 2025/7/23 14:33:11

恋爱通信史之身份验证和不可抵赖性

在前文保密性中讲到：私钥就是一种身份的象征。那么，使用公钥能解密采用私钥加密的数据，就是表明该条信息就是私钥持有者发送的。那接下来就阐述一下，采用私钥加密公钥解密方式的数字签名和数字证书。数字签名——不可抵赖性抵…...

编程日记 2025/7/27 19:13:59

docker搭建私有的仓库

docker搭建私有仓库一、为什么要搭建私有的仓库？ 因为在国内，访问：https://hub.docker.com/ 会出现无法访问页面。。。。（已经使用了魔法） 当然现在也有一些国内的镜像管理网站，比如网易云镜像服务、Dao…...

编程日记 2025/7/28 8:31:37

苹果系统中利用活动监视器来终止进程

前言苹果系统使用的时候总是感觉不太顺手。特别是转圈的彩虹球出现的时候，就非常令人恼火。如何找到一个像Windows那样任务管理器来终止掉进程呢？ 解决办法 Commandspace 弹出搜索框吗，如下图： 输入“活动”进行搜索&#xff…...

编程日记 2025/7/28 18:27:52

Wekan看板安装部署与使用介绍

Wekan看板安装部署与使用介绍 1. Wekan简介 Wekan 是一个开源的看板式项目管理工具，它的配置相对简单，因为大多数功能都是开箱即用的。它允许用户以卡片的形式组织和跟踪任务，非常适合敏捷开发和日常任务管理。Wekan 的核心功能包括看板…...

编程日记 2025/7/28 18:28:38

Linux常用命令之passwd命令详解

passwd 命令详解 passwd 命令在 Linux 和 Unix 系统中用于更改用户的密码，以及进行账户锁定、密码失效等相关操作。它是系统管理员和普通用户日常管理用户账户安全的重要工具。以下是对 passwd 命令的详细说明，包括其语法、选项和示例。基本语法 pas…...

编程日记 2025/7/28 10:35:53

【django】扩展

1. Promise 1.1 对象和状态是什么？是前端开发时js中的一个对象（包裹）。【对象】【异步请求】# 对象中有一个状态的值，status # 创建对象，不赋值，statuspendding let v1 new Promise(function(resolve, …...

编程日记 2025/7/28 18:30:09

Vue3 生命周期钩子详解

Vue3 生命周期钩子详解简介 Vue3的生命周期钩子让我们能够在组件的不同阶段执行自定义代码。与Vue2相比，Vue3的生命周期钩子在Composition API中有了新的使用方式，但整体概念保持一致。基础知识 Vue3中的生命周期钩子可以通过两种方式使用&#xf…...

编程日记 2025/7/28 10:59:21

LeetCode 力扣热题 100道（八）相交链表（C++）

给你两个单链表的头节点 headA 和 headB ，请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点，返回 null 。图示两个链表在节点 c1 开始相交： 题目数据保证整个链式结构中不存在环。注意，函数返回结果后&…...

编程日记 2025/7/26 10:22:05

RabbitMQ2：介绍、安装、快速入门、数据隔离

欢迎来到“雪碧聊技术”CSDN博客！ 在这里，您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者，还是具有一定经验的开发者，相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导，我将…...

编程日记 2025/7/23 22:25:44

Docker Seata分布式事务保护搭建 DB数据源版搭建结合Nacos服务注册

介绍 Seata（Simple Extensible Autonomous Transaction Architecture）是一个开源的分布式事务解决方案，旨在为微服务架构中的分布式系统提供事务管理支持。Seata 通过提供全局事务管理，帮助开发者在分布式环境中保持数据一致性 …...

编程日记 2025/7/25 1:07:55

elasticsearch7.10.2集群部署带认证

安装elasticsearch rpm包安装下载地址 https://mirrors.aliyun.com/elasticstack/7.x/yum/7.10.2/ 生成证书 #1.生成CA证书 # 生成CA证书,执行命令后,系统还会提示你输入密码,可以直接留空 cd /usr/share/elasticsearch/bin ./elasticsearch-certutil ca#会在/usr/share/el…...

编程日记 2025/7/28 7:48:55

opencv-python 分离边缘粘连的物体（距离变换）

import cv2 import numpy as np# 读取图像，这里添加了判断图像是否读取成功的逻辑 img cv2.imread("./640.png") # 灰度图 gray cv2.cvtColor(img, cv2.COLOR_BGR2GRAY) # 高斯模糊 gray cv2.GaussianBlur(gray, (5, 5), 0) # 二值化 ret, binary cv2…...

编程日记 2025/7/23 13:45:53

UVM 验证方法学之interface学习系列文章（七）高级《bind 操作》（4）级联

在 SystemVerilog 中，bind 操作符用于将一个模块或接口实例绑定到另一个模块或接口的层次结构中。这在很多情况下非常有用，尤其是当你需要在不修改原始模块代码的情况下，添加或替换某些组件时。bind 操作符常用于仿真和测试平台中，以便灵活地组织测试环境。前面的文章，我…...

编程日记 2025/7/26 12:26:27

08 —— Webpack打包图片

【资源模块 | webpack 中文文档 | webpack中文文档 | webpack中文网】https://www.webpackjs.com/guides/asset-modules/?sid_for_share99125_3 Webpack打包图片以8KB为临界值判断大于8KB的文件：发送一个单独的文件并导出URL地址小于8KB的文件：导出一…...

编程日记 2025/7/26 12:26:41

goframe开发一个企业网站 MongoDB 完整工具包19

1. MongoDB 工具包完整实现 (mongodb.go) package mongodbimport ("context""fmt""time""github.com/gogf/gf/v2/frame/g""go.mongodb.org/mongo-driver/mongo""go.mongodb.org/mongo-driver/mongo/options" )va…...

编程日记 2025/7/27 1:33:47

从ES的JVM配置起步思考JVM常见参数优化

目录一、真实查看参数 （一）-XX:PrintCommandLineFlags （二）-XX:PrintFlagsFinal 二、堆空间的配置 （一）默认配置 （二）配置Elasticsearch堆内存时，将初始大小设置为…...

编程日记 2025/7/23 17:30:26

Oracle JDK（通常简称为 JDK）和 OpenJDK区别

Java 的开发和运行时环境主要由两种实现主导：Oracle JDK（通常简称为 JDK）和 OpenJDK。尽管它们都基于同一个代码库，但在一些关键点上有所区别。以下是详细的对比： 1. 基础代码 Oracle JDK： 基于 OpenJD…...

编程日记 2025/7/25 6:06:40

格约减技术的工作原理

1. 格基约减的定义和目标格基约简的目标是找到一组新的基，使得这些基向量的大小满足特定的不等式，并且这些基向量更加趋于正交。 2. LLL算法的基本原理 LLL算法通过一系列变换实现向量基底的逐步优化，最终到达一个“约减”基底。这个约减…...

编程日记 2025/7/27 8:37:20

M｜横道世之介

rating: 8.0 豆瓣: 8.8 上映时间: “2013” 类型: M剧情爱情导演: 冲田修一 Shichi Okita 主演: 冲田修一 Shichi Okita吉高由里子 Yuriko Yoshitaka 国家/地区: 日本片长/分钟: 160分钟 M｜横道世之介横道世之介是一个热情、纯真的人，大家…...

编程日记 2025/7/27 6:39:07

el-select 和el-tree二次封装

前言本文章是本人在开发过程中，遇到使用树形数据，动态单选或多选的需求，element中没有这种组件，故自己封装一个，欢迎多多指教开发环境：element-UI、vue2 组件效果单选多选组件引用 <treeselec…...

编程日记 2025/7/22 8:30:58

RocketMQ: Broker 使用指南

Broker 配置参数获取 Broker 的默认配置 $ sh mqbroker -m Broker 启劢时，如何加载配置 ### 第一步生成 Broker 默认配置模版 sh mqbroker -m > broker.p ### 第二步修改配置文件, broker.p ### 第三步加载修改过的配置文件 nohup sh mqbroker -c broker.pBrok…...

编程日记 2025/7/27 16:26:18

ubuntu安装ros1

以Ubuntu 18.04为例： 1.如果源没有切换到国内的建议切换 sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak sudo vi /etc/sources.list删除原来的源切换到清华大学源 # 默认注释了源码镜像以提高 apt update 速度，如有需要可自行取消注释 de…...

编程日记 2025/7/25 3:12:52

C++ 中的模板特化和偏特化

模版特化是为特定的模版参数类型提供提供专门的实现。当需要为特定类型的模板参数提供不同的实现时，可以使用模板特化。模板特化允许你为特定的模板参数类型编写专门的代码，而不是使用通用的模板代码。例如，对于一个通用的模板函数&#…...

编程日记 2025/7/28 10:45:36

CTFHUB--yeeclass-web

复现平台CTFHUB靶机为一个完整类论坛网页，题目给了服务端完整代码代码审计 /src/submit.php Line56-63: 可以看到提交数据存入的时候将$_SESSION["username"]."_"作为前缀，生成了一个uniqid。uniqid的生成方式即{sec:08x}{usec:0…...

编程日记 2025/6/27 22:03:54

GM、BP、LSTM时间预测预测代码

GM clc; clear; close all;%% 数据加载和预处理 [file, path] uigetfile(*.xlsx, Select the Excel file); filename fullfile(path, file); time_series xlsread(filename);% 确保数据是一列 time_series time_series(:);% 归一化数据 min_val min(time_series); max_v…...

编程日记 2025/7/14 18:52:04

2022 年中高职组“网络安全”赛项-海南省省竞赛任务书-1-B模块B-1-Windows操作系统渗透测试

前言本章节我将带领大家一起重新模拟操作一次Windows渗透测试模块，并加固的流程。任务概览环境部署我的实验复现环境： 服务器Windows server 2008 R2 攻击机Kali Linux 场景操作系统Windows 7 额外还有台交换机支持： 这里我使用的是…...

编程日记 2025/7/13 4:44:20

【6】STM32·FreeRTOS·列表和列表项

目录一、列表和列表项的简介 1.1、列表 1.2、列表项 1.3、迷你列表项 1.4、列表和列表项的关系二、列表相关API函数介绍 2.1、初始化列表vListInitialise() 2.2、初始化列表项vListInitialiseItem() 2.3、列表插入列表项vListInsert() 2.4、列表末尾插入列表项vLis…...

编程日记 2025/7/5 3:04:08

嵌入式硬件电子电路设计（五）MOS管详解（NMOS、PMOS、三极管跟mos管的区别）

引言：在我们的日常使用中，MOS就是个纯粹的电子开关，虽然MOS管也有放大作用，但是几乎用不到，只用它的开关作用，一般的电机驱动，开关电源，逆变器等大功率设备，全部使用MOS管…...

编程日记 2025/7/25 22:59:42

Leetcode 最长回文子串

目录解法1：递归算法解法2：Map取同字母位置法解法3：中心扩展法解法4：动态规划法解法5: Manacher算法示例 1： 输入：s "babad" 输出："bab" 解释：&quo…...

编程日记 2025/7/13 1:29:50

使用ENSP实现NAT

一、项目拓扑二、项目实现 1.路由器AR1配置进入系统试图 sys将路由器命名为R1 sysname R1关闭信息中心 undo info-center enable进入g0/0/0接口 int g0/0/0将g0/0/0接口IP地址配置为12.12.12.1/30 ip address 12.12.12.1 30进入e0/0/1接口 int g0/0/1将g0/0/1接口IP地址配置…...

编程日记 2025/7/19 10:20:35

Elasticsearch搜索流程及原理详解

Elasticsearch搜索流程及原理详解 1. Elasticsearch概述1.1 简介1.2 核心特性1.3 应用场景2. Elasticsearch搜索流程2.1 搜索请求的发起2.2 查询的执行2.3 结果的聚合与返回3. Elasticsearch原理详解3.1 倒排索引3.2 分布式架构3.3 写入流程3.4 读取流程4. 技术细节与操作流程4…...

编程日记 2025/7/23 4:23:15

计算机组成原理之DMA方式

1. DMA方式的基本概念与特点基本概念：DMA（Direct Memory Access）即直接存储器存取，是一种计算机组成原理中的数据传输模式。在此模式下，硬件可以直接从外设（如磁盘、网络设备等高速设备）读写内…...

编程日记 2025/7/3 2:57:19

贴代码框架PasteForm特性介绍之query,linkquery

简介 PasteForm是贴代码推出的 “新一代CRUD” ，基于ABPvNext，目的是通过对Dto的特性的标注，从而实现管理端的统一UI，借助于配套的PasteBuilder代码生成器，你可以快速的为自己的项目构建后台管理端！目前管…...

编程日记 2025/7/17 10:50:19

Linux安装RabbitMQ

安装步骤 rabbitmq使用erlang开发，依赖于erlang，所以需要先下载erlang，且版本要兼容： 可在官网查看erlang与rabbitmq的版本对应关系 https://www.rabbitmq.com/docs/which-erlangCentOs7安装运行下载下载地址 https://www.rab…...

编程日记 2025/7/20 13:54:54

C语言：函数指针精讲

1、函数指针一个函数总是占用一段连续的内存区域，函数名在表达式中有事也会被转换为该函数所在内存区域的首地址，这和数组名非常类似，我们可以把函数这个首地址（或称入口地址）赋予一个指针变量，使指针变量…...

编程日记 2025/7/23 1:40:10

阿里云 DevOps 资源安全扫描实践

随着企业上云进程的加速，云资源的使用量日益增长，云环境中资源的安全性和稳定性成为了企业业务运营的关键要素面对多样化的云资源和复杂的应用场景，传统的安全管理手段已无法完全满足企业日益严苛的安全需求。为了确保云上资源的安全性&…...

编程日记 2025/7/27 8:10:28

038集——quadtree（CAD—C#二次开发入门）

效果如下： using Autodesk.AutoCAD.ApplicationServices; using Autodesk.AutoCAD.DatabaseServices; using Autodesk.AutoCAD.EditorInput; using Autodesk.AutoCAD.Geometry; using System; using System.Collections.Generic; using System.Linq; using System.T…...

编程日记 2025/7/2 22:17:16

【Python · PyTorch】循环神经网络 RNN（基础概念）

【Python PyTorch】循环神经网络 RNN（基础概念） 0. 生物学相似性1. 概念2. 延时神经网络（TDNN）3. 简单循环神经网络（Simple RNN）3.1 BiRNN 双向循环神经网络3.2 特点记忆性参数共享图灵完备 3.3 网络结构3…...

编程日记 2025/6/27 20:52:11

在Ubuntu系统中制作系统启动u盘

2024-11：用Ubuntu系统一段时间后，编程体验很好，命令行尤其好用。时间一长，考虑到Windows系统里面丰富的软件生态，还是颇为割舍不下，本来想着再买个主机，但是考虑到成本问题，还是给笔…...

编程日记 2025/7/22 6:59:57

性能监控利器：Ubuntu 22.04 上的 Zabbix 安装与配置指南

简介今天我们来聊聊如何在 Ubuntu 22.04 上安装和配置 Zabbix。我们会用到 PostgreSQL 作为数据库后端，Nginx 作为 Web 服务器，并用 Let’s Encrypt SSL 证书来保驾护航。什么是 Zabbix？ Zabbix 是一个开源的网络监控和管理解决方案&…...

编程日记 2025/6/27 20:54:23

【C语言篇】从字符海洋到整数大陆——atoi 的探险之旅

文章目录须知 💬 欢迎讨论：如果你在学习过程中有任何问题或想法，欢迎在评论区留言，我们一起交流学习。你的支持是我继续创作的动力！ 👍 点赞、收藏与分享：觉得这篇文章对你有帮助吗&#xff1…...

编程日记 2025/7/24 14:55:12

相关文章：