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

最新推荐文章于 2024-07-30 16:21:45 发布
原创 最新推荐文章于 2024-07-30 16:21:45 发布 · 7k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

在前端开发中，使用Vant UI库的field、picker和popup组件构建单选表单时，确保picker打开时默认选中当前有效值是一个常见需求。通过设置`ref`并调用`setColumnIndex`方法可以实现这一功能。例如，将picker的ref设为`myPicker`，然后使用`this.$refs.myPicker.setColumnIndex(0, currentIndex)`，其中0是列索引，currentIndex是目标选项的索引值，确保在显示picker时正确选中所需项。

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

在这里插入图片描述

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

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

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

vant Picker组件踩坑
vera的博客
09-09 5126
如图 因需求要求，picker去掉顶部栏，点击下方确认按钮的时候获取选中的值 方法一：绑定change事件，选项改变时触发（但是有1s的延迟，操作太快了会取不到值，不可取） <van-picker :show-toolbar="true" :columns="reason" ref="picker" @change="change" /> <div class="btn" @click="handlePopSubmit('reason')"&g
vant-picker实现自定义内容，根据内容添加图标
weixin_44727080的博客
09-21 7189
前言： 在使用vant的框架的时候发现一件事，他的下拉内容只能输入文字，不可以是自定义，比如加图标，所以使用它的class名，然后仿照他的功能给完善了下，可以实现了自定义添加内容 实现效果： vant原来框架的内容： 我经过处理以后的效果图：这里的图片地址没有，如果满足条件，前面就有图片 实现步骤： 1、template部分：我这上面是vant的picker，可以打开看看之前的效果，这里是仿照他的效果实现的功能 <van-popup v-model="show...
vant+cell+picker+级联选择默认选中
qq_45068078的博客
12-21 1968
系列文章目录 文章目录系列文章目录一、代码示例-父组件调用二、代码示例-子组件总结 一、代码示例-父组件调用 <myCellTree v-model="test" title="测试"></myCellTree> 二、代码示例-子组件 /* vant@2.8.1 暂时只支持二级联动，更多的没有测试 注意:defaultIndex="defaultIndex[0]"，defaultIndex[0]意味着第一级选中的下标 this.$refs.cellTreePicker.
关于van-picker多列联动设置禁用选项无效的问题
qq_34925033的博客
01-23 1222
在微信小程序中使用的van-picker去做禁用某些选项发现直接处理好van-picker用的数据结构后并没有实现想要的功能，后来发现处理完要通过官方的setColumnValues重新去设置一遍就可以了（暂时就知道这个方式，不知道其他有没有）
Vant picker 设置选中值
weixin_39428080的博客
07-13 3103
picker
mpvue 组件踩坑笔记 van-picker动态设置选中项
funny_girl的博客
04-22 4863
最近在弄vant-picker多列选择职业分类且联动的效果。 代码如下： <van-cell title="底部弹出" is-link @click="showBottom" /> <van-popup :show="bottom" position="bottom" custom-style="height: 80%" @close="h...
van-picker怎么设置选中的颜色
最新发布
11-04
但是，实际上在 `van-picker` 中，我们不需要自己管理当前选中索引，因为组件本身会为选中的项添加一个类（如 `van-picker-column__item--selected`），所以方法一更简单。 **方法三：使用 Vant 的主题定制** ...
2021-12-11 工作记录--Wechat applet-结合＜van-popup＞和＜van-picker＞ 实现年份、月份下拉选择弹窗+禁止滚动穿透
weixin_48850734的博客
12-11 2874
Wechat applet-结合＜van-popup＞和＜van-picker＞ 实现年份、月份下拉选择弹窗+禁止滚动穿透
vantUI 获得piker选中值的自定义ID操作
01-21
官网中给的picker例子，每项只能是个字符串，但我需要它返回每个字符串对应的自定义ID，而不是index。 vantUI官网：picker 官网例子 <van columns=columns change=onChange> export default { data() { return {...
van-picker默认选中
01-17
### 设置 `van-picker` 默认选中项 对于 `van-picker` 组件，默认选中项可以通过多种方式实现。一种是在 mpvue 框架下通过特定方法来操作组件实例，另一种则是利用 Vant 官方推荐的方式。 #### 方法一：mpvue 特定...
van-picker 如何动态改变默认展示值？
09-16
- **`setColumnIndex` 方法**：当需要在不显示 `picker` 的时候动态设置当前选中项，可以使用该方法。示例代码如下： ```vue <van-field readonly :clickable="true" label="选择值" input-align="right" v...
van-picker级联设置默认选择
前端小白成长记
07-30 1535
方法来设置选择的索引。这个方法可以帮助您在需要时通过编程方式设置选择的值。在Vanilla Picker（van-picker）组件中，您可以使用。
weui的picker动态（defaultValue）设置选中一列或者多列
mofeimo110的博客
01-16 9881
上一篇中写了如何使用weui的picker自定义生成省市区三级联动，在后续项目开发中有一个需求需要根据之前已经选好的省市区唤醒一个picker然后默认选中之前的选项，后来在多次测试之后picker初始化中的defaultValue属性只会生效一次。然后又读了一番源码。 先说解决方案：picker初始化时，传入一个动态的不重复的id，时间戳自然是最合适的选择： weui.picker(item...
Vant Picker组件问题，Picker设置选中值，清除Picker选中值
weixin_42556438的博客
03-30 8695
Picker设置选中值/恢复默认选项/清空选中值/切换问题描述代码解析参考文档 问题描述 需求是一个选择时间的选择器，需要加一个选择全部时间的操作。所以需要把清除掉上一次Picker选中的值。Vant的文档的实例方法都没有示例，着实是费了很大劲。 目前逻辑是选择时间点击确定的话是按筛选时间去查询。点击全部时间按全部时间去查询，把picker恢复到默认状态。 代码 template的结构 <van-popup v-model="showPicker" position="top" :lazy-rend
picker多选 vant_vant实现select效果，单选和多选
weixin_39689870的博客
12-20 4508
官方推荐picker，但是我们项目用picker还要搭配Popup和cell、field，维护太太麻烦，所以自己封装一个select单选//封装VanFieldSelectPicker组件v-model="resultLabel"v-bind="$attrs"readonlyis-linkinput-align="right"@click="show = !show"/>v-bind="$a...
vue3 vant 3 picker 动态选中值的注意点
小书生
08-27 1690
vue3 vant 3 picker 动态选中值的注意点
VantUI 时间选择器van-datetime-picker修改样式
donghua201的博客
04-03 3569
要求表单可以选择预约时间，月日时分显示单位，分钟以15分钟为一个间隔选择。选中项添加背景色，突出选中效果。
vue 多项选择器 picker组件——动态绑定数组实现多项选择器
weixin_45896868的博客
04-13 3597
基于这个演示的效果我们可以很直观的知道各个属性的作用：range是我们选择的范围，range-key是要它显示的内容，value是每次选定的下标（类似[0,0,0]这样），@columnchange是滑动改变选择触发的方法。一开始我认为是同步的问题，就是接口的数据还没来及给multiAdress这个数组，picker就已经显示了，于是使用了promise来解决这个问题，但是没有作用，于是我又想了很久，终于在别人的博客中找到了答案，那就是。省市区的格式是这样的，Code可以不用管，这是我调用接口用的参数。
评论 5
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值