一、需求问题
在vue的开发中，如果需要开发管理系统，那么Element UI就是一个不错的UI框架。在Element UI中的表格数据，如果数据量大的话，通过后端进行分页。如果数据量不大的话，我们可以直接通过前端进行分页。在Element UI中也提供了分页组件 el-pagination,下面就是通过 el-pagination 实现表格的分页功能。
二、需求分析
在使用Element UI的el-pagination分页组件的时候，需要写明 page-size、current-page.sync和total，page-size是每页的数据条数，current-page 是初始页，total是默认的数据总数，绑定属性，在data中也同样设置好currentPage和 pageSize的值。由于需要对整个表格的数据进行分页，那么在el-table中的data也需要进行计算属性，比如说:data="nowTableData"，那么在computed中，进行相关的计算，对数据请求进行处理。
三、需求实现
代码完整示例如下：
<template> <div> <el-table :data="nowTableData" border style="width: 100%"> <el-table-column prop="date" label="注册日期"> </el-table-column> <el-table-column prop="username" label="用户姓名"> </el-table-column> <el-table-column prop="email" label="用户邮箱"> </el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <!-- scope.$index 为每行的索引 scope.row 为每一行的数据 --> <el-button size="small" @click="handleToFreeze(scope.$index, scope.row)">{{ scope.row.isFreeze ? "已冻结" : "未冻结" }} </el-button> <el-button size="small" @click="handleToDelete(scope.$index, scope.row)" type="danger">删除</el-button> </template> </el-table-column> </el-table> <el-pagination class="page" background layout="prev, pager, next" :page-size="pageSize" :current-page.sync="currentPage" :total="tableData.length"> </el-pagination> </div> </template> <script> export default { name: 'users', data() { return { tableData: [], currentPage: 1, pageSize: 3 } }, mounted() { this.axios.get('/api2/admin/usersList').then((res) => { var status = res.data.status; if ( status === 0 ) { this.tableData = res.data.data.usersList; } }); }, computed: { nowTableData() { return this.tableData.slice( (this.currentPage -1) * this.pageSize, this.currentPage * this.pageSize) || []; } }, methods: { handleToFreeze (index, row) { // index是每行的索引， row是每行的数据 // console.log(index, row); this.axios.get('/api2/admin/updateFreeze', { email: row.email, isFreeze: !row.isFreeze }).then((res) => { var status = res.data.status; if ( status === 0) { this.$alert('冻结操作已成功', '信息', { confirmButtonText: '确定', callback: action => { this.tableData[index].isFreeze = !row.isFreeze; } }); } else { this.$alert('冻结操作失败', '信息', { confirmButtonText: '确定' }); } }); }, handleToDelete (index, row) { this.axios.get('/api2/admin/deleteUser', { email: row.email }).then((res) => { var status = res.data.status; if ( status === 0) { this.$alert('删除操作已成功', '信息', { confirmButtonText: '确定', callback: action => { this.tableData.splice(index, 1); } }); } else { this.$alert('删除操作失败', '信息', { confirmButtonText: '确定' }); } }); } } } </script> <style scoped> .page { margin-top: 20px; } </style>