【vue+elementUI】分页（后端分页+前端分页）

项目结束，想着总结点东西，就又找了这个来总结一下，下次碰到，方便自己查找。

先说，后端分页吧：
后端分页，顾名思义，后端做好分页，你把要请求的页数和条数发送给他，他返回给前端，再渲染到页面上~结合elementUI的话，后端还需要把数据的总条数，即total作为一个字段返回，前端才能做分页嗷！
下面上大概的代码，方便自己和大家参考一下。
html:

	
	
	
	



    

        
            total: {{total}} items //根据后台返回的字段来展示总条数，后面做分页要用到
        
    

           //这里别忘了绑一下:total
    
    

        Results Per Page     //这里做了一个下拉选项框，用户可以选择每页展示多少条数据~
        
            
            
        
    

JS:

export default {
        data() {
            return{
             	total:0,
                currPage: 1,  //默认第一页
                pageSize: 10, //默认展示10条数据
                perpage: [
                    {value: 10, label: "10"},
                    {value: 20, label: "20"},
                ]
            }
        },
        methods: {
        	getData(){
        		//请求接口后取数据给tableData赋值
        		//请求的接口的参数给个参考：
        		/**
        		data:{
                    offset:(this.currPage-1)*this.pageSize, //每次传过去的页数，我这边后端是从0开始分页的
                    limit:this.pageSize, //每页需要展示的条数
                    keywords:this.input  //双向绑定的关键字
                 },
                  返回res.data=this.tableData
                **/
			},
			handleSizeChange(val) {
                //改变每页显示数量重新请求数据，重置当前页为第一页
                this.pageSize = val;
                this.currPage = 1;
                this.getData()
            },
            handleCurrentChange(val) {
                //点击改变当前页
                this.currPage = val;
                this.getData()
            },
        }
    }

然后是前端分页:
前端分页，就是说一次性把后端的数据全都获取到，然后做一个假分页，简单来说就是控制每一页展示多少数据。下面上代码

html:(重点在给tableData.slice)

    
        
        
    
    

         

             
                 total: {{total}} items
             
         
         
         
         

             Results Per Page
             
                 
                 
             
         
    
    

js:

export default {
        data() {
            return{
             	total:0,
                currPage: 1,  //默认第一页
                pageSize: 50, //默认展示50条数据
                perpage: [
                    {value: 50, label: "50"},
                    {value: 100, label: "100"},
                ],
            }
        },
        methods: {
        	getData(){
        		//请求接口后取数据给tableData赋值
        		//请求的接口的参数给个参考：
        		/**
        		data:{
        			 keywords:this.input  //双向绑定的关键字
                 },
                 返回res.data=this.tableData
                **/
			},
			handleSizeChange(val) {
                //重置当前页为第一页
                this.pageSize = val;
                this.currPage = 1;
            },
            handleCurrentChange(val) {
                //点击改变当前页
                this.currPage = val;
            },
        }
    }

分完页大概就长这样：（为了不必要的麻烦数据就先抹去了）
前后端分页长得一样~

希望能够帮助到大家！有用的话点个赞吧~