vue+element分頁組件封裝成公共組件

vue+element分頁組件封裝成公共組件


1.首先定義一個分頁子組件

 <el-pagination
      :background="background"
      :current-page.sync="currentPage"  //第幾頁
      :page-size.sync="pageSize"  //每頁顯示幾條數據
      :layout="layout"
      :page-sizes="pageSizes"  //可選的每頁多少條數據
      :total="total"
      @size-change="handleSizeChange"  //當前頁多少條數據的方法
      @current-change="handleCurrentChange" //顯示第幾頁
    />

2.定義props 接受父組件傳過來的值 代碼如下：

props: {
    total: {
      required: true,
      type: Number
    },
    page: {
      type: Number,
      default: 1  //默認第一頁
    },
    limit: {
      type: Number,
      default: 20  //默認每頁20條
    },
    pageSizes: {
      type: Array,
      default() {
        return [10, 20, 30, 50]  //默認顯示可選的每頁多少條數據
      }
    },
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    },
    background: {
      type: Boolean,
      default: true
    },
    autoScroll: {
      type: Boolean,
      default: true
    },
    hidden: {
      type: Boolean,
      default: false
    }
  },

3.在定義2個計算屬性 一個為當前頁多少條數據，一個為第幾頁，因為會改變這2個值 所以設置了set屬性

computed: {
    currentPage: {
      get() {
        return this.page
      },
      set(val) {
        this.$emit('update:page', val)  //改變的第幾頁的值賦值給父組件
      }
    },
    pageSize: {
      get() {
        return this.limit
      },
      set(val) {
        this.$emit('update:limit', val) //改變的當前頁幾條數據的值賦值給父組件
      }
    }
  },

4.在定義2個方法 一個改變頁數，一個當前頁多少條數據

methods: {
    handleSizeChange(val) {
      this.$emit('pagination', { pageIndex: 1, pageSize: val })
     
    },
    handleCurrentChange(val) {
      this.$emit('pagination', { pageIndex: val, pageSize: this.pageSize })
      
    }
  }

5.然后在父組件 注冊 引用

import Pagination from '@/components/Pagination'

export default {
    components: {  Pagination},
    data() {
      return {
        length: 0,
        pageSize: 20, //要傳過去的數據 每頁多少條數據
        pageIndex: 1, //要傳過去的數據 第幾頁
      }
    },


6.父組件 使用子組件 並接受子組件傳回的事件

<pagination v-show="length>0" :total="length" :page.sync="pageIndex" 
 :limit.sync="pageSize"  @pagination="handlePageChange"/>

 handlePageChange(data) {
        this.pageIndex = data.pageIndex
        this.pageSize = data.pageSize
        this.loadData()//這是重新獲取數據的方法
      }

最后封裝的公用分頁組件就好了 就可以在任何頁面使用這個分頁組件了
————————————————
版權聲明：本文為CSDN博主「漸離~~」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/zo429515/article/details/105359576/