ant-design-vue Table分页组件的自定义

分页组件用的最多的就是和表格一起，构成表格数据的翻页显示，当然也不仅限于表格，还有很多

这里以表格为例，通常我们写一个分页展示的表格，都会写一个，然后在下面再写一个的分页组件，分页组件里面有很多参数和触发函数，比如：:page-sizes :total :current-page :page-size 及 layout等，触发函数一般有 @current-change @size-change 等，而以上的参数和触发函数对于一个项目中用到的所有分页组件几乎都是一样的，如果我们每写一个翻页表格，再写一个分页组件，这样就会显得很啰嗦，重复代码多。

这里，我们把组件进一步封装成，引入需要用的文件中，再写翻页表格时，只需引入或有按需求传入自己的参数，不需要写重复的参数和触发函数。
效果图

组件如下，不懂的地方请留言

<template>
  <a-pagination class="pagination" v-if="total>10" v-model="current" :total="total" :size="size" :showTotal="(total, range)=> `共 ${total} 条`" :hideOnSinglePage="hideOnSinglePage" :showQuickJumper="showQuickJumper" :showSizeChanger="showSizeChanger" :pageSize.sync="currentPageSize" :pageSizeOptions="pageSizeOptions" @change="change" @showSizeChange="showSizeChange">
  </a-pagination>
</template>

<script>
export default {
  name: 'pagination',
  props: {
    currents: { // 当前页
      type: Number,
      default: 1
    },
    hideOnSinglePage: {   //只有一页时是否隐藏分页器
      type: Boolean,
      default: false,
    },
    pageSize: {  //每页条数
      type: Number,
      default: 10
    },
    pageSizeOptions: {  //指定每页可以显示多少条
      type: Array,
      default() {
        return ['10', '20', '30', '50',]
      },
    },
    showQuickJumper: {  //是否可以快速跳转至某页
      type: Boolean,
      default: true,
    },
    showSizeChanger: {  //是否可以改变 pageSize
      type: Boolean,
      default: true,
    },
    simple: {    //当添加该属性时，显示为简单分页
      type: Boolean,
      default: false,
    },
    size: {  //当为「small」时，是小尺寸分页
      type: String,
      default: '',
    },
    total: {   //数据总数
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      // 当前页
      current: this.currents,
      //每页条数
      currentPageSize: this.pageSize,
    }
  },
  watch: {
    currents(val) {
      this.current = val
    },
    pageSize(val) {
      this.currentPageSize = val
    },
  },
  methods: {
    //页码改变的回调，参数是改变后的页码及每页条数
    change(page, pageSize) {
      this.$emit('page', page)
      this.$emit('pageSize', pageSize)
      this.$emit('pagination', page, pageSize)
    },
    //pageSize 变化的回调
    showSizeChange(current, size) {
      //   console.log(current)
      //   console.log(size)
      this.$emit('page', current)
      this.$emit('pageSize', size)
      this.$emit('pagination', current, size)
    },
  },
}
</script>
<style lang="less" scoped>
.pagination {
  text-align: center;
  padding-bottom: 30px;
}
</style>

引用的页面用法，如下

 <pagination v-show="total>0" :total="total" @page="pages" @pageSize="pageSizes" :currents="form.current" :pageSize="form.size" @pagination="getList" />
 

一开始需要查几条数据

改变页数的时候