vantUI中picker默认回显选中的那一栏。注意是picker组件

再吸一口居居

已于 2022-06-15 11:58:03 修改

阅读量3.4k

点赞数

分类专栏： VUE 文章标签：前端 js vue.js

于 2022-04-20 18:07:22 首次发布

本文链接：https://blog.csdn.net/ju_vlog/article/details/124303812

版权

VUE 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

	watch: {
			show: {
				handler: function(newVal) {
					
					this.showBottomPop = newVal
					
					// picker打开,默认选中已选择的那一栏
					this.$nextTick(()=>{
						if (this.columns != null && this.columns.length > 0) {
							       
                        this.$refs[this.pickerRef].setColumnIndex(0,this.defaultPopIndex)
					    }
					})
					
				},
				immediate: true
			}
		},


思路: 
参数说明：columns是picker的绑定数组，defaultPopIndex是setColumnIndex API里需要的参数，
         this.$refs[this.pickerRef] 指向picker的ref
1.监听picker的开关，show
2.当show变化的时候，先判断picker绑定的数组columns是否有值，并且长度大于0.保证picker有数据的情况下
3.使用$nextTick,在页面变化后，使用setColumnIndex 这个API设置picker的选中值，