Vue開發(fā)之封裝分頁(yè)組件與使用示例
本文實(shí)例講述了Vue開發(fā)之封裝分頁(yè)組件與使用。分享給大家供大家參考,具體如下:
使用elementui中的el-pagination來封裝分頁(yè)組件
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: { // 每頁(yè)條數(shù)變更 handleSizeChange(val) { this.page.limit = val; this.$emit('pageChange', this.page); }, // 當(dāng)前頁(yè)碼變更 handleCurrentChange(val) { this.page.page = val; this.$emit('pageChange', this.page); } } } </script> <style> .pagination { margin: 20px 0; } </style>
使用創(chuàng)建的分頁(yè)組件
<pagination :total="total" @pageChange="pageChange"></pagination>
// 頁(yè)碼切換 pageChange(item) { this.searchContent.page = item.page; this.searchContent.limit = item.limit; this.getList(); },
希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。
相關(guān)文章
關(guān)于@click.native中?.native?的含義與使用方式
這篇文章主要介紹了關(guān)于@click.native中?.native?的含義與使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10vue-quill-editor富文本編輯器簡(jiǎn)單使用方法
這篇文章主要為大家詳細(xì)介紹了vue-quill-editor富文本編輯器簡(jiǎn)單使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-09-09vue3使用vis繪制甘特圖制作timeline可拖動(dòng)時(shí)間軸及時(shí)間軸中文化(推薦)
這篇文章主要介紹了vue3使用vis繪制甘特圖制作timeline可拖動(dòng)時(shí)間軸,時(shí)間軸中文化,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-02-02解決VUE項(xiàng)目使用Element-ui 下拉組件的驗(yàn)證失效問題
這篇文章主要介紹了解決VUE項(xiàng)目使用Element-ui 下拉組件的驗(yàn)證失效問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11vue3超出文本展示el tooltip實(shí)現(xiàn)示例
這篇文章主要為大家介紹了vue3超出文本展示el tooltip實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02