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

最新推荐文章于 2024-06-16 08:02:07 发布
最新推荐文章于 2024-06-16 08:02:07 发布
阅读量487 收藏 1
点赞数
分类专栏： 踩坑记录 文章标签： 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QAQ_ing/article/details/130645006
版权

场景：产品需求表单提交后需要将所有表单项置空。picker也需要。

参考过https://blog.csdn.net/weixin_42556438/article/details/115328338

但他的操作是使用两次setColumnIndex来分别设置两个选择器的值

在上图的文档中有一个方法可以一次设置所有

但文档没有例子来展示调用方式和传参

调用方式我是参照参考文章来的，但传参只能自己实验

最终代码：

this.$refs.你的picker上的的ref.setIndexes([0,0])

结果：

 

QAQ_ing
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vant-picker级联选择初始设置默认值
mengyu522的博客
08-25 9489
vant-picker级联选择设置默认值 新手vue项目，做移动端使用vant插件时问题记录 做表单提交用到vant-picker,在多级联动时，想按照picker的级联选择显示数据，显示时遇到问题不大，到编辑表单数据回显遇到问题，vant文档只介绍了单选项默认项，多级未介绍，于是尝试赋值。 一、多级联动 ![数据格式](https://img-blog.csdnimg.cn/13d7a31e3c654382adb08e83b3f33f95.jpg?x-oss-process=image/wate.
vue实现重置表单信息为空的方法
10-17
今天小编就为大家分享一篇vue实现重置表单信息为空的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vant picker设置默认值 或 手指滑动 滚动未停止 点击取消或者阴影 再次点击 picker中选中的不是默认值
shuang666666的博客
11-04 3944
vant picker
vue3+vant4中表单内嵌picker的默认值设置
最新发布
关中刀客在青岛
06-16 355
vue3+vant4中表单内嵌picker的默认值设置。
van-picker组件设置默认值
qq_45755298的博客
04-08 827
可以使用官网提供的v-model属性。
vant-picker默认值
woniuyibuyibu的博客
07-13 845
classList: [{ values: ['7年1班','7年2班'], defaultIndex: 0 }],这里直接加上默认值index 而不是单独写一个 defaultIndex。
Vant picker选择器设置默认值导致选择器失效
qq_25757181的博客
07-06 5271
vant 版本 >=2.12.27场景：自定义选择器数据结构是数组对象，picker默认显示第一个或上传选择的项。html 代码： js代码： 问题：选择器的在做选中，点击确认时，选中的值没有发生变化，还是未切换选择之前的值。问题定为：js代码中行位置： this.defaultIndex = this.value; // bug在这里。问题分析：这里服务器使用的key值，导致服务器计算picker选择的索引index出错，用户选中picker值的某一项，然后点击右上角的“确认”按钮，picker
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
10-15
在Vue开发过程中，使用Vant UI库的下拉框组件`van-dropdown-item`时，可能会遇到一个问题：下拉框的标题`title`始终不变，即使选中了不同的选项。本篇将详细介绍如何解决这个问题。 首先，我们需要确保Vue项目正确...
vant 自定义 van-dropdown-item的用法
10-15
本文将详细介绍如何自定义 Vant 的 `van-dropdown-item` 组件，以满足特定的设计需求。 `van-dropdown-item` 是 Vant UI 中的一个下拉菜单组件，通常用于展示一个可折叠的选项列表。在默认情况下，`van-dropdown-...
vantUI 获得piker选中值的自定义ID操作
01-21
问题 官网中给的picker例子，每项只能是个字符串，但我需要它返回每个字符串对应的自定义ID，而不是index。 vantUI官网：picker 官网例子 <van columns=columns change=onChange> export default { data() { ...
Vant picker 多级联动操作
01-18
官网地址：链接 官网文档可能不是很完善，但仔细看文档，方法，类型其实都讲到的。 度娘也没有找到，花了大半天爬坑试错。...van-picker show-toolbar :columns=columns @cancel=showPicker = false @confirm=
van-datetime-picker配置type为datetime的默认值
Franky
11-07 1888
vant-datetime-picker
van-datetime-picker 设置默认时间
feifei0987654321的博客
08-26 8187
在van-datetime-picker中用:value或者v-model绑定上值，注意此时默认的值必须是new Date()，即Fri Aug 26 2022 10:14:42 GMT+0800 (中国标准时间)，否则点击下拉的时候是不会展示默认值的！！不同的时间组件不能绑定同一个值谨以此记录一下，ε=(´ο｀*)))唉又是在犯蠢的一天，(ｷ｀ﾟДﾟ´)!!...
vant form表单内部button触发提交解决办法
hy3528的博客
06-09 1677
/</</一开始我选择在事件中加上.stop来阻止，但发现并没有用。
【实战经验】vant中picker选择器封装，让你的表单选择更简单
Shids_的博客
06-12 6008
【实战经验】vant中picker选择器封装，让你的表单选择更简单
微信小程序van-datetime-picker打开后设置默认时间如：当天
gaoyu007的博客
10-10 1800
微信小程序van-datetime-picker打开后设置默认时间如：当天
Vant Weapp组件picker选择器初始默认选中
热门推荐
weixin_39312834的博客
03-08 1万+
小程序使用vant-picker多列数据级联选择设置初始默认选中通过this.xx修改对应列defaultIndex的不生效，数据改变页面未渲染 解决：在onReady()方法中通过selectComponent方法获取picker实例再调用官方文档的setColumnIndex方法 注：wepy中获取组件实例写法为this.$wxpage.selectComponent() 代码示例： <...
vant+v2 封装数据单选和多选组件
m0_61890246的博客
01-08 1307
1.在正常渲染的表单上,写一个<van-field>标签.强调工作班人员的位置,.2用<template>引入分装的组件,只管显示值的选择,回显等操作.1.当工作班人员是单选的时,显示正常Picker 选择器的效果.2.当是多选的时候,显示多选框效果,并可以回显选中的状态.3.需要this.$emit父组件,将值渲染到页面。
vant4中的van-date-picker怎么使用？
07-20
你可以按照以下步骤在 Vant 4 中使用 van-date-picker： 1. 首先，确保你已经安装了 Vant 4，并正确引入了相应的组件。 2. 在你需要使用 van-date-picker 的页面中，导入 van-date-picker 组件： ```vue import { DatePicker } from 'vant'; ``` 3. 在你的模板中，使用 <van-date-picker> 标签来添加日期选择器： ```vue <template> <div> <van-date-picker v-model="date" type="date" /> </div> </template> ``` 4. 在你的 `data` 中定义一个 `date` 变量来存储选择的日期： ```vue export default { data() { return { date: '' }; } } ``` 这样，你就可以在页面中使用 van-date-picker 组件了。你可以根据需要修改 `type` 属性来选择日期选择器的类型，例如 `date`、`datetime`、`year-month` 等。 希望这能帮到你使用 van-date-picker 组件！如有更多问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值