美食杰项目（七）菜谱大全

前言：

• 本文给大家讲的是美食杰项目中菜谱大全项目的具体样式，代码思路和具体代码，希望能帮助到你

---

1.具体样式

2.实现的具体功能和代码思路

1.头部：根据tab切换筛选点击哪个选中哪个，并将其筛选结果传进路由，根据传进路由的数据进行筛选渲染
tab切换的具体样式是根据element ui里面的具体代码实现
2.左侧：左侧也是筛选条件，点击哪个选中那个并将数据传进路由，根据传进路由的数据进行筛选渲染，具体
样式也是element ui里面的代码实现的
3.右侧：右侧是跟剧筛选数据传给接口接口返回给我的数据，具体样式是根据封装的组件来实现的
并且伴有加载样式也是element ui里面的具体代码
4.右下角：具体样式是根据element ui里面的相关代码实现的，具体功能的实现element ui官网讲解的也很详细

3.element ui具体样式的网址

• 头部：tab切换 https://element.eleme.cn/#/zh-CN/component/tabs
• 左侧：Collapse折叠 https://element.eleme.cn/#/zh-CN/component/collapse
• 加载：loading https://element.eleme.cn/#/zh-CN/component/loading
• 右下角 ：分页 https://element.eleme.cn/#/zh-CN/component/pagination

4.相关代码

<template>
  <div class="box">
    <!-- top -->
    <el-tabs
      v-model="classifyName"
      type="card"
      @tab-click="handleClick"
      class="el-tabs"
    >
      <el-tab-pane
        v-for="item in list"
        :key="item.parent_type"
        :label="item.parent_name"
        :name="item.parent_type"
        class="el-tab-pane"
      >
        <div>
          <router-link
            v-for="option in item.list"