vant 的picker如何绑定多级联动？

Question

想使用vant的picker组件绑定多级联动的，但是我的多级联动json数据是:
`pickerData:[{
id:1,
name:'A区',
child:[{

  id:11,  
  name:"1-11列",  
  child:\[{  
     id:31,  
     name:"1-31号",  
  },{  
     id:32,  
     name:"1-32号",  
  },\]  

},{

  id:12,  
  name:"1-12列",  
  child:\[{  
     id:41,  
     name:"1-41号",  
  },{  
     id:42,  
     name:"1-42号",  
  },\]  

}]
},{
id:2,
name:"B区",
child:[{

  id:21,  
  name:"2-21列",  
  child:\[{  
     id:31,  
     name:"2-31号",  
  },{  
     id:32,  
     name:"2-32号",  
  }\]  

},{

  id:22,  
  name:"2-22列",  
  child:\[{  
     id:41,  
     name:"2-41号",  
  },{  
     id:42,  
     name:"2-42号",  
  }\]  

}]
}]`

但是vant的picker并没有绑定这种数据格式的，请问大佬怎么搞？

Answer 1

我自己写了一下，只不过这种不太通用，就是改变的时候没有让他一级一级往下获取，这个你们可以自行解决
`<el-button type="primary" @click="show=true">弹窗</el-button>

<van-popup v-model="show" position="bottom" :overlay="true">
    <van-picker show-toolbar title="标题" :columns="columns" @cancel="onCancel" @confirm="onConfirm" @change="onChange"/>
</van-popup>`

`<script>

var pickerData=[{
    id:1,
    name:'A区',
    child:[{
        id:11,
        name:"1-11列",
        
    },{
        id:12,
        name:"1-12列",
    }]
},{
    id:2,
    name:'B区',
    child:[{
        id:21,
        name:"2-21列",
    },{
        id:24,
        name:"2-24列",
    }]
}]
 var vm = new Vue({
    el: '#app',
    data(){
        return {
            show:false,

            address:[],//当前选中的盘点位置

            columns:[{
                values: [],
      className: 'column1'
            },{
      values: [],
      className: 'column2',
      defaultIndex: 0
    }],
        }
    },
    created(){
        for(var i in pickerData){
            var obj = {
                text:pickerData[i].name,
                id:pickerData[i].id
            }
            this.columns[0].values.push(obj)
        }
        for(var i in pickerData[0].child){
            var obj = {
                text:pickerData[0].child[i].name,
                id:pickerData[0].child[i].id
            }
            this.columns[1].values.push(obj)
        }
        
    },
    methods:{
        onCancel(){
            this.show = false
        },
        onConfirm(picker,value,index){
            console.log('onConfirm',picker,value,index)
            this.address=[]
            for(var i in picker){
                this.address.push(picker[i].id)
            }
            this.show = false
        },
        onChange(picker,value,index){
            console.log('onChange',picker,value,index)
            if(index == 0){
                var arr = []
                for(var i in pickerData){
                    if(value[0].id == pickerData[i].id){
                        for(var x in pickerData[i].child){
                            var obj = {
                                text:pickerData[i].child[x].name,
                                id:pickerData[i].child[x].id
                            }
                            arr.push(obj)
                        }
                    }
                }
                picker.setColumnValues(1,arr)
            }else if(index == 1){
                
            }
        }
    }
})

</script>`

Answer 2

最近处理了个二级分类的，处理成官方数据形式来写。
:columns="columns"
columns写到计算属性computed里，computed return一个过滤的数据和官方提供的数据格式一致即可。

 onChange(picker, values){
    //选择项目操作
    picker.setColumnValues(1, this.arr[values[0]]);
 } 
 onConfirm(value,index){
    //确认选择操作
    //value:选择的项目数组，index：选择的项目下标数组，可以利用下标数组操作你自己的对象
}

Answer 3

首先：百度搜索到这个网址 应该是官网 https://youzan.github.io/vant...

问题1：看了一下 多列联动 的案例，他这个只能是多列并没有联动，因为联动是需要自己处理的。
那么问题就简单了，你的数据有多少级就渲染多少列，获取每一级（就是列）的数据，自己写个方法（比如递归什么的）在你的数据结构里面取出来。

问题2：看到你的数据里面有ID，官网文档都是纯汉子和index，感觉这并不可以很好的满足开发需求，仔细看了下demo，发现如下代码

columns: \[ { text: '杭州', disabled: true }, { text: '宁波' }, { text: '温州' } \]

看来也是支持对象的，但是文档并没有说明，猜测text表示name,key或者index可能表示id。可以试试看，或者查看源码。