Package tab elemnt-ui

<!-- 分页查询
<pager-query :pager=[分页对象] @query=[列表查询方法] />
-->

<template>
  <div class="mod-paging-query fn-clear">
    <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="[10, 15, 30, 50]"
      @size-change="onChangeSize"
      @current-change="onChangePage">
    </el-pagination>
    <span v-if="refresh" class="btn-refresh fn-right" title="刷新" @click="$emit('query')">
      刷新
    </span>
  </div>
</template>

<script>
export default {
  name: 'PagingQuery',
  props: {
    pager: {
      type: Object,
      required: true,
    },
    refresh: {
      type: Boolean,
    },
    props: {
      type: Object,
      required: false,
      default: () => ({
        page: 'Page',    //The first few pages 
        rows: 'rows',    // display the number of 
        Total: 'COUNT', // number of total recording 
      }) 
    } 
  } 
  // set the binding parameters 
  Model: { 
    prop: 'pager' , 
    Event: 'setPager' , 
  }, 
  computed: { 
    Total () { 
      return  the this .pager [ the this .props.total] || 0 ; 
    }, 
    // detected the acquired data is empty 
    isEmptyList () {
       return Math.ceil ( the this .pager [ the this .props.total] /the this .pager [ 
      }the this .props.rows]) < the this .pager [ the this .props.page]; 
    }, 
  }, 
  Watch: { 
    Total () { 
      // there is a record, but not when the data acquired, re-request 
      IF ( the this .pager [ the this .props.page]>. 1 && the this .isEmptyList) {
         the this . $ EMIT ( 'setPager', Object.assign ( the this .pager, { 
          [ the this .props.page]: the this .pager [ the this .props.page] - . 1 , 
        })); 
        the this . $ EMIT ( 'Query' ); 
    }, 
  }, 
  Methods: {
    // page number of 
    onChangeSize (rows) { 
      const TEMP = { 
        [ the this .props.rows]: rows,
         // when displaying the total number of less than or equal to the number of reset pages 
        [ the this .props.page] : rows <= the this .total. 1:? the this .pager [ the this .props.page], 
      }; 

      the this $ EMIT ( 'setPager', Object.assign (. the this .pager, TEMP));
       // trigger component queries the parent request 
      the this $ EMIT ( 'Query'. ); 
    }, 
    // page 
    onChangePage (Page) {
       the this . $ EMIT ( 'setPager', Object.assign (this.pager, { [this.props.page]: page }));
      this.$emit('query');
    },
  },
};
</script>

Why should I type!