如何让picker-view上下级联动
一共有三组数组,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;
}
}