uniapp+vue3+ts+picker 实现二级联动效果

breakwhile2 breakwhile2 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 400+累计阅读 462平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄18年
关注
原创 最新推荐文章于 2026-07-29 16:18:13 发布 462 阅读 AI 写同款· GEO 优化 ›
uniapp实现菜单左右二级联动 阅读详情

下载地址:https://download.youkuaiyun.com/download/breakwhile2/88252747

标签
#uni-app #vue #typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
uniapp两级联动组件picker跟uview u-picker的封装 阅读详情

相关推荐

UniApp UI框架选型指南：六大维度横评与实战集成优化

在跨端开发领域，UI框架是提升开发效率、保障多端一致性的关键基础设施。其核心原理在于封装可复用的组件，通过响应式设计适配不同屏幕尺寸，并利用条件编译等技术抹平平台差异。从技术价值看，优秀的UI框架能显著降低开发成本，让开发者聚焦业务逻辑而非样式细节，同时确保应用在微信、支付宝、百度等多端平台保持统一的品牌体验。在实际应用场景中，面对商品列表、表单交互、导航布局等常见需求，一个合适的框架能快速搭建页面，处理下拉刷新、模态弹窗等交互。本文聚焦UniApp生态，深入剖析如何基于组件丰富度、跨端兼容性、性能与包体积

weixin_30466039的博客 405

uniapp自定义多列选择器省市两级联动

背景 这次项目有一个需求是实现省市的选择联动，可是uniapp官方提供的组件默认是省市区三级的。所以我打算自己模仿uniapp提供的多列选择器写一个符合项目需求的选择器 解决过程 首先这肯定是一个多列选择器 range 在这里可以看到，多列选择器中的数据是放在 range 中的，它是一个二维数组，长度表示列数，每一项表示每一列的数据。 所以我要把省市处理成下面这样的： const a = [['河南省', '山东省'], ['许昌市','郑州市','洛阳市']] value value每一项的值，表示

EEstefan的博客 7877

uniapp开发小程序—picker结合后台数据实现二级联动的选择

uniapp开发小程序—picker结合后台数据实现二级联动的选择。

weixin_48596030的博客 3085

vue3+ts+uniapp小程序端自定义日期选择器基于内置组件picker-view + 扩展组件 Popup 实现自定义日期选择及其他单列选择

vue3+ts+uniapp小程序端自定义日期选择器基于内置组件picker-view + 扩展组件 Popup 实现自定义日期选择及其他单列选择

奔跑吧代码 3513

uniapp 二级联动.zip

项目中开发心得项目中开发心得

SECS/GEM协议库及开源代码

以下是在开发SECS/GEM协议过程中，在网络上搜集协议实现资源，希望对SECS/GEM协议感兴趣的同学能有所帮助。 开源代码 freesecs FREESECS 是一个开源的SEMI SECS协议库，采用C++语言实现，可运行于Linux, MacOS X, NetBSD。 实现协议：E37.1、E5 开源地址：freesecs download | SourceForge.net 下载地址：https://download.youkuaiyun.com/download/BT_LEO/24305429

码农的历程 9945

在uniapp+vue3用JS和CSS实现一个简单的取色器

在vue3+uniapp中使用js+css制作了一个取色器组件

qq_45820271的博客 808

YooAsset可寻址模式避坑指南：从路径加载到Addressable的完整迁移方案

本文详细介绍了将Unity项目从传统路径加载迁移到YooAsset可寻址模式的完整方案。针对中大型项目在迁移过程中遇到的路径耦合、依赖管理、热更新等痛点，提供了从架构设计、环境配置、代码迁移到性能优化的实战指南，并分享了实际项目的改造案例与避坑经验，帮助团队高效完成资源管理系统的重构。

weixin_28304023的博客 511

uniapp和vue3+ts创建自定义下拉选择框select组件

使用uniapp开发小程序的时候，使用了uview的ui组件，但是里面没有下拉选择组件，只有Picker 选择器，但是我们想要使用下拉选择的组件，所以需要自定义个一个下拉选择的自定义组件，我就只能自己动手创建这个自定义组件了，支持：多选，单选，下拉框在框内还是框外。自定义组件源代码：Select.vue。

4569

从0到1：.NET 9 OpenAPI全攻略！Swagger vs Scalar UI谁更强？

OpenAPI：.NET 9的智能文档革命 本文深入解析.NET 9的OpenAPI支持，对比Swagger UI与Scalar UI的优劣，提供实战代码示例： 一键生成：AddOpenApi()+MapOpenApi()快速生成标准文档 UI工具对决： Swagger UI功能全面但复杂 Scalar UI简约现代，原生支持cURL/HTTPie 进阶技巧： XML注释增强文档可读性 自定义Transformer实现文档动态修改 🔥核心价值：.NET 9的OpenAPI方案显著降低API文档维护成本，开

java专栏 1428

CTFShow萌新区全攻略：从密码破解到Web渗透的实战解析

本文为CTFShow萌新区新手提供从密码破解到Web渗透的完整实战攻略。文章深入解析了密码学、隐写术、杂项和Web安全四大核心方向，分享了实用的解题工具、思维方法和绕过技巧，旨在帮助初学者建立系统的安全竞赛解题体系，而不仅仅是提供一份题解（WP）。

weixin_29216957的博客 299

Uniapp跨端开发：六大开源UI框架选型指南与实战集成

在跨端应用开发中，UI框架是提升开发效率、保障多端体验一致性的关键技术组件。其核心原理在于提供一套预先设计、测试完备的可复用视觉组件库，通过声明式配置替代重复的底层样式编写，使开发者能聚焦于业务逻辑实现。对于Uniapp开发者而言，选择适配的UI框架能显著解决小程序包体积限制与多端兼容性难题，其技术价值体现在快速原型搭建、统一设计规范与降低维护成本上。尤其在电商、社交、管理后台等高频开发场景中，成熟的UI框架能加速产品迭代。本文聚焦Uniapp生态，深度解析包括uView、ThorUI、uni-ui在内的六

weixin_34228387的博客 313

Android开发必备：TBS腾讯浏览服务静态集成完整指南（附Demo下载）

本文详细解析了Android开发中TBS腾讯浏览服务的静态集成方案，通过对比动态集成，深入剖析了其核心原理与适用场景。文章提供了从环境准备、资源获取、项目配置到代码初始化的完整指南，并重点介绍了WebView与文件预览等高级特性的实战应用。针对集成过程中的常见问题，提供了详尽的排查清单与性能调优建议，旨在帮助开发者构建极致稳定、不依赖网络的WebView与文件预览功能。文末附有经过验证的Demo项目可供下载参考。

earth的博客 369

ts+uniapp小程序时间日期选择框（分开选择与一起选择）

ts+uniapp小程序时间日期选择框（分开选择）

leng0920的博客 363

从零开始深入理解 AI Agent（完整版）

AI Agent（智能体）是一个能够自主感知环境、做出决策、执行行动并记忆经验的智能系统。特性传统程序AI Agent决策方式固定逻辑（if-else）动态推理（LLM 思考）灵活性需要重新编程自然语言描述即可能力边界明确限定可通过工具扩展学习能力无可通过记忆积累经验│ 感知 │ ───→ │ 推理 │ ───→ │ 行动 │↑ │ ││ ↓ ││ 记忆 │ ←─── │ 反思 │ ←─────────┘感知（Perception）

qq_20096229的博客 759

22、嵌入式软件随机延迟生成与加密算法防护技术

本文探讨了嵌入式软件中的随机延迟生成方法与块密码软件实现的高阶掩码及洗牌技术。重点介绍了浮动均值延迟生成方法，其在8位AVR平台上的实现效率为Θ(1)，显著提升了抗相关功率分析（CPA）攻击的能力，相比传统方法更安全且轻量。同时，分析了高阶掩码与洗牌技术结合的方案，通过理论建模量化其对高级差分功率分析（DPA）攻击的抵抗能力，并以AES为例展示了该方案的应用流程。最后对比了不同防护技术在安全性与开销之间的权衡，为实际应用中选择合适的安全策略提供了依据。未来可进一步优化实现效率并融合多种防护手段以应对复杂安全

fern8的博客 88

Uniapp 微信小程序 Canvas画框标注：拖拽缩放全攻略

本文介绍了在Uniapp中实现高性能Canvas图片画框标注组件的核心方案。该组件支持绘制、拖拽、缩放与删除功能，采用"Canvas绘制+JS计算+DOM悬浮按钮"的混合架构。创新性地提出0-1000千分比坐标体系，解决了不同设备分辨率下的坐标标准化问题，确保前后端数据一致。通过状态机设计实现精准的交互判断，包括画框、拖拽和四种缩放模式。组件还内置了边界约束算法，防止操作越界。这种设计既保证了跨平台兼容性，又提供了流畅的用户体验，适用于AI视觉识别、隐患排查等多种业务场景。

只要微微辣的博客 512

自适应控制 (Adaptive Control) 算法详解及案例分析

自适应控制是一种能够在线调整控制器参数以适应系统动态变化的控制方法。其核心思想是通过实时估计系统参数或调整控制器参数，使系统在不确定性或动态变化的环境中仍能保持稳定性和性能。

闲人编程的博客 4085

uniapp 省市两级联动 u-picker (Vue3语法)

我的代码如下官网（u-picker也有讲解 这里是方便自己和大家用时）

significant_的博客 1921

迈瑞BS系列全自动生化分析仪LIS协议接口手册(内含HL7和ASTM)

迈瑞BS系列全自动生化分析仪LIS协议接口手册，内含HL7和ASTM)

C# WinForm 基于DirectShow.dll编写的程序，可边预览边保存视频，音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择（默认选中第一个）2.可录制wmv和avi两种格式的视频并且都带有音频，avi可以录制的分辨率和帧数进行选择，wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照，也可边录制视频边拍照4.添加了视频和音频的压缩功能（酌情使用）这次二次开发发现C#对DirectShow的相关信息太少，这次做完也不敢藏私共享出来，还望大家指正

uniapp二级联动自定义

这里附上我的处理方式,我的数据是从两个接口获取的,需要拼接一下。在此基础上,我改成了组件,在父组件请求数据,传递到组件。首先拿到数据处理成这样的数据格式。

Jane0129的博客 656

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

uniapp开发市区二级联动小项目

今天做项目时遇到一个小需求，那就是做一个市区的二级联动，由于我用的是uniapp开发，神奇的发现了官方的一个小bug，一起来看看是怎么回事吧! 先看下效果图: 我们重点看这里有一个市区的二级联动，选中市后区的数据要与之对应且可选，然后后端给了我一个接口。来看看后端接口请求成功返回的数据是什么样子: 我们发现后端返回的是数组对象包含数组对象的格式，我是用的官方提供的picker组件实现下拉选择的二级联动，上重点部分的代码: getCity方法里请求接口成功后，this.array = res.data

qq_37635012的博客 4129

pscad IEEE标准系统搭建说明

pscad IEEE标准系统搭建说明，包含典型的IEEE 9节点、14节点、30节点、39节点和118节点系统。内含标准测试系统的原始数据和潮流结果。

uniapp中的picker结合后台数据实现二级联选demo

【代码】uniapp中的picker结合后台数据实现二级联选demo。

0 error(s), 0 warning(s) 1525

uniapp实现城市级联选择

uniapp城市级联选择

技术不够，加班来凑 3072

uni-app,picker实现联机选择器,二列, 后台反时间实现联动

1.实现二级联动 标签内写 <picker class="item-picker" mode="multiSelector" range-key="name" @change="classifyChange" @columnchange="columnchange" :value="classifyIndex" :range="classifyArr"> <view> {{name}} </view> </picker> data内写

Uxiao7的博客 1712

uView2.0 u-picker三级联动省市区

【代码】uView2.0 u-picker三级联动省市区。

qq_43103951的博客 3396

uniapp picker组件实现二级联动

效果图如上 html <picker mode="multiSelector" @change="bindPickerChange" @columnchange="columnchange" :value="index" :range="array" range-key="title"> <view class="uni-input">{{title}}</view> </picker> js <script> export defa.

HXH_csdn的博客 7995
上一篇： sun.misc.BASE64Encoder存在的问题及其解决方法
下一篇： vue3+ts 实现语音播报功能
点赞 0
评论 1
书签 书签 0
breakwhile2
breakwhile2
博客等级 码龄18年 26粉丝 21原创
+ 关注
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值