Vue整合Element-UI的分页组件实现分页

前段时间在做一个系统后台，需要用表格加载显示后台数据项并分页显示。
　　分页可以通过不同的方式实现：
　　1、客户端分页
　　 一次请求把数据全部从后端请求回来，在前端处理，显示所需要的页面的数据项。这样做的好处是无需多次与服务端进行交互，切换页面时不需要刷新所以没有延迟。但仅限于数据量较小的时候使用，如果数据量很大页面渲染将变得很慢。
　　2、服务端分页
　　当数据量比较大时，一次请求传输所有数据考虑到效率问题就不是很合适，原本分页的主要目的就是避免一次性从数据库获取大量数据，其次才是为了展示效果。这时候前端根据需要将查询条件（当前页数和每页条数）传给后端，后端根据条件查询出数据返回给前端。这样做的好处减轻了每次交互的负担，但缺点是每次切换页时都需要访问数据库，会有轻微的延迟。
　　因为我这个系统数据量不大，所以我选择在客户端进行分页。我这里为了方便用了Element-UI的分页器组件。
　　它有很多属性可以选择，我这里有很多不需要就没用到，所以先上一个官方文档可以根据需要选择：http://element-cn.eleme.io/#/zh-CN/component/pagination

不多说废话直接贴代码：

<div class="table-div">
    <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border style="width: 96%;margin-left: 2%" height="90%">
      <el-table-column prop="number" label="学号"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column label="操作" align="center" header-align="left">
        <template slot-scope="scope">
          <button class="button-edit" @click="handleEdit(scope.index,scope.row)">
          	<i class="el-icon-edit"></i>
          </button>
          <button class="button-reset" @click="resetPassword(scope.index,scope.row)">
          	<i class="el-icon-refresh"></i>
          </button>
          <button class="button-delete" @click="handleDelete(scope.index,scope.row)">
          	<i class="el-icon-delete"></i>
          </button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination layout="prev, pager, next, sizes, total, jumper"
                   :page-sizes="[5, 10,100]" 
                   :page-size="pageSize"
                   :total="tableData.length" 
                   @current-change="handleCurrentChange" 
                   @size-change="handleSizeChange" 
                   style="text-align: center;margin-top: 1%;">
    </el-pagination>
</div>

<script>
    export default {
      name: "studentAdmin",
      data(){
          return{
          	tableData: [{
              id:'',
              number:'',
              name:'',
              email:''
            }],
            pageSize: 10,
            currentPage: 1
          }
      },
      methods:{
        handleCurrentChange:function(cpage){
          this.$data.currentPage = cpage;
        },
        handleSizeChange:function(psize){
          this.$data.pageSize = psize;
        }
      }
    }
</script>

       JQuery也有类似的分页插pagination可供选择。有能力的话最好还是使用原生的JS或者JQuery来开发分页功能，毕竟使用插件不一定所有功能都能符合要求，仅仅是寻求一个方便。