vant-picker级联问题

级联时主要注意一级二级之间的联动,需要一个方法处理,其他的跟单列的相同 

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值