如何让picker-view上下级联动

如何让picker-view上下级联动

img

img

一共有三组数组,1数组里面是大类集合,2、3数组是1数组的小类,如何让picker-view 根据1数组的大类,联动

<picker-view indicator-style="height: 30px;" style="width: 100%; height: 40px;" :value="value" bindchange="bindChange">

            <picker-view-column  class="box1" >
                <view v-for="(item,index) in a2[1]" :key="index" class="item">{{item}}view>
            picker-view-column>
            
            <picker-view-column>
                <view class="item">4级view>
                 <view class="item">5级view>
                  <view class="item">6级view>
            picker-view-column>
        picker-view>


data () { return { a2: { '1': [], '2': [], '3': [], }, value: [0, 0] } },

// 获取一级类列表 onShow () { // 发起ajax请求一级类列表数据,并解析获取类列表 ajaxRequest().then(res => { let arr = res.data this.a2['1'] = arr.map(item => item.name) this.a2['2'] = arr[0].child this.a2['3'] = arr[0].child[0].child }) },

// 二级类列表绑定变化 bindChange (e) { let val = e.detail.value let _this = this this.a2['2'].forEach((value, index) => { if (val[0] == index) { _this.a2['3'] = value.child } }) this.value = val }

以下答案引用自GPT-3大模型,请合理使用:
数组中的1数组就是父级,2、3数组就是子级。

在vue中可以使用computed来实现这个功能

computed: {

pickerData: function(){

var arr = this.a1;

var i = arr.length;

console.log(i);

return arr;

}

}