vue中Element UI表格分页功能的实现

一、需求问题

在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>