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=