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

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

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

<div class="trend-Area">
<!--展示部分-->
<el-table
	:data="tableData"    //就是后台返回的数据啦
	stripe
	style="width: 100%">
	<el-table-column
		prop="name"	        //根据自己项目的名字来决定prop绑定啥来展示数据
		label="Hot Topics"  //叫啥根据项目(下同理)
		width="400">
	</el-table-column>
	<el-table-column
		prop="count"
		label="Frequency">
	</el-table-column>
</el-table>
<!--控制分页部分-->
<div class="pagaination-tool" style="padding:20px 110px 70px">
    <div class="count-show">
        <span>
            total: {{total}} items //根据后台返回的字段来展示总条数，后面做分页要用到
        </span>
    </div>
<!--elementUI的分页控件-->
    <el-pagination         //el-pagination的一些属性，官方文档里都有,不懂的可以去看看参考一下
	    :current-page.sync="currPage"
	    @size-change="handleSizeChange"
	    @current-change="handleCurrentChange"
	    :page-size="pageSize"
	    layout="prev, pager, next, jumper"
	    :total="total">       //这里别忘了绑一下:total
    </el-pagination>
    <div class="custom-pagination">
        Results Per Page     //这里做了一个下拉选项框，用户可以选择每页展示多少条数据~
        <el-select v-model="pageSize" size="small" placeholder="" @change="handleSizeChange">
            <el-option
            v-for="(item,index) in perpage"
            :key="index"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
    </div>
</div>

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)

<div class="trend-Area">
    <el-table
	    :data="tableData.slice((currPage-1)*pageSize,currPage*pageSize)"//前端分页的重点在这
	    stripe
	    style="width: 100%">
        <el-table-column
	        prop="taxonomy"
	        label="Taxonomy" >
        </el-table-column>
    </el-table>
    <div style="width:100%;display:flex;justify-content:space-between;">
         <div class="count-show">
             <span>
                 total: {{total}} items
             </span>
         </div>
         <el-pagination
	         :current-page="currPage"
	         @size-change="handleSizeChange"
	         @current-change="handleCurrentChange"
	         :page-size="pageSize"
	         :page-sizes="[50, 100]"
	         layout="prev, pager, next, jumper"
	         :total="total">
         </el-pagination>
         <div class="custom-pagination">
             Results Per Page
             <el-select v-model="pageSize" size="small" placeholder="" @change="handleSizeChange">
                 <el-option
	                 v-for="(item,index) in perpage"
	                 :key="index"
	                 :label="item.label"
	                 :value="item.value">
                 </el-option>
             </el-select>
         </div>
    </div>    
</div>

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;
            },
        }
    }

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

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