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

目录
  • van-picker 动态设置当前选中项
  • van-picker 选择器空白问题

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绑定的数据重新进行取值操作即可。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vant picker 多级联动操作

    官网地址:链接 官网文档可能不是很完善,但仔细看文档,方法,类型其实都讲到的. 度娘也没有找到,花了大半天爬坑试错. 搭配弹出层使用 <van-field readonly clickable placeholder="选择城市" :value="station" @click="showPicker = true" /> <van-popup v-model="showPicker" position=&q

  • vue vant中picker组件的使用

    1.引入 import { Picker } from 'vant' 2.使用 components: { vanPicker: Picker, } 3.渲染 <van-picker show-toolbar :columns="columns" value-key="text" /> 4.将值push到columns //注意的点vant默认的是text,如果你需要修改需要value-key="你要定义的名字",否则不会渲染 thi

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

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

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

    目录 van-picker 动态设置当前选中项 van-picker 选择器空白问题 van-picker 动态设置当前选中项 使用vant-field和van-picker.van-popup组合实现单选类型表单时,通常我们需要pick每次显示时,默认选中的是当前有效值,但往往会出现这样的情况 我们可以在没法显示picker的时候,动态设置当前选中项,代码示例如下 //pick中指定ref属性为myPicker //currentIndex为当前有效值对应的索引值 this.$refs.myP

  • js动态设置select下拉菜单的默认选中项实例

    利用javascript设置select下拉菜单的选中项. 代码实例如下: <!--js动态设置select下拉菜单的默认选中项--> <html> <head> <title>下拉菜单</title> <script type="text/javascript"> window.onload=function(){ var osel=document.getElementById("selID"

  • 微信小程序 input输入及动态设置按钮的实现

    微信小程序 input输入及动态设置按钮的实现 [需求]实现当手机号已填写和协议已勾选时,"立即登录"按钮变亮,按钮可点击:若有一个不满足,按钮置灰,不可点击:实现获取短信验证码,倒计时提示操作:对不满足要求内容进行toast弹窗提示. <view class="container"> <!--手机号--> <view class="section"> <text class="txt"

  • Jquery chosen动态设置值实例介绍

    Jquery chosen动态设置值实例介绍

    Jquery chosen 地址:https://github.com/harvesthq/chosen 一款选择插件,支持检索,多选,但不支持输入效果如下图  确定是用的这个哦, 不然可往下看也没有什么意义了 突然发现如果用在省市选择发现有如下问题: 1,不能动态设置值 2,不能动态设置选中 看了好几遍API愣是米有发现有方法可以直接调用.没办法就看源码,发现在其初始化的时候有一个判断如下图:  发现有个destroy是不是("#city).chosen("destroy"

  • django 实现celery动态设置周期任务执行时间

    蓝鲸paas平台app开发经验分享 腾讯蓝鲸智云是一套基于PaaS的技术解决方案,提供了完善的前后台开发框架.调度引擎.公共组件等模块,帮助业务的产品和技术人员快速构建低成本.免运维的支撑工具和运营系统. PaaS平台不仅将应用服务的运行和开发环境作为一种服务提供给开发者用户,更为开发者用户提供了高效便捷的开发服务,如:组件系统,统一登录,权限管理,后台框架,MagicBox,桌面/工作台等. PaaS平台提供支持多语言的开发框架,助力运维人员能基于平台之上以自己擅长的技术语言(Python.j

  • node中Express 动态设置端口的方法

    能够动态设置端口的话,调试起来会比较方便,不需要因为默认端口被占用去改代码,还可以多开.代码如下,其实没啥难度,只要你了解nodejs里的process模块,很容易就能写出来. 假设我们想要的命令格式为node app.js 8000 var process = require('process') var port = (function () { if (typeof (process.argv[2]) !== 'undefined') { // 如果输入了端口号,则提取出来 if (isN

  • JSON中key动态设置及JSON.parse和JSON.stringify()的区别

    本文给大家介绍JSON中key动态设置及JSON.parse和JSON.stringify()的区别讲解,具体详情如下所示: var user_info_json = []; user_info_json[user_info_json.length] = eval('('+ '{"'+ id +'": "'+ value +'"}' +')'); JSON.stringify(user_info_json) 先转成字符串,然后使用eval()格式化,然后在把json

  • Java通过反射机制动态设置对象属性值的方法

    /** * MethodName: getReflection<br> * Description:解析respXML 在通过反射设置对象属性值 * User: liqijing * Date:2015-7-19下午12:42:55 * @param clzzName * @param respXML * @return * @throws ClassNotFoundException * @throws DocumentException * @throws IllegalArgumentE

  • 用JS动态设置CSS样式常见方法小结(推荐)

    用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性 某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign) 如果想保留 - 号,就中括号的形式 element.style['text-align'] = '100px'; element.style.height = '100px'; 2. 直接设置属性(只能用于某些属性,相关样式会自动识别) element.setAttribute('height', 100);

  • ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码

    在ThinkPHP3.1版本之前,如果需要设置自动验证或者自动完成,必须定义在模型中,或者通过setProperty方法动态设置属性来完成,但是这样做的缺点是不太方便动态改变和调整 . ThinkPHP3.1版本在模型类中增加auto和validate两个连贯操作,用于动态设置自动完成和自动验证规则,现在可以在Action中使用,示例代码如下: $validate = array( array(verify,require,验证码必须!), array(name,,帐号名称已经存在!,0,uni

随机推荐