Vant Picker组件问题,Picker设置选中值,清除Picker选中值

Picker设置选中值/恢复默认选项/清空选中值/切换

问题描述

需求是一个选择时间的选择器,需要加一个选择全部时间的操作。所以需要把清除掉上一次Picker选中的值。Vant的文档的实例方法都没有示例,着实是费了很大劲。
在这里插入图片描述
目前逻辑是选择时间点击确定的话是按筛选时间去查询。点击全部时间按全部时间去查询,把picker恢复到默认状态。

代码

template的结构

<van-popup v-model="showPicker" position="top" :lazy-render='false'>
	<div class="time-picker-container">
    <div class="all-time" :class="allTimeFlag ? 'is-active' : ''" @click="selectAllTime">全部时间</div>
     <div class="picker-wrapper">
       <div class="time-picker-label"></div>
       <van-picker
         ref="yearPicker"
         class="time-picker"
         :columns="yearColumns"
         visible-item-count="3"
         item-height="0.56rem"
         :default-index="yearIndex"
         @change="changeYear"
       >
       </van-picker>
       <div class="time-picker-label month-label"></div>
       <van-picker
         ref="monthPicker"
         class=&#
  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vant Picker是一个可以滚动选择的下拉列表组件,类似于Select下拉列表。在Vant文档中,虽然没有提供直接的API来实现搜索功能,但可以通过手动实现来实现搜索功能。一个思路是添加一个搜索框,并对搜索框的数据进行双向绑定。然后使用Vue的watch来监听数据的变化,每次数据更新后,可以使用匹配规则对请求接口返回的数据列表进行筛选,并将筛选后的数据列表绑定给Picker组件,从而实现搜索功能。这个功能不需要请求后端接口,可以直接在前端进行处理。 官方文档中可能并未提供详细的实现方法,但通过仔细阅读文档、方法和类型的说明,可以找到相关内容。此外,度娘也可能无法直接提供相关信息,因此可能需要花费一些时间进行试错和解决问题。你可以参考官方文档和尝试不同的方法和参数来实现vant picker的搜索功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [【每天学一点-05】在Vue中使用Vant组件-picker选择器,并给选择器添加搜索功能](https://blog.csdn.net/weixin_43906233/article/details/125943267)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [Vant picker 多级联动操作](https://download.csdn.net/download/weixin_38731979/14693049)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值