c
复制代码
<template>
<view>
<picker mode="multiSelector" @change="bindMultiPickerChange" @columnchange="bindMultiPickerColumnChange"
:value="multiIndex" :range="multiArray">
<view class="picker">
{{multiArray[0][multiIndex[0]]}} > {{multiArray[1][multiIndex[1]]}}
</view>
</picker>
</view>
</template>
<script>
export default {
data() {
return {
multiArray: [],
multiIndex: [0, 0],
//数据格式
array: [{
id: 0,
name: '大类1',
children: [{
id: 10,
name: '小类1'
},{
id: 11,
name: '小类11'
}
]
},
{
id: 1,
name: '大类2',
children: [{
id: 20,
name: '小类2'
}]
}
],
oneId: 0,
twoId: 0,
}
},
onLoad() {
this.getType()
setTimeout(() => {
this.initData();
}, 1000)
},
methods: {
initData() {
console.log('111', this.array);
//首次加载渲染第一列和第二列数据
const arrOne = this.array.map(item => {
return item.name; // 此方法将第一列'名称'分到一个新数组中
});
const arrTwo = this.array[0].children.map(item => {
return item.name; // 此方法将第二列'名称'分到一个新数组中
});
this.multiArray[0] = arrOne;
this.multiArray[1] = arrTwo;
this.oneId = this.array[0].id;
this.twoId = this.array[0].children[0].id;
},
//滚动时候触发，
bindMultiPickerColumnChange(e) {
console.log(e.detail.column, "e.detail.column表示是第几列表示是第几列")
if (e.detail.column === 0) {
this.initSelect(e.detail.value);
this.multiIndex[0] = e.detail.value;
} else if (e.detail.column === 1) {
this.multiIndex[1] = e.detail.value;
console.log('detailvalue', e.detail.value);
this.twoId = this.array[this.multiIndex[0]].children[this.multiIndex[1]].id;
}
console.log(this.oneId, "打印第一列id");
console.log(this.twoId, "打印第二列id");
},
//定义一个传入对应的'下标'为了拿到第一列id 和第二列的name和id的方法
initSelect(index) {
this.oneId = this.array[index].id; //拿到第一列id
this.multiIndex[1] = 0; //将右边的数组的下标变回第一个显示
this.$set(this.multiArray, 1, []); //清空对应右边数组的数据
if (this.array[index].children.length == 0) {
console.log("如果右边长度等于0,那么清掉右边ID");
this.twoId = "";
} else {
const arrTwo = this.array[index].children.map(item => {
return item.name; //将第一列的children的数组遍历name返回到一个新数组接收
});
this.$set(this.multiArray, 1, arrTwo); //重新赋值到新的数组里
this.twoId = this.array[index].children[0].id; //升那么对SB一八en t
}
},
//点击确定时触发,这里点击处理自己的业务,应该就是拿到两个个id去请求
bindMultiPickerChange(e) {
console.log(this.oneId);
console.log(this.twoId);
},
getType() { //清场
uni.request({
url: 'https://xxxxxxxx/station/getTypeGoods',
success: (res) => {
console.log(res.data);
//后台返回的是两个数组，一个数组是大分类，一个小分类
//将两个数组生成树结构 赋值给array
this.array = res.data.types.map((item, index) => {
return {
...item,
children: res.data.goods[index]
}
})
console.log('array', this.array);
//后台返回数据格式
//types:[{id:x,name:'xx'},{},{}...]
//goods:[[{id:x,name:'x'},{},{}...],[],[],...]
}
})
},
}
}
</script>
<style>
.uni-picker-tips {
font-size: 12px;
color: #666;
margin-bottom: 15px;
padding: 0 15px;
/* text-align: right; */
}
</style>
