最近在学习Vue.js,需求需要做一个分页的组件。捣鼓了一下午终于搞定了。
先让我们看看官方的说明。
必须先注册组件(dataAll是全局变量),再进行使用。代码如下。以后可以直接作为表格的尾页进行使用。
dataAll全局变量中:
PS:pageNow是分页页数,currentPage是当前页,pageAll是总页数,itemAll是总条目数
var dataAll = {渲染后的效果如图:
pageNow: 10,
currentPage:0,
pageAll: -1,
itemAll:-1,
}
Vue.component('table-page', {
data:function(){
return {
pageSelect:[
{
"id":"first",
"name":"首页",
},{
"id":"previous",
"name":"上页",
},{
"id":"next",
"name":"下页",
},{
"id":"last",
"name":"尾页",
}]
}
},
props: ['inputInfo'],
template: "<div><label style='float: left;font-weight: normal;'>当前页数 <font color='red'>{{dataAll.currentPage+1}}</font>/<font style='margin-right:30px' color='red'>{{dataAll.pageAll}} </font> 每页显示"
+"<select v-model='dataAll.pageNow' v-on:change='pageNowChange(dataAll.pageNow)'><option>10</option><option>20</option><option>50</option></select> 总页数:<font color='red'>{{dataAll.itemAll}}</font ></label>"
+"<ul style='margin: 0px;float: right;' class='pagination'>"
+"<label><div class='input-group'><input v-model='inputInfo' style='margin-left:30px;width: 80px;' type='text' class='form-control' placeholder='选择页数' aria-describedby='basic-addon2'><span class='input-group-btn'><button v-on:click='jumpPage' class='btn btn-primary' type='button'>跳转</button></span></div></label>"
+"<li v-on:click='pageClick(pageSelect[0])'><a href='javascript:void(0)'>{{pageSelect[0].name}}</a></li>"
+"<li v-on:click='pageClick(pageSelect[1])'><a href='javascript:void(0)'>{{pageSelect[1].name}}</a></li>"
+"<li v-on:click='pageClick(pageSelect[2])'><a href='javascript:void(0)'>{{pageSelect[2].name}}</a></li>"
+"<li v-on:click='pageClick(pageSelect[3])'><a href='javascript:void(0)'>{{pageSelect[3].name}}</a></li><ul></div>",
methods:{
pageClick:function(obj){
switch(obj.id){
case "first":
dataAll.currentPage = 0;
break;
case "previous":
if(dataAll.currentPage > 0){
dataAll.currentPage --;
}
break;
case "next":
if(dataAll.currentPage < dataAll.pageAll-1){
dataAll.currentPage ++;
}
break;
case "last":
dataAll.currentPage = dataAll.pageAll-1;
break;
};
this.$emit("reload");
},
jumpPage:function(){
var val = parseInt(this.inputInfo);
if(val > 0 && val <=dataAll.pageAll){
dataAll.currentPage = val-1;
}else{
alert("请输入正确的页面");
}
this.$emit("reload");
},
pageNowChange:function(i){
dataAll.pageNow = i;
dataAll.currentPage = 0;
this.$emit("reload");
}
}
})
上述代码有一些需要注意的地方:
1、pageClick是点击“首页”、“上页”等触发的方法,jumpPage是跳转方法,pageNowChange是改变每页显示所做的事。
2、先让我们看看官方的说明:
这是父子之间组件的通信过程。可以看我组件中每个方法最后都有一个$.Emit(“reload”)操作,这是为了组件的隔离性和复用性,为了组件的独立性,这里会有一个提交给父类(即在html中使用“table-page标签”)的reload,在父类接受了reload参数之后,见下图:
这是我在父类中自定义的事件,这个事件在提交了emit(reload)之后会触发search事件,这个事件在vue实例代码中实现。这大大提高了独立性。如果还不明白可以参考vue文档实例:点击打开链接
如下图所示:
接下来调取vue实例代码:
var page = new Vue({
el: '#tableVue',
data :{infoObj:info,
tableData:[],
dataAll},
methods:{
search:function(){
this.tableData = [];
this.init(dataAll.pageNow);
console.log(this.tableData);
},
init:function(pageNow){
var lengthAll = info.infomation.length;
var lengthPage = parseInt(lengthAll/pageNow)+1;
for(var i = dataAll.currentPage*pageNow; i < (dataAll.currentPage+1)*pageNow ;i++){
if(info.infomation[i] == undefined){
break;
}else{
this.tableData.push(info.infomation[i]);
}
}
dataAll.pageAll = lengthPage;
dataAll.itemAll = lengthAll;
}
},
created:function(){
this.init(dataAll.pageNow);
}
})
可以看到这里首先created创建了表格同时更新数据(不明白生命周期的可以看这里: 点击打开链接),然后根据组件的方法进行数据视图更新,init方法是更新当前实例属性达到更新视图的功能。
完成后渲染如图:
可以发现各种功能都可以。
由于没有服务器数据这里用的是本地数据json。所以如果要ajax获取的话需要改代码。但是组件基本都可以去使用了。
html代码如下所示:
<table class="table">
<thead>
<tr style="color:white; background-color:#307ecc">
<th style="width: 5%"></th>
<th style="width: 15%">姓名</th>
<th style="width: 20%">地址</th>
<th style="width: 20%">邮箱地址</th>
<th style="width: 10%">年龄</th>
<th style="width: 13%">截止日期</th>
<th style="width: 16%"></th>
</tr>
</thead>
<tbody id="tableVue">
<tr v-for="detail in tableData">
<td><input type="checkbox"></td>
<td>{{detail.first_name}} {{detail.last_name}}</td>
<td>{{detail.id}}</td>
<td>{{detail.email}}</td>
<td>{{detail.age}}</td>
<td>{{detail.start_date}}</td>
<td>
<a id="tdEdit" href=""><i class="fa fa-w fa-edit"></i>编辑</a>
<a id="tdDelete" href=""><i class="fa fa-trash-o" aria-hidden="true"></i>删除</a></td>
</tr>
<tr id="item_list">
<td colspan="7">
<table-page v-on:reload="search"></table-page>
</td>
</tr>
</tbody>
</table>
源代码我会找个时间上传,这次主要为了纪录我自己的vue学习之路,方便以后自己需要用的时候回来查看。很多地方写的不够好,临时赶出来的希望谅解。