Vue + ElementUI + SpringMVC实现分页
这一段时间写项目用到了Vue+ElementUI,这里记录一下使用ElementUI内置分页插件结合后端SSM框架的实现思路和实现过程。
其中遇到了很多坑,我会尽量把见到的坑都记录下来,希望对你有所帮助。
首先 让我们看一下最终效果:
![](https://tycoding.cn/2018/07/30/vue-6/1.png)
起步
本博文的主要讲一下Vue+ElementUI结合后端SpringMVC实现分页的实现思路,基本的elementUI用法请自行百度;
介绍
本案例中设计到的技术栈:
准备
1、SSM框架的整合教程可以参考我的这篇博文:
2、在后端项目中导入PageHelper.jar
的依赖
1
2
3
4
5
|
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>4.0.0</version>
</dependency>
|
*注意**
使用PageHelper分页插件除了要导入依赖,还需要在Mybatis配置文件中进行相关配置,并交给Spring进行管理。如下配置即可:
1
2
3
4
5
6
7
|
<plugins>
<!-- com.github.pagehelper 为 PageHelper 类所在包名 -->
<plugin interceptor="com.github.pagehelper.PageHelper">
<!-- 设置数据库类型 Oracle,Mysql,MariaDB,SQLite,Hsqldb,PostgreSQL 六种数据库-->
<property name="dialect" value="mysql"/>
</plugin>
</plugins>
|
这里还要注意的是PageHelper5.X版本和PageHelper4.X版本PageHelper类所在的包名是不同的。
在Spring配置文件中扫描此配置文件即可:
![](https://tycoding.cn/2018/07/30/vue-6/3.png)
3、在HTML中导入vue.js
and element-ui
。
好的,至此,我们把基本的环境已经讲过了,下面看下相关前端代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
<!-- 列表 -->
<el-table
ref="user"
:data="user"
tooltip-effect="dark"
style="width: 100%">
<el-table-column
prop="id"
sortable
label="编号"
width="80">
</el-table-column>
<el-table-column
prop="username"
sortable
label="联系人"
width="120">
</el-table-column>
<el-table-column
prop="phone"
sortable
label="联系电话"
width="120">
</el-table-column>
<el-table-column
prop="mailbox"
label="电子邮箱"
width="150">
</el-table-column>
<el-table-column
prop="postalCode"
sortable
label="邮政编码"
width="120">
</el-table-column>
<el-table-column
prop="date"
sortable
label="注册时间"
width="200">
</el-table-column>
<el-table-column
prop="address"
label="通讯地址"
width="200"
show-overflow-tooltip>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="pagination">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageConf.pageCode"
:page-sizes="pageConf.pageOption"
:page-size="pageConf.pageSize"
layout="total, sizes, prev, pager, n
|