溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
需求
一個監控控制臺界面，有成千上萬條表格數據，需要做一個全局分頁組件，支持調整每頁顯示數目、總頁數、當前頁數、前進后退、自由跳轉頁數。
字段
| 參數名 | 數據類型 | 說明 |
| total | Number | 總條數 |
| pageNo | Number | 總頁數 |
| limit | Number | 每頁展示條數 |
原型
預期長醬紫（不要嫌丑！畢竟是后臺控制臺！）
代碼
html
<template>
<div class="paging-content clearfix">
<div class="fl">
總共<b> {{total}} </b>條
<select v-model="limit">
<option>10</option>
<option>20</option>
<option>30</option>
<option>40</option>
<option>50</option>
<option>100</option>
</select>條/頁
</div>
<div class="fr paging-box">
<a v-if="+no>1" class="fa fa-angle-double-left" @click="goToPage(1)"></a>
<a v-if="+no<=1" class="fa fa-angle-double-left"></a>
<a v-if="+no>1" class="fa fa-angle-left" @click="goToPage(+no - 1)"></a>
<a v-if="+no<=1" class="fa fa-angle-left"></a>
<a v-if="+no-2>1">...</a>
<a v-if="+no-2>0" @click="goToPage(+no-2)">{{+no - 2}}</a>
<a v-if="+no-1>0" @click="goToPage(+no-1)">{{+no - 1}}</a>
<a v-if="+no>0" >{{no}}</a>
<a v-if="+no+1<=+sum" @click="goToPage(+no+1)">{{+no + 1}}</a>
<a v-if="+no+2<=+sum" @click="goToPage(+no+2)">{{+no + 2}}</a>
<a v-if="+no+2<=+sum-1">...</a>
<a v-if="+no<+sum" class="fa fa-angle-right" @click="goToPage(+no + 1)"></a>
<a v-if="+no>=+sum" class="fa fa-angle-right"></a>
<a v-if="+no<+sum" class="fa fa-angle-double-right" @click="goToPage(+sum)"></a>
<a v-if="+no>=+sum" class="fa fa-angle-double-right"></a>
</div>
</div>
</template>
js
<script>
module.exports = {
props: ['no', 'limit', 'total'],
computed: {
sum: function() {
return Math.ceil(this.total/this.limit);
}
},
methods: {
'goToPage': function(page_no) {
this.$dispatch('page-change', page_no);
}
},
watch: {
'limit': function(newVal, oldVal) {
if(newVal!=oldVal&&oldVal!=undefined) {
this.$dispatch('page-limit-change', newVal);
}
}
}
}
</script>
css
<style lang="less" rel="stylesheet/less">
//定義了一個顏色參數文件，方便自定義顏色和管理，比如@color-white: #fff;
@import "../less/variables";
.paging-content {
> div {
font-size: 12px;
color: @color-text-normal;
}
select {
margin-right: 4px;
}
.fl {
float: left;
}
.fr {
float: right;
}
.paging-box {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
a {
display: inline-block;
width: 24px;
height: 24px;
border-right: 1px solid #ccc;
line-height: 24px;
text-align: center;
float: left;
color: @color-text-blue;
cursor: pointer;
}
}
}
</style>
局部組件使用方法
引入
import page from 'example-page'
注冊組件
components:{
page: page
},
模板
<paging :no.sync="params.page_no" :limit.sync="params.page_limit" :total.sync="total_items"></paging>
以上是制作步驟，制作好組件以后，參考Vue官網插件發布
npm 發包
如果執行npm publish出現錯誤，可能是你的包名已經被注冊過，在npm 官網上搜索一下是否已被注冊了。若發包成功，你就可以在npm官網上搜索到自己的包。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
