需要实现的功能
1.点左侧一级菜单时,需要拿一级菜单的ID获取右侧二级菜单
2.列表数据默认当前选中的一级菜单的所有数据
3.点二级菜单,列表数据为当前选中的二级菜单的数据
<van-dropdown-menu>
<van-dropdown-item v-model="left_list_val" :options="left_list" @change="change_tab_left()" />
<van-dropdown-item v-model="right_list_val" :options="right_list" @change="change_tab_right()" />
</van-dropdown-menu>
<script>
export default {
data() {
return {
cate_id: 0,// cate_id 用来筛选数据,菜单分类改变,需要讲v-model绑定的值赋值给cate_id
left_list_val: 0,// 左侧菜单 当前选中项对应的 value
right_list_val: 0,// 右侧菜单 当前选中项对应的 value
/*
左侧菜单 选项数组,
数据必须以下结构,即:{text:分类名称,value:分类id},可以跟自己的后台商量返回这样的结构。
如果后台返回的数据格式不是这种的,需要自己手动遍历数组改变属性名即可。
*/
left_list: [
{ text: '全部商品', value: 0 },
{ text: '新款商品', value: 1 },
],
right_list: [// 右侧菜单 选项数组
{ text: '默认排序', value: 0 },
{ text: '好评排序', value: 1 },
]
}
},
methods:{
//切换一级菜单
change_tab_left(){
this.cate_id = this.left_list_val; // 1级分类切换
this.mescroll.triggerDownScroll();// 主动触发下拉刷新获取数据
//拿一级分类ID,获取二级分类
this.right_list = [];
this.axios.post('/api/index/childCate',{
cate_id:this.left_list_val, //当前一级分类ID
}).then(res=>{
if(res.code == 1){
// 组合数据结构
res.data.child_list.forEach((item,i)=>{
let obj = {}
obj.text = item.name;
obj.value = item.id;
this.right_list.push(obj)
})
this.right_list_val = this.right_list[0].value;//当前选中的2级分类id,默认为全部分类,即1级分类的id
}
})
},
//切换二级菜单
change_tab_right(){
this.cate_id = this.right_list_val;// 用2级分类id获取列表数据
this.mescroll.triggerDownScroll();// 主动触发下拉刷新获取数据
},
},
};
</script>