DropdownMenu 下拉菜单 实践

需要实现的功能
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>

在这里插入图片描述
在这里插入图片描述

发布了97 篇原创文章 · 获赞 152 · 访问量 6515

猜你喜欢

转载自blog.csdn.net/qq_40745143/article/details/104960696