vue+Element-ui實作分頁效果
當從背景請求到大量資料的時候,并要在頁面展示出來,請求的資料可能上百條資料或者更多的時候,并不想在一個頁面展示,這就需要使用分頁功能來去完成了。
1.這次使用的是vue2.0+element-ui實作一個分頁功能,element-ui中給我提供了一個Pagination 分頁,使用Pagination可以快速完成分頁功能
效果展示
代碼附錄:template
<div class="deit">
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item><i class="el-icon-date"></i> 資料管理</el-breadcrumb-item>
<el-breadcrumb-item>使用者清單</el-breadcrumb-item>
</el-breadcrumb>
<div class="cantainer">
<el-table style=" 100%;"
:data="userList.slice((currentPage-1)*pagesize,currentPage*pagesize)" //對資料請求的處理,最為重要的一句話
>
<el-table-column type="index" width="50">
</el-table-column>
<el-table-column label="日期" prop="date" width="180">
</el-table-column>
<el-table-column label="使用者姓名" prop="name" width="180">
</el-table-column>
<el-table-column label="郵箱" prop="email" width="180">
</el-table-column>
<el-table-column label="位址" prop="address" width="200">
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 20, 40]" //這是下拉框可以選擇的,每選擇一行,要展示多少内容
:page-size="pagesize" //顯示目前行的條數
layout="total, sizes, prev, pager, next, jumper"
:total="userList.length"> //這是顯示總共有多少資料,
</el-pagination>
</div>
</div>
</div>
代碼附錄:script
需要data定義一些,userList定義一個空數組,請求的資料都是存放這裡面
data () {
const item = {
date: "1998-01-01",
name: "王小虎",
email: "[email protected]",
address:"黑龍江。。。。"
};
return {
currentPage:1, //初始頁
pagesize:5, // 每頁的資料
userList: Array(20).fill(item), //複制20條一樣的item資料
}
},