van-picker级联选择（获取多个字段）

前言

使用​​Vant​​​的​​picker​​级联选择返回多个字段数据信息

官方文档

修改​​onConfirm​​事件

//data返回数据数组，index返回索引数组  
            onConfirm(data,index)
            {   
                let vm = this;
                let str = "";  // 呈现页面显示  /xxx/xxx/xxx
                for(let i = 0;i < data.length; i ++){
                    if(i>0){
                        str += "/" + data[i];
                    }
                    else{
                        str +=data[i];
                    }
                }
                // 获取一级分类
                vm.form.oneCategoryId = vm.columns[index[0]].id;
                vm.form.oneCategoryName = vm.columns[index[0]].name;
                // 获取二级分类
                if(vm.columns[index[0]].children !== undefined){
                  vm.form.twoCategoryId =vm.columns[index[0]].children[index[1]].id;
                  vm.form.twoCategoryName =vm.columns[index[0]].children[index[1]].Name;
                }
                this.form.kind = str;

                this.showPicker = false
            }

<van-field readonly clickable placeholder="一二级分类" :value="form.kind" @click="showPicker = true" />
                      <van-popup v-model="showPicker" position="bottom" :duration="0">
                        <van-picker show-toolbar title="分类选择" :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" @change="onChange" />
                      </van-popup>

控制台​​debugger​​调试

• • 
    
• 数据源
  
• 效果
  
  •