前言
无论是前端还是后端，涉及到的数据往往是上千条甚至上万条。在一个web页面完善显示出所有的数据是根本不够的，所有分页功能是管理系统中比不可少的一个模块。接下来我就详细介绍如何实现分页。
技术
前端：vue.js、ElementUI、axios
后端：Node.js（Express.js）、Mysql
WEB界面
HTML代码
<el-row class="list-card"> <el-col :span="24"> <el-card> <el-button type="primary" size="mini" round style="margin-bottom: 6px;" @click="Registration()"> 会员登记 </el-button> <el-table :data="pageList" style="width: 100%" border stripe max-height="400"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column fixed prop="memberName" label="姓名" width="120"> </el-table-column> <el-table-column prop="memberNum" label="会员号" width="140"> </el-table-column> <el-table-column prop="memberSex" label="性别" width="100"> </el-table-column> <el-table-column prop="memberAge" label="年龄" width="100"> </el-table-column> <el-table-column prop="date" label="注册日期" width="180"> </el-table-column> <el-table-column prop="phone" label="电话号码" width="120"> </el-table-column> <el-table-column prop="status" label="审核状态" width="120"> </el-table-column> <el-table-column prop="memberAddr" label="住址" width="200"> </el-table-column> <el-table-column fixed="right" label="操作" width="320"> <template slot-scope="scope"> <el-button type="warning" size="medium" @click="delMember(scope.row)"> 移除 </el-button> <el-button type="primary" size="medium"> 审核 </el-button> <el-button type="info" size="medium"> 查看 </el-button> </template> </el-table-column> </el-table> <!--分页--> <diV style="float: right;margin: 10px;"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="DefaultcurrentPage" :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="this.tableData.length"> </el-pagination> </diV> </el-card> </el-col> </el-row>
JS代码段
data() { return { DefaultcurrentPage: 1,//当前页 pageSize: 10,//默认页面数据条数 pageList: [],//分页数组 tableData: [],//存放后端数据数组 } }, mounted() { this.getList() }, methods{ getList() { this.axios.post('接口', {}).then(res => { this.tableData = res.data this.currentChangePage(this.tableData, 1); }) }, //分页 handleSizeChange: function (pageSize) { // 每页条数切换 this.pageSize = pageSize this.handleCurrentChange(this.DefaultcurrentPage); }, handleCurrentChange: function (currentPage) {//页码切换 this.DefaultcurrentPage= currentPage this.currentChangePage(this.tableData, currentPage) }, currentChangePage(list, currentPage) { let from = (currentPage - 1) * this.pageSize; let to = currentPage * this.pageSize; this.pageList = []; for (; from < to; from++) { if (list[from]) { this.pageList.push(list[from]); } } } }
注意
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| page-size | 每页显示条目个数，支持 .sync 修饰符 | number | — | 10 |
| page-sizes | 每页显示个数选择器的选项设置 | number[] | — | [10, 20, 30, 40, 50, 100] |
当你修改page-size默认值时，同时需要修改page-sizes默认值数组里面的第一个数值，这样才能使界面与数据渲染同步。否侧会出现数据渲染问题，并且分页也会产生BUG,如下：
