您现在的位置是:网站首页> 编程资料编程资料
使用van-picker 动态设置当前选中项_vue.js_
2023-05-24
496人已围观
简介 使用van-picker 动态设置当前选中项_vue.js_
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绑定的数据重新进行取值操作即可。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
相关内容
- Vue中的事件绑定与解绑方式_vue.js_
- element ui循环调用this.$alert 消息提示只显示最后一个_vue.js_
- vue3如何使用vant-picker封装省市二级联动_vue.js_
- js 字符串反转(倒序)的几种方式总结_javascript技巧_
- JS中关于Class类的静态属性和静态方法_javascript技巧_
- js对象合并的4种方式与数组合并的4种方式_javascript技巧_
- Vue中如何处理token过期问题_vue.js_
- vue中如何实现复制内容到剪切板详解_vue.js_
- Vue如何整合mavon-editor编辑器(markdown编辑和预览)_vue.js_
- Vue获取DOM的几种方法总结_vue.js_
