van-picker的级联‘
代码如下
没有级联的官网有代码,
关于级联中的默认值,也就是起先默认的一级和二级,打开级联框时默认选中
<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>
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
}]
}]
怎样确定默认值
setData(v){
console.log(v);
this.pickerValue = v[1]
this.showPicker = false
},
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
},