element的分頁組件封裝

直接貼代碼

<template>  
  <div class="pagination-container fr">    
    <el-pagination      
      :background="background"      
      :current-page.sync="currentPage"      
      :page-size.sync="pageSize"      
      layout="total, sizes, prev, pager, next, jumper"      
      :page-sizes="[10, 20, 30, 40]"      
      :total="total"      
      @size-change="handleSizeChange"      
      @current-change="handleCurrentChange"/>  
  </div>
</template>
<script>
export default {  
  name: 'Pagination',  
  props: {    
    total: {      
      default: 0,      
      type: Number    
    },    
    page: { 
      // 當前頁      
      type: Number,      
      default: 1    
    },    
    limit: {      
      type: Number,      
      default: 10    
    },    
    pageSizes: { 
      // 每頁顯示條數      
      type: Number,      
      default: 10 
      // 默認10條    
    },    
    background: {      
      type: Boolean,      
      default: true    
    },  
  },  
  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)      
      }    
    }  
  },  
  methods: {    
    handleSizeChange(val) {      
       his.$emit('pagination', { page: this.currentPage, limit: val })    
    },    
    handleCurrentChange(val) {      
      this.$emit('pagination', { page: val, limit: this.pageSize })    
    }  
  }
}
</script>
<style scoped>
  .pagination-container {  background: #fff; padding: 32px 16px;}
</style>複製代碼

頁面使用

1.引入

import Pagination from "@/components/Pagination";複製代碼

2.註冊組件

components: { Pagination },複製代碼

3.定義分頁相關數據

total: 0, 
// 列表總數
listQuery: {   
  // 獲取列表傳參集合   
  queryPage: {     
    pageNum: 1, // 當前頁     
    pageSize: 10 // 每頁顯示條數  
  }
},複製代碼

4.傳入參數給後臺

const params = {  
  currentPage: this.listQuery.queryPage.pageNum, // 當前頁  
  pageSize: this.listQuery.queryPage.pageSize // 每頁顯示條數
};
// 對分頁進行相關操做的判斷
arguments[0] ? ((params.pageSize = arguments[0].limit), (params.currentPage = arguments[0].page)) : params;複製代碼

5.獲取數據，賦值

this.total = res.data.totalNum;複製代碼