返回顶部
首页 > 资讯 > 前端开发 > JavaScript >使用van-picker 动态设置当前选中项
  • 688
分享到

使用van-picker 动态设置当前选中项

van-picker设置选中项van-picker设置选中项 2022-11-13 18:11:18 688人浏览 独家记忆
摘要

目录van-picker 动态设置当前选中项van-picker 选择器空白问题van-picker 动态设置当前选中项 使用vant-field和van-picker、van-po

van-picker 动态设置当前选中项

使用vant-field和van-picker、van-popup组合实现单选类型表单时,通常我们需要pick每次显示时,默认选中的是当前有效值,但往往会出现这样的情况

我们可以在没法显示picker的时候,动态设置当前选中项,代码示例如下

//pick中指定ref属性为myPicker
//currentIndex为当前有效值对应的索引值
this.$refs.myPicker.setColumnIndex(0, currentIndex)

setColumnIndex有两个参数,第一个参数columnIndex代表的是列索引值,如果不涉及多列联动,默认为0;第二个参数optionIndex代表的要设置的有效索引值

van-picker 选择器空白问题

van-picker绑定的数据实在store里,在store里数据格式也是正确的,但是到页面里picker的选择项就是全空白,

在该路由中将该组件的keepalive设为了true,所以从别的页面回来的时候,picker绑定的数据不会重新获取,而该组件在初始的created里将picker的数据项写为了空数组,此时只需要在activated生命周期里重新给picker绑定的数据重新进行取值操作即可。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: 使用van-picker 动态设置当前选中项

本文链接: https://lsjlt.com/news/169339.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 使用van-picker 动态设置当前选中项
    目录van-picker 动态设置当前选中项van-picker 选择器空白问题van-picker 动态设置当前选中项 使用vant-field和van-picker、van-po...
    99+
    2022-11-13
    van-picker 设置选中项 van-picker设置选中项
  • vue中van-picker的选项插槽的使用
    目录van-picker的内部选项怎么来自定义Vant选择器使用插槽总结van-picker的内部选项怎么来自定义 首先要确保 Vant UI 的版本在2.10.0以上 然后利用插槽...
    99+
    2023-01-18
    vue van-picker van-picker选项插槽使用 vue插槽的使用
  • android动态设置app当前运行语言的方法
    android开发中有时候碰到切换语言的需求,这时候需要通过代码动态改变当前运行语言。 package com.example.androidtest; import ja...
    99+
    2022-06-06
    运行 方法 app Android
  • vue如何动态绑定class选中当前列表变色
    这篇文章主要介绍了vue如何动态绑定class选中当前列表变色的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue如何动态绑定class选中当前列表变色文章都会有所收获,下面我们一起来看看吧。在methods中...
    99+
    2023-07-04
  • 小程序开发中如何动态设置当前页面的标题
    这篇“小程序开发中如何动态设置当前页面的标题”除了程序员外大部分人都不太理解,今天小编为了让大家更加理解“小程序开发中如何动态设置当前页面的标题”,给大家总结了以下内容,具有一定借鉴价值,内容详细步骤清晰,细节处理妥当,希望大家通过这篇文章...
    99+
    2023-06-26
  • uniapp uview <u-datetime-picker>时间选择器的使用 默认从当前时间开始选择
        能够从当前日期开始选择的关键  value1: Number(new Date()),   来源地址:https://blog.csdn.net/qq_59175937/article/details/129735326...
    99+
    2023-08-31
    uni-app 前端 javascript html
  • 微信小程序开发中如何动态设置当前页面的标题
    这篇“微信小程序开发中如何动态设置当前页面的标题”文章,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要参考一下,对于“微信小程序开发中如何动态设置当前页面的标题”,小编整理了以下知识点,请大家跟着小编的步伐一步一步的...
    99+
    2023-06-26
  • 使用FeignClient设置动态Url
    目录FeignClient设置动态Url1. 需求描述2. 实现方案3. 细节分析FeignClient注解配置url属性实现指定服务方FeignClient设置动态Url 1. 需...
    99+
    2024-04-02
  • windows hello人脸识别设置不了此选项当前不可用如何解决
    这篇文章主要讲解了“windows hello人脸识别设置不了此选项当前不可用如何解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“windows hello人脸识别设置...
    99+
    2023-07-04
  • PHP中怎么利用AJAX 动态获取当前时间
    本篇文章给大家分享的是有关PHP中怎么利用AJAX 动态获取当前时间,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。 ...
    99+
    2024-04-02
  • React项目中动态设置环境变量
    目录使用 dotenv 库1. 安装 dotenv 库2. 创建 .env 文件3. 在项目中使用环境变量通过命令行参数传递环境变量1. 在 package.json 中定义命令2....
    99+
    2023-05-16
    React 动态设置环境变量 React 环境变量
  • 如何使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
    这篇文章给大家分享的是有关如何使用element-ui的el-menu导航选中后刷新页面保持当前选中状态的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。具体代码如下所示:<e...
    99+
    2024-04-02
  • Xamarin XAML语言中如何使用Progress属性设置当前进度
    小编给大家分享一下Xamarin XAML语言中如何使用Progress属性设置当前进度,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!Xamarin XAML语言...
    99+
    2023-06-04
  • 如何使用Feign动态设置header
    今天小编给大家分享一下如何使用Feign动态设置header的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。Feign动态设置...
    99+
    2023-06-29
  • 怎么使用FeignClient设置动态Url
    本文小编为大家详细介绍“怎么使用FeignClient设置动态Url”,内容详细,步骤清晰,细节处理妥当,希望这篇“怎么使用FeignClient设置动态Url”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。Fei...
    99+
    2023-07-02
  • C#使用NPOI设置Excel下拉选项
    本文实例为大家分享了C#使用NPOI设置Excel下拉选项的具体代码,供大家参考,具体内容如下 最近在做一个导出模板的功能,需要限制用户的某些单元格输入的内容。 期望达到的效果:单元...
    99+
    2024-04-02
  • 使用选项设置 MySQL 程序变量
    许多 MySQL 程序都具有在运行时使用 SET 语句设置的内部变量。大多数程序变量也可以在服务器启动时设置,借助与指定程序选项相同的语法。示例 1mysql 有一个 max_allowed_pa​​cket 变量,它控制其通信缓冲区的最大...
    99+
    2023-10-22
  • 如何使用uniapp动态设置宽度
    随着移动互联网的发展,越来越多的开发者开始学习和使用uniapp来快速开发实用的移动App。在开发过程中,动态设置组件的宽度是一个非常常见的需求。本文就将介绍如何使用uniapp动态设置宽度,让你的应用在不同的设备上都能够有着很好的视觉效果...
    99+
    2023-05-14
  • Django项目中动态设置静态文件路径的全过程
    目录前言一、修改BASE_DIR:二、修改模板文件路径(TEMPLATES中的DIRS的值):三、修改国际化文件路径,由于LOCALE_PATHS默认不存在,需要自己在合适位置添加,...
    99+
    2024-04-02
  • windows使用netsh设置静态&动态ip的脚本
    使用netsh设置静态ip地址: 复制代码代码如下: @echo off netsh interface ip set address "本地连接" static 172.24.83.239 255.255.255.0 ...
    99+
    2023-05-29
    静态ip 动态ip 脚本 windows netsh 静态
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作