vue+iview 分页组件
首先看看iview 分页组件的使用方法
1、:total是Page属性,为总条数
2、:current是Page属性,为当前页数
3、:page-size是Page属性,为当前显示数据条数
4、show-elevat对应html 图中跳至1页
5、show-sizer对应html图中10条/页
6、show-total对用html图中共58条
前台页面
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="assets/jquery-3.4.1.min.js"></script>
<!-- import Vue.js -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- import stylesheet -->
<link rel="stylesheet" href="//unpkg.com/view-design/dist/styles/iview.css">
<!-- import iView -->
<script src="//unpkg.com/view-design/dist/iview.min.js"></script>
</head>
<body>
<div id='app'>
<input type="text" class="ivu-input" id="search" style="width: 400px">
<i-button type="primary" id="search" @click="openRecords">搜索一下</i-button>
<div v-for="zbs in listObj">
--id--{{zbs.id}} --关键字--{{zbs.keywords}}
</div>
<div id="pagetotal" style="display:none">
<Page :total="dataCount"
:current.sync="current"
:page-size="pageSize"
show-total class="paging"
@on-change="changePage"></Page>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
current: 1,
isShow: false,
dataCount: 0,//总条数
listObj: [],
pageSize: 10,//每页显示数据条数
},
methods: {
openRecords: function () {
var id = document.getElementById("search");
pageIndex = 0;
var self = this;
$.ajax({
url: "/book/queryByPage",
type: "POST",
data: {"pageIndex": pageIndex, "pageSize": self.pageSize},
success: function (data) {
var zb = JSON.parse(data.body.parameters.return);
var value = zb.content;
self.listObj = value;
self.dataCount = zb.totalElements;
}
});
$("#pagetotal").show();
},
changePage(index) {//页码改变触发的函数
var self = this;
//index当前页码
var pageIndex = (index - 1) * this.pageSize;
$.ajax({
url: "/book/queryByPage",
type: "POST",
data: {"pageIndex": pageIndex, "pageSize": self.pageSize},
success: function (data) {
var zb = JSON.parse(data.body.parameters.return);
var value = zb.content;
self.listObj = value;
}
});
},
},
})
</script>
</body>
</html>
后台代码
@RequestMapping("/book/queryByPage")
public List<User> queryByPage() {
List<User> zbZskData = userService.queryAll();
return List;
}
}
其他的service 实体类都很简单自己创建,到此vue+iview分页组件已经完成