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

레코드를 업데이트하려면 다음과 같이 하십시오.

현재 데이터를 삭제해도 이전 페이지로 돌아가지 않는 문제가 해결되었습니다.

호출 방식을 개선했고 페이지 대상과 귀속 조회 이벤트만 전송해야 한다.

모델을 통해 페이지 업데이트 대상으로 변경되었습니다.

IE에서 페이지 번호 리턴을 입력하면 전체 페이지 새로 고침 문제가 발생

호출 방법:

<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>

paging-query.vue

<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>