美食杰-菜谱大全（右侧主体）

一、介绍

上一篇我一节介绍过菜谱大全里面的tab切换和下拉列表了，这一次我就向大家介绍菜谱大全里的右侧主体，右侧主体包含显示数据和分页器

 二、过程

首先需要获取到显示的数据，在data里面创建需要用到的属性，需要在监听路由里面调用方法ThisgetMenus，在ThisgetMenus通过getMenus调用api向后端请求数据。在获取数据是需要按照要求传递参数，首先获取的路由下的query赋值给创建的变量query，然后创建一个params对象，里面的page属性值是变量query下的page，如果没有的话是1，page代表的是获取那一页的数据，里面的classify属性的属性值是变量query下的classify。然后把变量query下的page和classify删除，然后判断变量query里面是否有值，如果有的话把变量query添加到params下的对象property里面，接着把params当参数通过getMenus调用api向后端请求当前页数的数据。在数据加载前会显示遮罩层，加载完毕遮罩层消失，所以需要在数据获取到之前设置遮罩层，这里的遮罩层是通过element添加的。

data：

list:[],//存储右侧主体
total:0,//总页数
loading:false,//是否显示遮罩层
page:1

 ThisgetMenus：

ThisgetMenus(){
                let query={...this.$route.query}
                const params={
                    page:query.page||'1',
                    classify:query.classify
                }
                console.log(query);
                delete query.page
                delete query.classify
                console.log(query,params);
                if(Object.keys(query).length){
                    params.property={
                        ...query
                    }
                }
                console.log(params);
                this.loading=true
                let loading=null
                this.$nextTick(()=>{
                    loading=this.$loading({
                        target:'.filter-menus-box',
                        text:'Loading...',
                        spinner:'el-icon-loading',
                        background:'rgba(0,0,0,0.7)'
                    })
                })
                this.list=[]
                // 请求右侧数据
                getMenus(params).then(({data})=>{
                    if(this.loading){
                        loading.close()
                    }
                    this.loading=false
                    this.total=data.total
                    this.list=data.list
                    this.page=data.current_page
                })
            },

渲染时通过info把数据传递到子组件MenuCard里面进行渲染。

<menu-card style="min-height: 75%;" :info="list"></menu-card>

 menu-card组件：

美食杰项目-首页_as_long_的博客-CSDN博客

接下来是分页器，分页器是通过element组件进行渲染的通过total绑定总数据，接下来通过current-page.sync绑定page获取当前点击的页数，然后添加一个改变数据gandlerSelent，来改变url里面的page。

渲染：

<el-pagination
            style="display: inline-block;"   
            layout="total, prev, pager, next"
            :page-size='5'
            :total="total"
            :current-page.sync='page'
            @current-change='gandlerSelent'
>
</el-pagination>

 gandlerSelent：

gandlerSelent(){
                this.$router.push({
                    query:{
                        ...this.$route.query,
                        page:this.page
                    }
                })
            }

总结：

到这里右侧主体就介绍完毕了，祝大家生活愉快