首先第一步:
使用element UI进行页面框架渲染,如下图:
渲染完之后如下图:
第二步:
在里边添加一级路由:
由于路由里边有多个选项,所以我在此进行了循环显示,这样可以减少一点代码
下面这个是二级菜单的代码:
这里二级菜单里边的数据是写在router-link里边,然后里边同样写的v-for循环,进行循环二级菜单里边的数据并展示到页面
上边这一步是存储tab切换的所有数据
下边这个是tab切换的选中项(二级路由)和定义刷新tab时的值(一级路由)的代码
第三部 :
左侧是筛选部分,用来进行菜品详细分类
下边的代码是筛选部分判断是否点击,如果点击过取消,否则选中
这个是loading事件的效果:
右侧是菜品展示部分,是通过左侧筛选完成之后将匹配的菜品进行展示
这个图片中有解释
下边代码是页数效果
文章到这里就完了,如果还有不足各位大神请私信我这个小白我会进行补充