溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
使用vue.js組件怎么實現一個分頁效果？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
Vue是一套用于構建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區別是，使用Vue可以自底向上逐層應用，其核心庫只關注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態系統支持的庫開發復雜的單頁應用。
html內容
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title> CommonTest</title> <link rel="stylesheet" href="../bootstrap.min.css" /> </head> <body> <div class="container body-content"> <header> <h3>vue.js組件分頁效果</h3> </header> <div id="test" class="form-group"> <my-component v-on:show-page="getPageData" v-bind:pager-data="pagerData"></my-component> </div> <hr /> <footer> <p>© 2017 - 易兒善</p> </footer> </div> </body> </html>
javascript內容
<script src="../vue.js"></script>
<script src="com.js"></script>
<script>
//模擬獲取數據
var getData=function(){
var result = [];
for (var i = 0; i < 205; i++) {
result[i] ={name:'test'+i,id:i,age:(Math.random()*100).toFixed()};
}
return result;
}
var vue = new Vue({
el: "#test",
ready:function(){
this.dataAll = getData();
this.pagerData.page.totalCount = this.dataAll.length;
this.getPageData(this.pagerData.page);
},
methods: {
getPageData: function (page) {
this.pagerData.page.pagesize = page.pagesize;
this.pagerData.page.pageCurrent = page.pageCurrent;
this.pagerData.page.pageCount = Math.ceil(this.pagerData.page.totalCount / page.pagesize);// 修改分頁信息
var newPageInfo = [];
for (var i = 0; i < page.pagesize; i++) {
var index =i+(page.pageCurrent-1)*page.pagesize;
if(index>this.pagerData.page.totalCount-1)break;
newPageInfo[newPageInfo.length] = this.dataAll[index];
}
this.pagerData.data = newPageInfo; // 修改分頁數據
}
},
components: {
'my-component': pager
},
data: {
//所有數據，分頁數據從這里取
dataAll:[],
pagerData:{
data:[],
rows:[{label:"ID",name:"id"},
{label:"名字",name:"name"},
{label:"年齡",name:"age"}
],
page:{
arrPageSize:[10,20,30,40],
pagesize:10,
pageCount:1,
pageCurrent:1,
totalCount:1
}
}
},
});
</script>com.js組件內容
var pager = {
props: {
pagerData:{
type: Object,
default:function(){
return{
data:[],
rows:[],
page:{
//分頁大小
pagesize:20,
//分頁數
arrPageSize:[10,20,30,40],
//當前頁面
pageCurrent:1,
//總分頁數
pageCount:1,
//總數
totalCount:10
}
}
}
}
},
template: '<table class="table table-bordered table-responsive table-striped">\
<tr>\
<th v-for="item in pagerData.rows" v-on:click="sortBy(item.name)">{{item.label}}</th>\
</tr>\
<tr v-for="dataItem in pagerData.data | orderBy sortparam sorttype">\
<td v-for="item in pagerData.rows">{{dataItem[item.name]}}</td>\
</tr>\
</table>\
<div class="pager" id="pager">\
<span class="form-inline">\
<select class="form-control" v-model="pagesize" v-on:change="showPage(pageCurrent,$event)" number>\
<option v-for="item in pagerData.page.arrPageSize" value="{{item}}">{{item}}</option>\
</select>\
</span>\
<span class="btn btn-default" v-on:click="showPage(1,$event)">首頁</span>\
<span class="btn btn-default" v-on:click="showPage(pageCurrent-1,$event)">上一頁</span>\
<span class="form-inline">\
<input class="form-control" type="text" v-model="pageCurrent" v-on:keyup.enter="showPage(mypageCurrent,$event,true)" />\
</span>\
<span>共{{pagerData.page.pageCount}}頁</span>\
<span class="btn btn-default" v-on:click="showPage(pageCurrent+1,$event)">下一頁</span>\
<span class="btn btn-default" v-on:click="showPage(pagerData.page.pageCount,$event)">尾頁</span>\
<span>共{{pagerData.page.totalCount}}條數據，當前顯示第{{startData}}-{{endData}}條記錄</span>\
</div>',
data:function(){return{
mypagesize:10,
mypageCurrent:1,
sortparam:"",
sorttype:1,
}},
//計算屬性
computed:{
// 分頁大小 獲取的時候顯示父級傳入的，修改的時候修改自身的。子組件不能修改父元素的值
pagesize:{
get:function(){
return this.pagerData.page.pagesize;
},
set:function(value){
this.mypagesize = value;
}
},
pageCurrent:{
get:function(){
return this.pagerData.page.pageCurrent;
},
set:function(value){
this.mypageCurrent = value;
}
},
startData:function(){
return this.pagerData.page.pagesize*(this.pagerData.page.pageCurrent-1)+1;
},
endData:function(){
var max =this.pagerData.page.pagesize*this.pagerData.page.pageCurrent;
return max>this.pagerData.page.totalCount?this.pagerData.page.totalCount:max;
}
},
methods:{
showPage: function (pageIndex, $event) {
if (pageIndex > 0) {
if(pageIndex>this.pagerData.page.pageCount) pageIndex = this.page.pageCount;
this.$emit('show-page',{pageCurrent:pageIndex,pagesize:this.mypagesize});//事件
}
},sortBy: function (sortparam) {
this.sortparam = sortparam;
this.sorttype = this.sorttype == -1 ? 1 : -1;
}
}
}關于使用vue.js組件怎么實現一個分頁效果問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
