uniapp 搭配uviwe u-picker 实现地区联栋

news2025/6/1 22:20:22

原始数据:

[
  "id": 2,
  "createTime": null,
  "updateTime": null,
  "citycode": null,
  "adcode": "410000",
  "cityName": "河南省",
  "level": "province",
  "center": "113.753094,34.767052",
  "cityInitial": "H",
  "highId": null,
  "cityList": [
       {
          "id": 3,
          "createTime": null,
          "updateTime": null,
          "citycode": "0379",
          "adcode": "410300",
          "cityName": "洛阳",
          "level": "city",
          "center": "112.453895,34.619702",
          "cityInitial": "L",
          "highId": 2,
          "cityList": []
       },
 ]
]

 <u-picker :show="show" ref="uPicker" :columns="columns" @cancel="cancel" keyName="label" @confirm="confirm" @change="changeHandler"></u-picker>

地区数据改造

formatCity(val) {
				let cityData = []
				let provinceData = []
				if (val.length > 0) {
		      val.forEach((province, index) => {
						provinceData.push({
							id: province.id,
							label: province.cityName
						})
						cityData = []
						province.cityList.forEach(
						  city=> {
								cityData.push({
									id: city.id,
									label: city.cityName
								})
							}
						)
						this.cityDataSum[index] = cityData
					})
				}
				console.log(this.cityDataSum)
				const picker = this.$refs.uPicker
				this.provinceDataSum = provinceData
				picker.setColumnValues(0, provinceData)
				picker.setColumnValues(1, this.cityDataSum[0])
			},

根据数据滚动动态更新二级数据 

changeHandler(e) {
				console.log(e)
				const {
					columnIndex, // 列索引
					index, // 每列滚动的index
				} = e
				const picker = this.$refs.uPicker
				if (columnIndex == 0) {
					picker.setColumnValues(1, this.cityDataSum[index])
				}
	      this.formData['city'] = this.cityDataSum[index].label
			},
			bindClick(item) {
				console.log(item)
				if (item.type == 'select') {
					this.show = true
				}
			},

 

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

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

相关文章

win10电脑时间同步失败的解决方法

win10电脑时间同步失败 问题如下&#xff1a; 解决方法如下: 搜索里搜索:控制面板&#xff0c;然后选择时钟和区域 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/d734b28553514f6699d559d4218e5e99.png 此处输入:ntp.aliyun.com 然后时间就同步完成了~ 可以…

代码随想录打卡|Day53 图论(Floyd 算法精讲 、A * 算法精讲 (A star算法)、最短路算法总结篇、图论总结 )

图论part11 Floyd 算法精讲 代码随想录链接 题目链接 代码 三维DP数组 import java.util.Scanner;public class Main {// 定义最大距离值&#xff0c;避免使用Integer.MAX_VALUE防止加法溢出public static final int INF 100000000; // 10^8足够大且不会溢出public static…

yum安装nginx后无法通过服务方式启动

背景 在linux系统下&#xff0c;通过yum方式安装nginx后 通过nginx命令 nginx 可以启动nginx 但是作为测试或者生产服务器&#xff0c;我们需要配置开机自启动&#xff0c;这时候需要用服务方式启动 yum安装后的nginx 已经默认生成了服务启动方式的 nginx.service文件 按…

数据基座觉醒!大数据+AI如何重构企业智能决策金字塔(下)

1. 数据架构的量子跃迁 1.1 从线性堆叠到立体网络 传统六层架构正在经历基因重组。某智能家居企业将数据流转路径重构为三维拓扑网络后&#xff0c;新品研发周期从18个月压缩至9个月。这个改造的核心在于打破数据层间的物理隔离&#xff0c;让原始数据流能直接触达决策中枢。…

在线博客系统【测试报告】

&#x1f552; 一. 项目背景 由于纸质笔记容易丢失&#xff0c;携带不变&#xff0c;为了方便自己学习的过程中记录笔记&#xff0c;特开发了这个博客系统。这个系统后端采用 SpringBoot MyBatis SpringMVC &#xff1b;前端使用Html CSS JS&#xff1b;数据库使用的是Mysq…

Void:免费且隐私友好的 AI 编码利器,挑战 Cursor 地位?

开发者圈儿里最近有点小激动&#xff0c;大家都在议论一个叫Void的开源AI代码编辑器。这家伙在GitHub上人气飙涨&#xff0c;短时间内就斩获了超过22.1k的星标&#xff0c;简直成了科技圈的新宠。它被誉为“黑马”&#xff0c;不仅因为它继承了大家都很熟悉的Visual Studio Cod…

Elasticsearch的写入流程介绍

Elasticsearch 的写入流程是一个涉及 分布式协调、分片路由、数据同步和副本更新 的复杂过程,其设计目标是确保数据一致性、可靠性和高性能。以下是写入流程的详细解析: 一、写入流程总览 二、详细步骤解析 1. 客户端请求路由 请求入口:客户端(如 Java 客户端、REST API)…

【PCB工艺】PCB设计中的基本概念

此文结合实例讲解PCB的设计流程和一些基本概念。 🧱 PCB 是什么? PCB(Printed Circuit Board)(即印制线路板) 是电子元器件的载体,是没有焊接任何器件的“裸板”。 PCB只是板子,没有焊接元件,而PCBA可以理解为焊接好元件的完成板子。 简单点说,PCB 只包含:铜线、电源…

WPF事件处理器+x名称空间

目录 ​编辑 一、事件处理器知识点 1. XAML中的事件绑定 2. C#中的事件处理方法 3. 方法签名解释 4. 命名规范 工作流程 二、导入引用名称空间 三、x名称空间及其常用元素 &#xff08;1&#xff09;x名称空间的由来和作用 &#xff08;2&#xff09;x名称空间里都有…

具身智能:OpenAI 的真正野心与未来展望

提到 ChatGPT&#xff0c;你对它的第一印象是什么&#xff1f;是担心它会威胁到工程师的工作&#xff0c;还是觉得它只是个会说空话的工具&#xff1f;或许你正在学习一些简单的教程&#xff0c;试图用它来建立知识库&#xff0c;自动化日常工作&#xff0c;觉得它不过如此&…

Lyra学习笔记2 GFA_AddComponents与ULyraPlayerSpawningManagerComponent

目录 前言GameFeatureAction_AddComponentsULyraPlayerSpawningManagerComponent缓存所有PlayerStart位置选择位置 前言 1.以control模式为例 2.比较散&#xff0c;想单独拿出一篇梳理下Experience的流程 GameFeatureAction_AddComponents 这部分建议看 《InsideUE5》GameFeatu…

个人健康中枢的多元化AI软件革新与精准健康路径探析

引言 人工智能技术的迅猛发展正在重塑医疗健康领域的服务模式和用户体验。随着多模态大模型、MCP协议、A2A协议和思考链算法等创新技术的出现,个人健康中枢正在经历一场深刻的软件革新。这些技术不仅打破了传统健康管理系统的信息孤岛,还通过多维度数据整合和深度推理能力,…

Matlab实现LSTM-SVM时间序列预测,作者:机器学习之心

Matlab实现LSTM-SVM时间序列预测&#xff0c;作者&#xff1a;机器学习之心 目录 Matlab实现LSTM-SVM时间序列预测&#xff0c;作者&#xff1a;机器学习之心效果一览基本介绍程序设计参考资料 效果一览 基本介绍 该代码实现了一个结合LSTM和SVM的混合模型&#xff0c;用于时间…

JAVA 集合的进阶 泛型的继承和通配符

1 泛型通配符 可以对传递的类型进行限定 1.1 格式 ? 表示不确定的类型 &#xff1f;extends E&#xff1a; 表示可以传递 E 或者 E 所有的子类类型 &#xff1f;super E&#xff1a; 表示可以传递 E 或者 E 所有的父类类…

下一代液晶显示底层技术与九天画芯的技术突围

一、液晶产业&#xff1a;撑起数字经济的显示脊梁 &#xff08;一&#xff09;全球显示市场的核心支柱 作为电子信息产业的战略基石&#xff0c;液晶显示&#xff08;LCD&#xff09;占据全球平板显示市场超 60% 的份额&#xff0c;2022 年全球市场规模达 782.41 亿元&#xf…

[NOIP 2001 普及组] 求先序排列 Java

import java.util.*;public class Main {public static void main(String[] args) {Scanner sc new Scanner(System.in);String infixOrder sc.nextLine(); // 中序String postOrder sc.nextLine(); // 后序sc.close();System.out.println(preOrder(infixOrder, postOrder))…

Rockey Linux 安装ffmpeg

1.环境准备 Rockey linux 9.2 ffmpeg 静态资源包 这个是我自己的&#xff1a; https://download.csdn.net/download/liudongyang123/90920340https://download.csdn.net/download/liudongyang123/90920340 这个是官网的 Releases BtbN/FFmpeg-Builds GitHub 以上两个资…

STM32 Modbus RTU从机开发实战:核心实现与五大调试陷阱解析

知识点1【CRC校验】 CRC校验生成网址 CRC&#xff08;循环冗余校验&#xff09;在线计算_ip33.com 知识点2【代码演示】 代码书写思路 代码演示 main.c #include "stm32f10x.h" #include "stm32f10x_conf.h" #include "rs485.h"int main(voi…

Python----目标检测(《Fast R-CNN》和Fast R-CNN)

一、《Fast R-CNN》 1.1、基本信息 作者&#xff1a;Ross Girshick 机构&#xff1a;Microsoft Research 发表时间&#xff1a;2015年 论文链接&#xff1a;arXiv:1504.08083 代码开源&#xff1a;GitHub仓库&#xff08;MIT License&#xff09; 1.2、主要内容 Fast R…

iEKF的二维应用实例

如果熟悉 EKF 与卡尔曼的推导的话&#xff0c;iEKF 就比较容易理解&#xff0c;关于卡尔曼滤波的推导以及EKF&#xff0c;可以参考以前的文章&#xff1a; 卡尔曼滤波原理&#xff1a;https://blog.csdn.net/a_xiaoning/article/details/130564473?spm1001.2014.3001.5502 E…