ElementUI 페이지 나누기 구성 요소 2차 패키지

<template>
  <paging-query :pager="pager" @query="getItemList"/>
template>

<script>
import PagingQuery from '@/components/PagingQuery';

export default {
  components: {
    PagingQuery,
  },
  data() {
    pager: {
       count: 0,
       page: 1,
       rows: 15,
     },
  },
  methods: {
    //  
	getItemList() {}
  },
script>

<template>
  <form class="mod-paging fn-clear" @submit.prevent>
    <el-pagination
      small
      class="fn-right"
      layout="total, sizes, prev, pager, next, jumper"
      background
      :pager-count="7"
      :total="pager[props.total]"
      :current-page.sync="pager[props.page]"
      :page-size="pager[props.rows]"
      :page-sizes="pageSizes"
      @size-change="onChangeSize"
      @current-change="onChangePage"
    >el-pagination>
    <el-button icon="el-icon-refresh" @click="$emit('query')"> el-button>
  form>
template>

<script>
import config from '@/config/app.config';

export default {
  name: 'Paging',
  //  
  model: {
    prop: 'pager',
    event: 'setPager',
  },
  props: {
    pager: {
      type: Object,
      required: true,
    },
    refresh: {
      type: Boolean,
    },
    pageSizes: {
      type: Array,
      default: () => ([10, 15, 30, 50]),
    },
    props: {
      type: Object,
      required: false,
      default: () => ({
	    //  
	    page: 'page',
	    //  
	    rows: 'rows',
	    //  
	    total: 'count',
	  }),
    },
  },
  computed: {
    total() {
      return this.pager[this.props.total] || 0;
    },
    //  
    isEmptyList() {
      return (
        Math.ceil(this.pager[this.props.total] / this.pager[this.props.rows])
        < this.pager[this.props.page]
      );
    },
  },
  watch: {
    total() {
      //  ,  
      if (this.pager[this.props.page] > 1 && this.isEmptyList) {
        this.$emit(
          'setPager',
          Object.assign(this.pager, {
            [this.props.page]: this.pager[this.props.page] - 1,
          })
        );
        this.$nextTick(() => {
          this.$emit('query');
        });
      }
    },
  },
  methods: {
    //  
    onChangeSize(rows) {
      const temp = {
        [this.props.rows]: rows,
        //  ， 
        [this.props.page]: rows <= this.total ? 1 : this.pager[this.props.page],
      };

      this.$emit('setPager', Object.assign(this.pager, temp));
      //  
      this.$nextTick(() => {
        this.$emit('query');
      });
    },
    //  
    onChangePage(page) {
      this.$emit(
        'setPager',
        Object.assign(this.pager, { [this.props.page]: page })
      );
      this.$emit('query');
    },
  },
};
script>