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

134次阅读

共计 628 个字符,预计需要花费 2 分钟才能阅读完成。

官网链接

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]
}

正文完
 0