欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2019年04月25日 11:19:10   作者:guanguan0_0  
這篇文章主要介紹了Vue開發(fā)之封裝分頁組件與使用,結(jié)合實例形式分析了vue.js封裝分頁組件操作以及使用組件進(jìn)行分頁的相關(guān)實現(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);
    },
    // 當(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è)計有所幫助。

相關(guān)文章

  • 詳解Vue 路由組件傳參的 8 種方式

    詳解Vue 路由組件傳參的 8 種方式

    這篇文章主要介紹了Vue 路由組件傳參的 8 種方式,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-03-03
  • 關(guān)于@click.native中?.native?的含義與使用方式

    關(guān)于@click.native中?.native?的含義與使用方式

    這篇文章主要介紹了關(guān)于@click.native中?.native?的含義與使用方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • vite2.0 踩坑實錄

    vite2.0 踩坑實錄

    本文主要介紹了vite2.0 踩坑,記錄了一些在配置項目中遇到的問題,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-07-07
  • vue-quill-editor富文本編輯器簡單使用方法

    vue-quill-editor富文本編輯器簡單使用方法

    這篇文章主要為大家詳細(xì)介紹了vue-quill-editor富文本編輯器簡單使用方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2018-09-09
  • vue3使用vis繪制甘特圖制作timeline可拖動時間軸及時間軸中文化(推薦)

    vue3使用vis繪制甘特圖制作timeline可拖動時間軸及時間軸中文化(推薦)

    這篇文章主要介紹了vue3使用vis繪制甘特圖制作timeline可拖動時間軸,時間軸中文化,本文結(jié)合實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-02-02
  • 解決VUE項目使用Element-ui 下拉組件的驗證失效問題

    解決VUE項目使用Element-ui 下拉組件的驗證失效問題

    這篇文章主要介紹了解決VUE項目使用Element-ui 下拉組件的驗證失效問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • vue樣式疊層z-index不起作用的解決方案

    vue樣式疊層z-index不起作用的解決方案

    這篇文章主要介紹了vue樣式疊層z-index不起作用的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue-cli中的webpack配置詳解

    vue-cli中的webpack配置詳解

    本篇文章主要介紹了vue-cli中的webpack配置詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09
  • vue中的插槽詳解

    vue中的插槽詳解

    這篇文章主要介紹了Vue中的插槽,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-10-10
  • vue3超出文本展示el tooltip實現(xiàn)示例

    vue3超出文本展示el tooltip實現(xiàn)示例

    這篇文章主要為大家介紹了vue3超出文本展示el tooltip實現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-02-02

最新評論