Vue開發(fā)之封裝分頁組件與使用示例
更新時(shí)間：2019年04月25日 11:19:10 作者：guanguan0_0
這篇文章主要介紹了Vue開發(fā)之封裝分頁組件與使用,結(jié)合實(shí)例形式分析了vue.js封裝分頁組件操作以及使用組件進(jìn)行分頁的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
本文實(shí)例講述了Vue開發(fā)之封裝分頁組件與使用。分享給大家供大家參考，具體如下：
使用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ì)有所幫助。
相關(guān)文章
這篇文章主要介紹了Vue 路由組件傳參的 8 種方式,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-03-03
關(guān)于@click.native中?.native?的含義與使用方式
這篇文章主要介紹了關(guān)于@click.native中?.native?的含義與使用方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
本文主要介紹了vite2.0 踩坑，記錄了一些在配置項(xiàng)目中遇到的問題，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
這篇文章主要為大家詳細(xì)介紹了vue-quill-editor富文本編輯器簡單使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-09-09
vue3使用vis繪制甘特圖制作timeline可拖動(dòng)時(shí)間軸及時(shí)間軸中文化(推薦)
這篇文章主要介紹了vue3使用vis繪制甘特圖制作timeline可拖動(dòng)時(shí)間軸，時(shí)間軸中文化,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-02-02
解決VUE項(xiàng)目使用Element-ui 下拉組件的驗(yàn)證失效問題
這篇文章主要介紹了解決VUE項(xiàng)目使用Element-ui 下拉組件的驗(yàn)證失效問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue樣式疊層z-index不起作用的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
本篇文章主要介紹了vue-cli中的webpack配置詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了Vue中的插槽，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-10-10
vue3超出文本展示el tooltip實(shí)現(xiàn)示例
這篇文章主要為大家介紹了vue3超出文本展示el tooltip實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02