本文實(shí)例講述了Vue開發(fā)之封裝分頁組件與使用。分享給大家供大家參考,具體如下:
創(chuàng)新互聯(lián)專注于企業(yè)全網(wǎng)營銷推廣、網(wǎng)站重做改版、東臺網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、html5、商城建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù),價(jià)格優(yōu)惠性價(jià)比高,為東臺等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
使用elementui中的el-pagination來封裝分頁組件
pagination.vue:
<template> <div class="pagination"> <el-pagination small class="text-center" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.page" :page-sizes="pageSizes" :page-size="page.limit" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> </div> </template> <script> export default { props: { total: { type: Number } // 總條數(shù) }, data() { return { pageSizes: [10, 20, 50, 100], page: { page: 1, limit: 10 } }; }, methods: { // 每頁條數(shù)變更 handleSizeChange(val) { this.page.limit = val; this.$emit('pageChange', this.page); }, // 當(dāng)前頁碼變更 handleCurrentChange(val) { this.page.page = val; this.$emit('pageChange', this.page); } } } </script> <style> .pagination { margin: 20px 0; } </style>
使用創(chuàng)建的分頁組件
<pagination :total="total" @pageChange="pageChange"></pagination>
// 頁碼切換 pageChange(item) { this.searchContent.page = item.page; this.searchContent.limit = item.limit; this.getList(); },
希望本文所述對大家vue.js程序設(shè)計(jì)有所幫助。
標(biāo)題名稱:Vue開發(fā)之封裝分頁組件與使用示例
地址分享:http://muchs.cn/article36/pihcsg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站設(shè)計(jì)、關(guān)鍵詞優(yōu)化、Google、App設(shè)計(jì)、網(wǎng)站內(nèi)鏈、網(wǎng)站排名
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)