美食节—实现loading加载级数据显示

1.需要实现的效果：

点击左侧‘炒’，‘蒸’，‘炖’等右侧显示对应的菜系

效果展示：

实现思路：
第一步：先实现我们右侧的主体栏的数据。

首先要将后端数据获取到，也就是这个 import {getMenus} from ‘@/service/api’;

第二步：获取到数据后进行解构，看数据请求的数据中有没有参数有参数也要拿过来
写一个空数组list:[],通过this.list =data.list;把数据存进去

getMenus(params).then(({
   data})=>{
   
          // console.log(data);打印查看一下有没有获取到数据
          this.list =data.list;
      })
},

第三步进行页面渲染还要在data中保存一个总页数total：0，单页数page：1，

 <!-- 右侧显示 -->
            <el-main class="filter-menus-box" >
               <div class="menu-empty" 
                  v-show="!list.length && !loading"
               >暂时没有过滤出菜谱信息，请选择其他的筛选条件</div>
                <menu-card style="min-height: 75%;" :info="list"></menu-card>
                <div style=