级联时主要注意一级二级之间的联动,需要一个方法处理,其他的跟单列的相同
<div class="content">
<div @click="openPicker()">{{pickerValue}}</div>
<van-popover v-model="showPicker" position="bottom">
<van-picker
:columns="columns"
show-toolbar
:default-index="defaultIndex"
@confirm="setData"
@cancel="showPicker = false"
></van-picker>
</van-popover>
</div>
showPicker:false,
defaultIndex:0,
pickerValue0:'浙江',
pickerValue:'温州',
columns: [{
text: '浙江',
defaultIndex:NaN,
children: [{
text: '杭州',
defaultIndex:NaN
}, {
text: '温州',
defaultIndex:NaN
}]
}, {
text: '福建',
defaultIndex:NaN,
children: [{
text: '福州',
defaultIndex:NaN
}, {
text: '厦门',
defaultIndex:NaN
}]
}]
openPicker(){
// 打开筛选框的默认值
this.columns.map((item,index)=>{
if(this.pickerValue0===item.text){
this.defaultIndex = parseInt(index)
for(let i =0 ;i<item.children.length;i++){
if(this.pickerValue === item.children[i].text){
item.defaultIndex = parseInt(i)
}
}
}
})
console.log(this.columns);
this.showPicker = true
},