这里的分页抽出来做成了一个模板，供其他页面使用， loadData(this.currentPage, this.pagesize);这个方法是其他页面的方法，注意的是这里的页面不能被其他页面的vue实例管理，否则会出现一些js失效，列如：b页面需要引入a（分页）页面，b页面的vue实例是bApp,a(分页)页面是aApp，需要这样用
b.jsp页面：
正确用法：
</body>
<div id="bApp">
</div>
<div class="block">
<jsp:include page="a.jsp"></jsp:include>
</div>
</body>
错误用法：
</body>
<div id="bApp">
<div class="block">
<jsp:include page="a.jsp"></jsp:include>
</div>
</div>
</body>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>分页</title>
<script type="text/javascript" src="JS/jquery-1.10.2.min.js"></script>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<script src="JS/axios.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="//unpkg.com/[email protected]/lib/theme-chalk/index.css">
</head>
<body>
<div id="paginationApp">
<el-pagination @size-change="handleSizeChange"
@current-change="handleCurrentChange" :current-page="currentPage"
:page-sizes="[5, 10, 15, 20]" :page-size="pagesize"
:total="totalCount" style="float:center"
layout="total, sizes, prev, pager, next, jumper"> </el-pagination>
</div>
</body>
<script type="text/javascript">
var paginationVue=new Vue({
el:"#paginationApp",
data:{//默认每页数据量
pagesize: 5,
//默认当前页
currentPage: 1,
//默认数据总数
totalCount: 1000,
},
watch : {
currentPage:function(val){
loadData(val, this.pagesize);
},
pagesize:function(val){
loadData(this.currentPage,val);
}
},
methods:{
handleSizeChange:function(val) {
this.pagesize = val;
//loadData(this.currentPage, this.pagesize);这里废除，改用监听器动态获取数据
},
handleCurrentChange:function(val) {
this.currentPage = val;
// loadData(this.currentPage, this.pagesize);
},
}
})
</script>
</html>