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;复制代码