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

最新推荐文章于 2024-07-30 16:21:45 发布

codezha

最新推荐文章于 2024-07-30 16:21:45 发布

阅读量6.3k

点赞数 4

分类专栏： vant

本文链接：https://blog.csdn.net/codezha/article/details/117331226

版权

vant 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

在这里插入图片描述

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

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

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

codezha

关注关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
5
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

picker多选 vant_vant实现select效果，单选和多选

weixin_39689870的博客

12-20

4398

mpvue 组件踩坑笔记 van-picker动态设置选中项

funny_girl的博客

04-22

4650

最近在弄vant-picker多列选择职业分类且联动的效果。代码如下： <van-cell title="底部弹出" is-link @click="showBottom" /> <van-popup :show="bottom" position="bottom" custom-style="height: 80%" @close="h...

5 条评论您还未登录，请先登录后发表或查看评论

vantUI 获得piker选中值的自定义ID操作

01-21

问题官网中给的picker例子，每项只能是个字符串，但我需要它返回每个字符串对应的自定义ID，而不是index。 vantUI官网：picker 官网例子 <van columns=columns change=onChange> export default { data() { return { columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'] }; }, methods: { onChange(picker, value, index) { console.log('当前值'+value+

vantUI中picker默认回显选中的那一栏。注意是picker组件

ju_vlog的博客

04-20

3434

watch: { show: { handler: function(newVal) { this.showBottomPop = newVal // picker打开,默认选中已选择的那一栏 this.$nextTick(()=>{ if (this.columns != null && this.columns.length > 0) { ..

vant picker设置默认值或手指滑动滚动未停止点击取消或者阴影再次点击 picker中选中的不是默认值

shuang666666的博客

11-04

4027

vant picker

Vant picker选择器设置默认值导致选择器失效

qq_25757181的博客

07-06

5431

vant 版本 >=2.12.27场景：自定义选择器数据结构是数组对象，picker默认显示第一个或上传选择的项。html 代码： js代码：问题：选择器的在做选中，点击确认时，选中的值没有发生变化，还是未切换选择之前的值。问题定为：js代码中行位置： this.defaultIndex = this.value; // bug在这里。问题分析：这里服务器使用的key值，导致服务器计算picker选择的索引index出错，用户选中picker值的某一项，然后点击右上角的“确认”按钮，picker

vant4 van-picker 配置弹出层时，选项默认第一项的处理方法

fortyman的博客

06-22

387

vant4中picker不起作用的，一些方法

van-picker级联设置默认选择

前端小白成长记

07-30

702

方法来设置选择的索引。这个方法可以帮助您在需要时通过编程方式设置选择的值。在Vanilla Picker（van-picker）组件中，您可以使用。

weui的picker动态（defaultValue）设置选中一列或者多列

mofeimo110的博客

01-16

9504

上一篇中写了如何使用weui的picker自定义生成省市区三级联动，在后续项目开发中有一个需求需要根据之前已经选好的省市区唤醒一个picker然后默认选中之前的选项，后来在多次测试之后picker初始化中的defaultValue属性只会生效一次。然后又读了一番源码。先说解决方案：picker初始化时，传入一个动态的不重复的id，时间戳自然是最合适的选择： weui.picker(item...

Vant picker 设置选中值

weixin_39428080的博客

07-13

2752

picker

vant van-datetime-picker 日期组件设置选择范围当前时间到一年以内

最新发布

10-26

1. 初始化时设置默认值：在数据里给picker选项添加一个表示“无”的默认值，例如`options: ['选项A', '选项B', { label: '请选择', value: null }]`。当用户未做选择时，显示的就是这个空值。 2. 使用条件渲染：在...

vant2 表单提交后van-picker置初始值问题

QAQ_ing的博客

05-12

578

van-picker置为初始值

VantUI 时间选择器van-datetime-picker修改样式

donghua201的博客

04-03

1931

要求表单可以选择预约时间，月日时分显示单位，分钟以15分钟为一个间隔选择。选中项添加背景色，突出选中效果。

vue 多项选择器 picker组件——动态绑定数组实现多项选择器

weixin_45896868的博客

04-13

2241

基于这个演示的效果我们可以很直观的知道各个属性的作用：range是我们选择的范围，range-key是要它显示的内容，value是每次选定的下标（类似[0,0,0]这样），@columnchange是滑动改变选择触发的方法。一开始我认为是同步的问题，就是接口的数据还没来及给multiAdress这个数组，picker就已经显示了，于是使用了promise来解决这个问题，但是没有作用，于是我又想了很久，终于在别人的博客中找到了答案，那就是。省市区的格式是这样的，Code可以不用管，这是我调用接口用的参数。

van-picker如何实现类似el-select的功能

champion_ooO的博客

03-21

584

2.因为放在van-form中，每一行都是以van-field去作为基础组件来写，但是这样写就只能处理一半，要么你field双向绑定取到的值是label，要么是value，此时页面渲染与你想要作为参数传递的就是同一个属性了。4.使用这个文件的地方，也就是原来van-field与van-picker配合使用的地方。3.所以需要重新封装一次，自定义一个vue文件即可。1.移动端开发，大概页面就是这样。

van-datetime-picker改变选中行上下边框样式

2303_76798990的博客

06-10

239

van-datetime-picker

van-date-picker的使用

07-27

van-date-picker是一个日期选择器组件，用于在Vue项目中选择日期。根据提供的引用内容，可以看出在UserEdit.vue页面中使用了van-date-picker组件来实现日期选择功能。在UserEdit.vue页面中，首先定义了相关变量isShowBirth、minDate、maxDate和currentDate，用于控制日期选择器的显示、可选日期范围和当前选中日期。\[1\] 然后，在methods中定义了一些方法，包括onConfirm、cancel和choseTime。onConfirm方法用于确认选择日期，将选中的日期格式化后赋值给visitTime，并将格式化后的日期显示在页面上。cancel方法用于取消选择日期，将currentDate重置为当前日期。choseTime方法用于显示日期选择器。\[2\] 最后，在模板中使用van-field和van-popup组件来实现日期选择器的展示和交互。van-field组件用于显示已选中的日期，并在点击时触发choseTime方法显示日期选择器。van-popup组件用于展示日期选择器，并通过min-date和max-date属性设置可选日期范围。\[3\] 综上所述，van-date-picker的使用包括定义相关变量、编写方法以及在模板中使用van-field和van-popup组件来实现日期选择器的功能。 #### 引用[.reference_title] - *1* [vant-DatetimePicker 时间选择的使用](https://blog.csdn.net/weixin_57246351/article/details/119987197)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [vant 组件，时间选择器的应用 van-datetime-picker](https://blog.csdn.net/weixin_49577940/article/details/128719060)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]