美食杰-菜谱大全

首先第一步：

使用element UI进行页面框架渲染，如下图：

 渲染完之后如下图：

 

第二步：

在里边添加一级路由：

 由于路由里边有多个选项，所以我在此进行了循环显示，这样可以减少一点代码

下面这个是二级菜单的代码：

 这里二级菜单里边的数据是写在router-link里边，然后里边同样写的v-for循环，进行循环二级菜单里边的数据并展示到页面

 上边这一步是存储tab切换的所有数据

下边这个是tab切换的选中项(二级路由)和定义刷新tab时的值(一级路由)的代码

第三部 ：

 

左侧是筛选部分，用来进行菜品详细分类

下边的代码是筛选部分判断是否点击,如果点击过取消,否则选中

 这个是loading事件的效果：

 

右侧是菜品展示部分，是通过左侧筛选完成之后将匹配的菜品进行展示

 这个图片中有解释

下边代码是页数效果

 

 

 文章到这里就完了，如果还有不足各位大神请私信我这个小白我会进行补充