关于vue2:Vant-picker-多级联动操作回显默认值

官网链接

picker组件多级联动操作回显,官网文档只给了default-index单列抉择时,默认选中项的索引。
多列联动如果设置默认值,回显示用户上次抉择的值那?
通过网上查找没找到具体解决方案,通过多方剖析钻研具体解决方案如下:
1.要先设置default-index属性。
2.通过 ref 获取到 Picker 实例并调用实例办法getIndexes

// htm局部
<van-popup v-model="showPicker" position="bottom">
  <van-picker
    ref = "vanPicker"
    show-toolbar
    :columns="columns"
    @cancel="showPicker = false"
    @confirm="onConfirm"     
   default-index=“defaultIndex”
  />
</van-popup>
// data局部
data(){
  return {
   defaultIndex: 0,
   seleIndex:[0,0]
   showPicker: false,
   columns: [...
   ]
 } 
// 函数局部
// 显示选项办法
showPicker(){
  this.showPicker=true;
  this.$refs.vanPicker?. setIndexes(this.seleIndex);
}
// 确认抉择办法
onConfirm(val ,index){
  this.seleIndex=index;
  this.defaultIndex= index[0]
}

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理