Vue+Element-UI 实现前端分页功能，利用el-table和el-pagination组件实现表格前端分页

Vue+Element-UI 实现前端分页功能，利用el-table和el-pagination组件实现表格前端分页：

????????当table的数据量比较大的时候，一个屏幕展示不出全部的数据，这个时候就需要分页显示。而多数情况下都是做的后端分页，就是将分页参数和查询条件一并传到后端，后端将当前页要显示的数据返回来。但是有时候会遇到后端也是去调用了其它系统的接口，这时候返回到前端的是所有的数据，此时需要前端自行去进行分页显示。今天抽空写了个demo，效果如下：

有朋友要用el-table组件做前端分页的时候可以参考以下代码：

<template>

??<div?class="paging">

????<div?class="box_body">

??????<el-table?:data="tableData"?border?size="small"?style="width:?100%">

????????<el-table-column

??????????label="序号"

??????????prop="num"

??????????min-width="150"

????????></el-table-column>

????????<el-table-column

??????????label="姓名"

??????????prop="name"

??????????min-width="150"

????????></el-table-column>

????????<el-table-column

??????????label="性别"

??????????prop="sex"

??????????min-width="150"

????????></el-table-column>

????????<el-table-column

??????????label="年龄"

??????????prop="age"

??????????min-width="150"

????????></el-table-column>

??????</el-table>

??????<!--===分页=====-->

??????<el-pagination

????????:current-page="pageinfo.page"

????????:page-sizes="[10,?20,?30,?40]"

????????:page-size="pageinfo.size"

????????layout="total,?sizes,?prev,?pager,?next,?jumper"

????????:total="pageinfo.total"

????????@size-change="handleSizeChange"

????????@current-change="handleCurrentChange"

????????style="margin-bottom:?3px"

??????></el-pagination>

????</div>

??</div>

</template>

<script>

export?default?{

??name:?"paging",

??data()?{

????return?{

??????//?从后端获取到的所有表格数据

??????sourceTableData:?[],

??????//?页面要显示的表格数据

??????tableData:?[],

??????//?分页信息

??????pageinfo:?{

????????page:?1,

????????size:?10,

????????total:?0,

??????},

????};

??},

??created()?{

????//?页面初始化时生成100条数据，模拟从后端获取所有数据

????let?arr?=?[];

????for?(let?i?=?0;?i?<?100;?i++)?{

??????let?obj?=?{};

??????obj.num?=?i?+?1;

??????obj.name?=?"name"?+?(i?+?1);

??????obj.sex?=?Math.round(Math.random())?==?0???"男"?:?"女";

??????obj.age?=?20?+?Math.round(Math.random()?*?30);

??????arr.push(obj);

????}

????this.sourceTableData?=?arr;

????//?初始化算出第一页数据

????this.tableData?=?this.currentChangePage(

??????this.pageinfo.size,

??????this.pageinfo.page

????);

????this.pageinfo.total?=?this.sourceTableData.length;

??},

??methods:?{

????/**?切换每页显示条数?*/

????handleSizeChange(val)?{

??????this.pageinfo.page?=?1;

??????this.pageinfo.size?=?val;

??????this.tableData?=?this.currentChangePage(val,?this.pageinfo.page);

????},

????/**?切换分页?*/

????handleCurrentChange(val)?{

??????this.pageinfo.page?=?val;

??????this.tableData?=?this.currentChangePage(this.pageinfo.size,?val);

????},

????//?分页方法(用于表格数据后端不分页，放到前端做分页)

????currentChangePage(size,?current)?{

??????const?tablePush?=?[];

??????let?array?=?JSON.parse(JSON.stringify(this.sourceTableData));

??????array.forEach((item,?index)?=>?{

????????if?(size?*?(current?-?1)?<=?index?&&?index?<=?size?*?current?-?1)?{

??????????tablePush.push(item);

????????}

??????});

??????return?tablePush;

????},

??},

};

</script>

<style>

.paging?{

??width:?100%;

??height:?100%;

}

.box_body?{

??width:?1200px;

??margin:?50px?auto;

}

</style>