本篇着重介绍java开发环境下，如何写一个vue分页组件，使用到的技术点有java、springBoot、Thymeleaf等；
分页效果图
名称为vuepagerbasic的分页组件，只包含上一页、下一页，本篇着重介绍vuepager分页组件 前台html，使用到Thymeleaf模板在layout.html文件里定义与注册分页组件
<div th:fragment="vuepagerbasic">
<template>
<div>
<a href="javascript:;" v-on:click="go(1)" v-if="pages.pageIndex>1"><<</a>
<a href="javascript:;" v-on:click="go(pages.pageIndex-1)" v-if="pages.pageIndex>1"><</a>
<span v-if="pages.previousSpot" v-on:click="go(pages.firstNum-1)">...</span>
<a href="javascript:;" v-for="item in pages.pageList" v-bind:class="{cur:pages.pageIndex==item}"
v-on:click="go(item)">{{item}}</a>
<span v-if="pages.nextSpot" v-on:click="go(pages.lastNum+1)">...</span>
<a href="javascript:;" v-if="pages.pageIndex < pages.totalPages" v-on:click="go(pages.pageIndex+1)">></a>
<a href="javascript:;" v-if="pages.pageIndex < pages.totalPages"
v-on:click="go(pages.totalPages)">>></a>
</div>
</template>
<script type="text/javascript">
Vue.component('vuepagerbasic', {
template: '#vuePagerBasic',
props: ['url', 'prop'],
data: function () {
return {
pages: [],
}
},
mounted: function () {
this.go(1);
},
methods: {
go: function (n) {
this.getData(n);
},
getData: function (n) {
this.prop = this.prop || {};
this.prop.pageIndex = n;
var me = this;
axios.post(this.url, this.prop).then(function (res) {
me.pages = res.data.pages;
console.log("me.pages:" + me.pages);
me.$emit("getdata", res.data.rows);
});
}
}
});
</script>
</div>
<div th:fragment="vuepager">
<template>
<div>
<a href="javascript:;" v-on:click="go(1)" v-if="pages.pageIndex>1">首页</a>
<a href="javascript:;" v-on:click="go(pages.pageIndex-1)" v-if="pages.pageIndex>1">上一页</a>
<span v-if="pages.previousSpot" v-on:click="go(pages.firstNum-1)">...</span>
<span href="javascript:;" v-for="item in pages.pageList" v-bind:class="{current:pages.pageIndex==item}"
v-on:click="go(item)">{{item}}</span>
<span v-if="pages.nextSpot" v-on:click="go(pages.lastNum+1)">...</span>
<a href="javascript:;" v-if="pages.pageIndex < pages.totalPages" v-on:click="go(pages.pageIndex+1)">下一页</a>
<a href="javascript:;" v-if="pages.pageIndex < pages.totalPages" v-on:click="go(pages.totalPages)">尾页</a>
</div>
</template>
<script>
Vue.component('vuepager', {
template: '#vuePager',
props: ['url', 'prop'],
data: function () {
return {
pages: [],
}
},
mounted: function () {
this.go(1);
},
methods: {
go: function (n) {
this.getData(n);
},
getData: function (n) {
this.prop = this.prop || {};
this.prop.pageIndex = n;
var me = this;
axios.post(this.url, this.prop).then(function (res) {
me.pages = res.data.pages;
me.$emit("getdata", res.data.rows);
});
}
}
});
</script>
</div>