Vue2.0+ElementUI+PageHelper实现的表格分页

Vue2.0+ElementUI+PageHelper实现的表格分页

前言

最近做了一些前端的项目，要对表格进行一些分页显示。表格分页的方法有很多，从宏观上来说分为物理分页和逻辑分页，由于逻辑分页（即前端分页）的做法是将数据全部缓存，然后分页显示，这样在数据量较大的时候会对浏览器的速度产生影响，所以考虑之后我使用了后端分页，后端分页的特点是对当前页的数据进行请求，每次当页码变化或者每页数据量变化的时候，就重新发一次请求。这里所用到的技术主要有以下几种：

• Spring
• SpringMVC
• Mybatis
• VueJS 2.0
• ElementUI

---

后端数据库用的是Mysql，其实使用其他的数据库也可以，因为PageHelper插件里有对于各个数据库的兼容。PageHelper的本质是插入一个Interceptor，在mybatis的sql语句执行之前进行分页处理，本质上是加了两个limit的参数。对于PageHelper的配置和用法，请参考joker_zhou写的Spring + Mybatis 使用 PageHelper 插件分页这篇文章，这里不再赘述。

前端所使用的是最近很火的vuejs框架2.0，这是一个mvvm架构的框架，类似于AngularJS，但是更加轻量。UI框架使用的是由饿了么团队推出的elementUI框架，这是一款基于vuejs的框架，正好和我们的前端框架完美结合，并且封装了很多组件，开发起来很方便。
下面就是这个Demo的截图，实现了基本的增删改查功能，表格排序是elementUI的表格控件里自带的一个属性，可以很方便的设置。

正文

下面是程序的截图，右键在新标签页中打开图片可以看得清楚些。

下面来看一下前端的代码，首先是引入的文件：

    <link rel="stylesheet" href="/core/element-ui/lib/theme-default/index.css">
    <script src="./js/jquery-3.1.1.min.js"></script>
    <script src="./js/json2.js"></script>
    <script src="./js/vue.min.js"></script>  
    <script src="./js/vue-resource.js"></script>
    <script src="./element-ui/lib/index.js"></script>

其中第一行和最后一行是ElementUI的导入包，可以从ElementUI官网下载到源文件引入，也可以直接使用CDN的方式来引入：

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

倒数第二行vue-resource是vuejs的一个ajax插件，可以通过XMLHttpRequest或JSONP发起请求并处理响应。简单的说，就是可以用来发送ajax请求。

接下来是style样式

    <style>
      .el-select .el-input {
        width: 110px;
      }

      .el-table .info-row {
            background: #c9e5f5;
      }   

      #top {
          background:#20A0FF;
          padding:5px;
          overflow:hidden
      }
    </style>

HTML body

    <div id="test">             

        <div id="top">          
            <span style="float:right;"> 
                <el-button type="text" @click="add" style=