美食杰--------菜谱大全

话不多说，直接看效果图：

 HTML:

<template>
    <div class="recipe">
        <!-- v-model="activeName" -->
        <!-- 菜谱分类 start -->
        <el-tabs type="border-card" v-model='classifyName'>
            <el-tab-pane
                v-for='item in classify'
                :key='item.parent_type'
                :label="item.parent_name"
                :name='item.parent_type'
            >
                <div class="recipe-link">
                    <router-link
                            :to="{query:{...$route.query,classify:option.type}}"
                            v-for='option in item.list'
                            :key='option.type'
                            :class='{active:classifyType === option.type}'
                        >
                        {{option.name}}
                    </router-link>
                </div>
            </el-tab-pane>
        </el-tabs>
        <!-- 菜谱分类 end -->
        <h2>家常好味道，给你家一般的温暖</h2>
        <el-container>
            <el-aside width="220px" class="recipe-aside">
                <div class="filter-box">
                    <h4>筛选</h4>
                    <!-- v-model="activeName" -->
                    <!-- 筛选 start -->
                    <el-collapse v-model='propertyActiveName'>
                        <el-collapse-item
                                v-for='item in properties'
                                :title="item.parent_name"
                                :key='item.parent_type'
                                :name='item.parent_type'
                        >
                            <div class="filter-tags"
                            >
                                <el-tag type="info"
                                    v-for='option in item.list'
                                    :key='option.type'
                                    @click='selectTag(option)'
                                    :class='{"tag-selected":propertyType[option.title] == option.type}'
                                >{{option.name}}</el-tag>
                            </div>
                        </el-collapse-item>
                    </el-collapse>
                    <!-- 筛选 end -->
                </div>
            </el-aside>
            <el-main class="filter-menus-box">
<!--                <div class="menu-empty">暂时没有过滤出菜谱信息，请选择其他的筛选条件</div>-->
                <menu-card style="min-height: 75%;" :info="list"></menu-card>
                <div style="text-align: right;">
                    <el-pagination
                            style="display: inline-block;"
                            page-size="10"
                            layout="total, prev, pager, next"
                            :total="50">
                    </el-pagination>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

CSS样式；

<style lang="stylus">
    .recipe-link
        font-size 0;
        margin-top 5px
 
        a
            display inline-block
            font-size 12px
            padding 0px 8px
            height 28px
            line-height 28px
 
        .active
            background #ff3232
            color #fff
 
    .recipe
        h2
            text-align center
            line-height 150px
 
        .el-main
            padding 0
 
        .filter-box
            background #fff
            padding 10px
            width 100%
            float left
            box-sizing border-box
 
    .filter-tags
        display flex
        flex-wrap wrap
        justify-content space-around
 
        .tag-selected
            background-color #ff3232
            color #fff
 
    .menu-empty
        width 100%
        text-align center
        font-size 20px
</style>

JS效果:

import MenuCard from '@/components/menu-card.vue'
    import {getClassify, getProperty, getMenus} from '@/service/api';
 
    export default {
        components: {MenuCard},
        data() {
            return {
                classify:[],// 存储tab切换的所有数据
                classifyType:'1-1', //tab切换的选中项(二级路由)
                classifyName:'1',//定义刷新tab时的值(一级路由)
                properties:[], //属性   存储属性中的所有数据
                propertyType:{}, //存储属性的分类  ,  列如: {carft: 1-4,flavor=2-1}
                propertyActiveName:[],   //
                list:[]
            }
        },
        watch: {
            $route: {
                handler(){
                    const {classify} = this.$route.query;
                    if(classify){
                        this.classifyType = classify;
                        this.classifyName = classify[0];
                    }
                    this.ThisgeMenus();
                },
                immediate:true
            }
        },
        mounted() {
            getClassify().then((data)=>{
                console.log(data.data);
                this.classify = data.data;
                console.log(this.$route.query);
                if(!this.$route.query.classify){
                    this.classifyType = this.classify[0].list[0].type;
                    this.classifyName = this.classify[0].parent_type;
                    this.$router.push({
                        query:{
                            classify:this.classifyType,
                            page:1
                        }
                    })
                }
            })
            getProperty().then((data)=>{
                console.log(data.data);
                this.properties = data.data;
                const {query} = this.$route;
                this.propertyType = this.properties.reduce((o,item)=>{
                    //item.title : 工艺  难度  口味 人数
                    console.log(query);
                    console.log(o);
                    o[item.title] = query[item.title] ? query[item.title] : "";
                    if(o[item.title]){
                        this.propertyActiveName.push(o[item.title][0])
                    }
                    return o;
                },{})
            })
        },
        methods: {
            selectTag(option){
                console.log(option);
                console.log(option.title);
                let query = {...this.$route.query};
                //判断是否点击,如果点击过取消,否则选中
                if(this.propertyType[option.title] == option.type){
                    this.propertyType[option.title] = '';
                    delete query[option.title];
                }else{
                    this.propertyType[option.title] = option.type;
                    query[option.title] = option.type;
                }
                this.$router.push({
                    query
                })
            },
            ThisgeMenus(){
                const query = {...this.$route.query};
                const params = {
                    page:query.page || 1,
                    classify:query.classify,
                }
                getMenus(params).then((data)=>{
                    console.log(data.data.list);
                    this.list = data.data.list;
                })
            }
        }
    }

MenuCard组件:

<template>
  <el-row class="menu-card" type="flex" justify="start">
    <el-col
      style="flex:none;"
      :style="{'margin-left':marginLeft+'px'}"
      v-for='items in info' :key='items._id'
    >
      <el-card :body-style="{ padding: '0px' }">
        <!--  -->
        <router-link :to="{name:'detail',query:{menuId:items._id}}">
          <img :src="items.product_pic_url" class="image" style="width: 232px;height: 232px;">
          <div style="padding: 14px;" class="menu-card-detail">
            <strong>{{items.title}}</strong>
            <span>{{items.comments_len}} 评论</span>
            <!--  -->
            <router-link :to="{name:'space',query:{userId:items.userId}}" tag="em">
            {{items.name}}
            </router-link>
          </div>
        </router-link>
      </el-card>
    </el-col>
  </el-row>
</template>
<script>
export default {
  name: 'menu-card',
  data(){
    return{
    }
  },
  props:{
    marginLeft: {
      type: Number,
      default: 22
    },
    info:{
      type: Array,
      default:() => []
    }
  },
}
</script>
 
<style lang="stylus">
.menu-card
  flex-wrap wrap
  .el-col-24
    width auto
    margin-bottom 20px
    margin-left: 22px
 
  .menu-card-detail
    > *
      display block
    strong
      height 24px
      line-height 24px
      font-size 14px
      font-weight bold
      color #333
    span
      height 26px
      line-height 26px
      font-size 12px
      color #999
    em
      height 23px
      line-height 23px
      font-size 12px
      color #ff3232
</style>