vue.js中用iview框架的page组件实现简单的分页
1、首先去iview官网安装iview的框架(我是通过CDN直接引入):<link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/ivie
·
1、首先去iview官网安装iview的框架(我是通过CDN直接引入):
<link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
<script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
<script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
2、引入iview自带组件:
<Page :total=“dataCount” :page-size=“pageSize” show-total @on-change=“changepage”>
api(官网是有的)如下图所示:
3、data里面初始化:
data: {
list:[], //接口获取的总数据
dataCount:"", // 总数据的条目
pageSize:3, // 每页显示多少条
historyData:'' //展示的数据
},
3、获取接口遍历数据:
methods:{
agency:function () {
let self=this; //申明个this对象
let url ='./js/agency.json'; //本地模拟的数据
$.ajax({ url: url, dataType: "json",
success: function(res){
self.dataCount = res.length; //接口返回数据的总条目数
self.list=res; //接口返回的总数据
// console.log(self.list)
if(self.dataCount < self.pageSize){ //如果数据的总条目数小于每页显示的条目数就赋值,否则就提取总数据的第三条
self.historyData = self.list
//console.log(self.historyData)
}else{
self.historyData = self.list.slice(0,self.pageSize);
// console.log(self.historyData)
}
},
error: function(res){
console.log("读取失败!");
}
});
}
}
4、写翻页事件:
//页数变化的时候改变每一页的内容
changepage(index){
let self = this
let _start = ( index- 1 ) * self.pageSize;
let _end = index* self.pageSize;
self.historyData = self.list.slice(_start,_end);
}
整体代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
<script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
<script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style>
.inner{
position: relative;
padding-left: 110px;
height: 30px;
line-height: 30px;
font-size: 15px;
border-bottom: 1px dashed #cce5ff;
}
.inner span{
border-right: 1px solid #e0e0e0;
display: inline-block;
width: 10px;
height: 12px;
padding-left: 15px;
}
.item-name {
position: absolute;
left: 0;
width: 130px;/*110*/
top: 0;
bottom: 0;
text-align: right;
color: #323232;
}
.item-value {
color: #646464;
padding-left:35px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in historyData">
<div>
<div class="inner">
<div class="item-name">任务流水号<span></span> </div>
<div class="item-value">{{item.flowLogicId}}</div>
</div>
<div class="inner">
<div class="item-name">任务类型<span></span> </div>
<div class="item-value">{{item.flowType}}</div>
</div>
<div class="inner">
<div class="item-name">任务名称<span></span> </div>
<div class="item-value">{{item.flowName}}</div>
</div>
<div class="inner">
<div class="item-name">任务发起人<span></span> </div>
<div class="item-value">{{item.flowCRyxm}}</div>
</div>
<div class="inner">
<div class="item-name">任务发起时间<span></span> </div>
<div class="item-value">{{item.flowCTime}}</div>
</div>
<div class="inner">
<div class="item-name">当前环节<span></span> </div>
<div class="item-value">{{item.nodeName}}</div>
</div>
<div class="inner">
<div class="item-name">当前环节处理人<span></span> </div>
<div class="item-value">{{item.enableRyxms}}</div>
</div>
</div>
</li>
</ul>
<Page :total="dataCount" :page-size="pageSize" show-total @on-change="changepage"></Page>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
list:[], //接口获取的总数据
dataCount:"", // 总数据的条目
pageSize:3, // 每页显示多少条
historyData:'' //展示的数据
},
created:function(){
this.agency();
this.changepage();
},
methods:{
agency:function () {
let self=this; //申明个this对象
let url ='./js/agency.json'; //本地模拟的数据
$.ajax({ url: url, dataType: "json",
success: function(res){
self.dataCount = res.length; //接口返回数据的总条目数
self.list=res; //接口返回的总数据
// console.log(self.list)
if(self.dataCount < self.pageSize){ //如果数据的总条目数小于每页显示的条目数就赋值,否则就提取总数据的第三条
self.historyData = self.list
//console.log(self.historyData)
}else{
self.historyData = self.list.slice(0,self.pageSize);
// console.log(self.historyData)
}
},
error: function(res){
console.log("读取失败!");
}
});
},
//页数变化的时候改变每一页的内容
changepage(index){
let self = this
let _start = ( index - 1 ) * self.pageSize;
let _end = index * self.pageSize;
self.historyData = self.list.slice(_start,_end);
}
}
})
</script>
</body>
</html>
以上就是vue.js中用iview框架的page组件实现简单的分页全部内容
更多推荐
已为社区贡献13条内容
所有评论(0)