uniapp的picker组件:解决多个uv-picker时,每个picker高亮的内容显示不是已选择项的问题

先看看是不是你想要的:

解决前:

uv-picker解决高亮和已选择项不同的问题

解决后:

解决后的uv-picker高亮及选择项

背景:

    此项目是使用vue3+uniapp开发的h5项目,项目的某个页面有两个或多个下拉选项,选择的第一个下拉框的第二个值,在选择第二个下拉框时,第二个下拉框高亮展示第二个值,跟着第一个下拉框的顺序去高亮展示了。

需求:

    假设有两个下拉选项,且每个选项都有3个可选值。当第一个下拉框选择第二个选项时,再对第二个下拉框进行选择时,此时应该是第一个选项高亮,但现在是第二个选项高亮了,即第二个下拉框高亮的选项是跟着第一个下拉框选择的顺序走了。

上代码,代码里有注释,请看:

html标签:<view><view><uv-form><uv-form-item required label="目的" borderBottom prop="gx2fz70f4j"><view class="picker-box" @tap="showLy('gx2fz70f4j')"><view>{{getLabel(formData.gx2fz70f4j, gx2fz70f4jList) || '请选择'}}</view><uni-icons type="right" color="#999"></uni-icons></view></uv-form-item><uv-form-item required label="等级" borderBottom prop="gx2fz70f4k"><view class="picker-box" @tap="showLy('gx2fz70f4k')"><view>{{getLabel(formData.gx2fz70f4k, gx2fz70f4kList) || '请选择'}}</view><uni-icons type="right" color="#999"></uni-icons></view></uv-form-item></uv-form></view><!--ref:获取picker组件的信息columns: picker组件显示的选项内容,是个数组;confirm: picker组件的确定按钮方法;keyName: picker组件显示的内容--><uv-picker ref="picker" :columns="[range1]" @confirm="confirmTop" keyName="label"></uv-picker></view>js:// 定义变量
const formData = ref({gx2fz70f4j: undefined, // 目的gx2fz70f4k: undefined, // 等级
})// 定义picker组件即uv-picker标签的ref
const picker = ref(null)// picker组件显示的选项
const range1 = ref(undefined)// 定义picker组件显示的选项,即uv-picker标签的columns
const gx2fz70f4jList = ref([{value: "1",label: "初验",key: "1"},{value: "2",label: "终验",key: "2"}])const gx2fz70f4kList = ref([{value: "2",label: "二级",key: "2"},{value: "3",label: "三级",key: "3"}])const pickerSelect = (k) => { // picker组件的高亮项为已选择的项range1.value.find((e, i) => {if (formData.value[k] && e.value === formData.value [k]) {// 重要!!! ref绑定的picker.value对象上的innerIndex是个数组,数组只有一项,即已选择的这一项picker.value.innerIndex = [i]}})}const showLy = (k) => {switch (k) {case 'gx2fz70f4j':range1.value = gx2fz70f4jList.valuepickerSelect(k)break;case 'gx2fz70f4k':range1.value = gx2fz70f4kList.valuepickerSelect(k)break;}picker.value.open()}const confirmTop = (e) => {formData.value[key] = e.value[0].value}const getLabel = (val, list) => { // 展示已选择项的labelif (!list) returnreturn list?.find(v => v.value == val)?.label}

功能的实现的主要问题在于picker.value.innerIndex = [i],已注释,请留意。欢迎评论~~~

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

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

相关文章

37.自定义协议

自定义协议要素 1.魔数:用来第一时间判定是否是无效数据包。 2.版本号:主持协议升级。 3.序列化算法:消息正文到底采用那种序列化方式,可以由此扩展,例如:json,protobuf(google的序列化算法,基于二进制,虽然可读性不好,但是字节数占用更少),hessian(基于二进制)…

【Git】win本地 git bash:Connect reset by 20.205.243.166 port22报错问题解决

win10 git bash 控制台 reset 22端口拒绝连接问题&#xff1a; Connection reset by 20.205.243.166 port 221、22端口 无法连接 ssh -T gitgithub.com2、尝试用443端口 仍然无法连接 ssh -T -P 443 gitgithub.com3、重写 git clone 地址 url&#xff0c;全局添加 https 前缀…

每日一题——Python代码实现力扣1. 两数之和(举一反三+思想解读+逐步优化)五千字好文

一个认为一切根源都是“自己不够强”的INTJ 个人主页&#xff1a;用哲学编程-CSDN博客专栏&#xff1a;每日一题——举一反三Python编程学习Python内置函数 Python-3.12.0文档解读 目录 菜鸡写法 代码分析 时间复杂度分析 空间复杂度分析 改进建议 我要更强 方法1: 使…

samba服务器配置(非常详细)

1、安装Samba软件包 sudo apt-get install samba samba-common 2、修改Samba配置文件,配置共享信息 2.1、打开配置文件: sudo cp /etc/samba/smb.conf /etc/samba/smb.conf.bak//为了防止配置错误,可以先进行备份 sudo vim /etc/samba/smb.conf //对配置文件进行修改 …

服务器监控:运维行业的核心保障与第三方监控软件的选择

随着信息技术的飞速发展&#xff0c;企业IT架构日益复杂&#xff0c;服务器作为整个IT系统的核心&#xff0c;其稳定性和性能对业务的连续性至关重要。在运维行业中&#xff0c;服务器监控作为保障服务器稳定运行的关键环节&#xff0c;已经受到了越来越多企业的重视。本文将探…

自然语言处理领域的明星项目推荐:Hugging Face Transformers

在当今人工智能与大数据飞速发展的时代&#xff0c;自然语言处理&#xff08;NLP&#xff09;已成为推动科技进步的重要力量。而在NLP领域&#xff0c;Hugging Face Transformers无疑是一个备受瞩目的开源项目。本文将从项目介绍、代码解释以及技术特点等角度&#xff0c;为您深…

shiny在服务器上部署

将一个Shiny应用程序部署到服务器上可以通过多种方式实现&#xff0c;包括使用Shiny Server、Shinyapps.io或者Docker。以下是如何使用Shiny Server在服务器上部署Shiny应用程序的详细步骤。 步骤 1: 准备服务器环境 确保你的服务器运行的是Ubuntu或其他Linux发行版&#xff…

气膜建筑:持久耐用的建筑选择—轻空间

随着科技的发展&#xff0c;气膜建筑以其快速施工、节能环保和灵活多用的特点&#xff0c;正在各个领域获得越来越多的应用。然而&#xff0c;许多人对气膜建筑的耐用程度仍存有疑虑。本文将从气膜建筑的材料、结构设计和维护等方面&#xff0c;深入探讨气膜建筑的耐用性&#…

EndNote 21 for Mac v21.3 文献管理软件安装

Mac分享吧 文章目录 效果一、下载软件二、开始安装1、双击运行安装EndNote212、升级 三、运行1、打开软件&#xff0c;测试 安装完成&#xff01;&#xff01;&#xff01;四、注意事项 效果 一、下载软件 下载软件 链接&#xff1a;http://www.macfxb.cn 二、开始安装 1、双击…

无霍尔BLDC驱动

目前主要的无霍尔控制方案是基于反电势检测信 息判断换相点,本文研究反电势在 PWM - OFF 点的检 测方案确定换相点。 1. 反电动势检测方案 BLDC 的模型做等效,将线圈阻抗看成是一个 线性电阻和一个储能电感的等效,其等效电路图如图 1所示。 电机三相绕组输出端电压的电压…

Typora + Hexo 图片路径问题(Typedown)

文章目录 1. 冲突来源2. 解决思路3. 实现1. typora图片路径2. hexo脚本 1. 冲突来源 Hexo上对于图片在md中的引用&#xff0c;使用了post_asset_folder: true配置&#xff0c;来更好的管理图片。 当一篇名为xxx.md的文章引用1.png图片时&#xff0c;默认让1.png保持在xxx文件夹…

ssh在本地虚拟机中的应用——解决虚拟机中编写和阅读代码不方便问题的一个小技巧

虚拟机中编程小技巧分享——ssh的使用 事情的起因是这样的&#xff1a;前几天一位工程师过来我这边&#xff0c;他看到我在主机和虚拟机运行了两个vscode环境&#xff0c;不经意间提了句&#xff1a;“这么艰苦的环境写代码啊”。 后来我一想&#xff1a;确实。 我长时间以来…

热电阻温度计的测量电路

热电阻温度计的测量电路&#xff0c;为达到高精度测量&#xff0c;通常会采用电桥测量原理&#xff0c;并结合适当的热电阻类型和连接方式。 惠斯通电桥是用于测量一组电阻式元件阻值变化的电路。该电路具有两个并联电阻支路&#xff0c;充当激励电压 VEXCITATION 的分压器。每…

关于C# KeyUp事件中MessageBox的回车(Enter)按键的回调问题(禁止无限按ENTER)

在textbox中的keyup事件如果编写带有messbox的代码触发事件后再按enter会无限回调messbox&#xff0c;如何禁止回调messbox中enter呢&#xff0c;解决方案如下&#xff1a; 把textbox中keyup事件中的代码移植到 keydown事件中 如 &#xff1a; private void txtNum_KeyDown(ob…

帕金森综合征的预防方法

帕金森综合征是一种慢性神经退行性疾病&#xff0c;目前尚无法彻底治愈。然而&#xff0c;通过采取一些预防措施&#xff0c;可以降低患病风险或延缓病情发展。以下是一些基于最新研究和医学建议的预防方法&#xff1a; 健康饮食&#xff1a;保持低盐、低脂饮食&#xff0c;多吃…

二叉树经典OJ题

目录 判断两棵二叉树是否相同单值二叉树判断对称二叉树另一棵树的子树二叉树遍历判断完全二叉树 判断两棵二叉树是否相同 力扣上忽然找不到这个题了&#xff0c;大家先看代码吧&#xff1a; 首先要注意的是&#xff0c;两棵树的前序遍历结果一样时&#xff0c;结构可能是不同…

期货交易纪律2024年6月22号

文章目录 期货交易系统构建第一步、选品第二步、开仓纪律第三步、持仓 2024年6月22号&#xff0c;开始写期货交易的第三篇日记。 交易记录&#xff1a;市场继续震荡&#xff0c;这两天无交易&#xff0c;继续梳理一些期货交易选品&#xff0c;周末详细的了解了一下豆粕&#xf…

vue3+element ui +ts 封装周范围选择器

vue3element ui ts 封装周范围选择器 在业务场景中&#xff0c;产品需要在页面中使用周范围选择器&#xff0c;我们在使用ant-design的时候里面是有自带的&#xff0c;但是在emement中只有指定周的范围选择器&#xff1a; 这个是ant-design的周范围选择器 这个是element ui 的…

批量压缩文件夹内文件并记录解压密码

主要功能是&#xff1a; 遍历指定目录中的所有文件。 为每个文件生成一个随机密码。 使用生成的密码将文件压缩为 7z 格式。 将文件名和对应的密码记录到 passwords.txt 文件中。 import os import random import string from py7zr import SevenZipFile, exceptions# 设置文…

阿里云推出首个 AI 程序员!

AI圈最近又发生了啥新鲜事&#xff1f; 该栏目以周更频率总结国内外前沿AI动态&#xff0c;是快速了解AI发展趋势一个不错的方式&#xff0c;感兴趣的可以点击订阅合集以及时收到最新推送 DeepSeek Coder V2开源发布&#xff0c;首超GPT4-Turbo的代码能力 全球首个在代码、数…