记录element-ui分页组件二次分装

前言

本文是基于elementUI 的el-pagination二次分装，如果还不懂el-pagination请先看官网介绍后 在看本文。

查看element官网

HTML部分

<template>
  <div :class="{'hidden':hidden}" class="pagination-container">
    <el-pagination
      :background="background"
      :current-page.sync="currentPage"
      :page-size.sync="pageSize"
      :layout="layout"
      :page-sizes="pageSizes"
      :total="total"
      v-bind="$attrs"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

javascript部分

props 参数

• @total 默认数据总数
• @page 默认开始页面
• @limit 每页的数据条数
• @pageSizes 分组
• @layout 组件布局

.sync 修饰参数

• @page 默认开始页面
• @limit 每页的数据条数

export default {
  name: 'Pagination',
  props: {
    total: {
      required: true,
      type: Number
    },
    page: {
      type: Number,
      default: 1
    },
    limit: {
      type: Number,
      default: 20
    },
    pageSizes: {
      type: Array,
      default() {
        return [5, 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
    }
  },
  /**
   * page-size    当前每页显示条目个数，支持 .sync 修饰符
   * current-page 当前页数，支持 .sync 修饰符
   * */
  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)
      }
    }
  },
  /**
   * pagination 父定义请求函数 getList
   * this.$emit("function",param); //其中function为父组件定义函数，param为需要传递参数
   * */
  methods: {
    handleSizeChange(val) {
      this.$emit('pagination', { page: this.currentPage, limit: val })    
    },
    handleCurrentChange(val) {
      this.$emit('pagination', { page: val, limit: this.pageSize })
    }
  }
}

在页面中使用

 <pagination  
 v-show="total>0" 
 :total="total" 
 :page.sync="currentPage" 
 :limit.sync="pagesize" 
 @pagination="getList"/>