Vue+Element-UI 實(shí)現(xiàn)前端分頁功能，利用el-table和el-pagination組件實(shí)現(xiàn)表格前端分頁：
????????當(dāng)table的數(shù)據(jù)量比較大的時候，一個屏幕展示不出全部的數(shù)據(jù)，這個時候就需要分頁顯示。而多數(shù)情況下都是做的后端分頁，就是將分頁參數(shù)和查詢條件一并傳到后端，后端將當(dāng)前頁要顯示的數(shù)據(jù)返回來。但是有時候會遇到后端也是去調(diào)用了其它系統(tǒng)的接口，這時候返回到前端的是所有的數(shù)據(jù)，此時需要前端自行去進(jìn)行分頁顯示。今天抽空寫了個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?{
??????//?從后端獲取到的所有表格數(shù)據(jù)
??????sourceTableData:?[],
??????//?頁面要顯示的表格數(shù)據(jù)
??????tableData:?[],
??????//?分頁信息
??????pageinfo:?{
????????page:?1,
????????size:?10,
????????total:?0,
??????},
????};
??},
??created()?{
????//?頁面初始化時生成100條數(shù)據(jù)，模擬從后端獲取所有數(shù)據(jù)
????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;
????//?初始化算出第一頁數(shù)據(jù)
????this.tableData?=?this.currentChangePage(
??????this.pageinfo.size,
??????this.pageinfo.page
????);
????this.pageinfo.total?=?this.sourceTableData.length;
??},
??methods:?{
????/**?切換每頁顯示條數(shù)?*/
????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);
????},
????//?分頁方法(用于表格數(shù)據(jù)后端不分頁，放到前端做分頁)
????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%;
}文章來源：http://www.zghlxwxcb.cn/news/detail-808180.html
.box_body?{
??width:?1200px;
??margin:?50px?auto;
}
</style>文章來源地址http://www.zghlxwxcb.cn/news/detail-808180.html
到了這里，關(guān)于Vue+Element-UI 實(shí)現(xiàn)前端分頁功能，利用el-table和el-pagination組件實(shí)現(xiàn)表格前端分頁的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
