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>