Vue開發(fā)之封裝分頁組件與使用示例

更新時間：2019年04月25日 11:19:10 作者：guanguan0_0

這篇文章主要介紹了Vue開發(fā)之封裝分頁組件與使用,結合實例形式分析了vue.js封裝分頁組件操作以及使用組件進行分頁的相關實現(xiàn)技巧,需要的朋友可以參考下

本文實例講述了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);
    },
    // 當前頁碼變更
    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程序設計有所幫助。

您可能感興趣的文章:

vue router 通過路由來實現(xiàn)切換頭部標題功能
在做單頁面應用程序時，一般頁面布局頭尾兩塊都是固定在布局頁面，中間為是路由入口。這篇文章主要介紹了vue-router 通過路由來實現(xiàn)切換頭部標題 ,需要的朋友可以參考下
2019-04-04
Vue?通過this.$emit()方法子組件向父組件傳值(步驟分享)
這篇文章主要介紹了Vue?this.$emit()方法通過子組件向父組件傳值,第一步在父組件中引入子組件，第二步子組件向父組件傳值，本文通過需要的朋友可以參考下
2022-11-11
vue項目本地開發(fā)完成后部署到服務器后報404錯誤解決方案
很多時候我們發(fā)現(xiàn)辛辛苦苦寫的VueJs應用經過打包后在自己本地搭建的服務器上測試沒有什么問題,但真正放在服務器上后會發(fā)現(xiàn)或多或少的問題,這篇文章主要給大家介紹了關于vue項目本地開發(fā)完成后部署到服務器后報404錯誤的解決方案,需要的朋友可以參考下
2024-01-01
基于Vue3實現(xiàn)一個簡單的雪花漂浮效果
隨著冬季的到來,許多網站和應用程序都會添加一些節(jié)日氛圍的元素,比如雪花飄落的效果,本文將教你如何在 Vue 3 中實現(xiàn)一個簡單的雪花漂浮效果,為你的網頁增添一絲冬日的浪漫,感興趣的小伙伴跟著小編一起來看看吧
2025-01-01
Vuex中actions優(yōu)雅處理接口請求的方法
在項目開發(fā)中，如果使用到了 vuex，通常我會將所有的接口請求單獨用一個文件管理，這篇文章主要介紹了Vuex中actions如何優(yōu)雅處理接口請求,業(yè)務邏輯寫在 actions 中，本文給大家分享完整流程需要的朋友可以參考下
2022-11-11
Vue 2.5 Level E 發(fā)布了：新功能特性一覽
很高興Vue 2.5 Level E 發(fā)布了。在這篇文章中，我們將重點介紹一些更重要的的變化：更好的 TypeScript 集成，更好的錯誤處理，更好地支持單文件組件中的函數(shù)式組件以及與環(huán)境無關的服務端渲染
2017-10-10
vue中組件間多種傳值方式案例詳解
vue中每個組件都是隔離的,包括父組件和子組件,各組件之間需要數(shù)據(jù)通信,就涉及到了組件傳值,本文給大家介紹vue中組件間多種傳值方式案例,感興趣的朋友跟隨小編一起看看吧
2024-03-03
詳解vue 項目白屏解決方案
這篇文章主要介紹了詳解vue 項目白屏解決方案，詳細的介紹了白屏的解決方案，非常具有實用價值，需要的朋友可以參考下
2018-10-10
watch里面的deep和immediate作用及說明
這篇文章主要介紹了watch里面的deep和immediate作用及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-08-08
Vue實現(xiàn)關聯(lián)頁面多級跳轉（頁面下鉆）功能的完整實例
這篇文章主要給大家介紹了關于Vue實現(xiàn)關聯(lián)頁面多級跳轉（頁面下鉆）功能的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-03-03