共计 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]
}
正文完