TPage Design

This component is right ElPagination Secondary packaging of , The component and ElPagination The same can be Controlled and uncontrolled

Let's take a look first ElementUI Medium pagination Use ：

<template>
  <div>
    <div class="block">
    <span class="demonstration"> Full functionality </span>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :total= "40" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
  </div>
</template>
<script> export default {
       data() {
       return {
       pageIndex: 1, pageSize: 20 } }, methods: {
       handlePageChange(pageInfo) {
       console.log(pageInfo) //  Here is  currentKey  Value  this.pageIndex = pageInfo.pageIndex; this.pageSize = pageInfo.pageSize; }, handleSizeChange(val) {
       console.log(` each page  ${
        val}  strip `); }, handleCurrentChange(val) {
       console.log(` The current page : ${
        val}`); } } } </script>

You can see ElPagination The binding size-change and current-change To monitor changes in the number of pages . In order to facilitate future development , We want to listen by binding only one method . Let's see how to implement this function .

First, define the to be passed in props

  props: {
    
    currentPage: {
    
      type: Number,
      default: 1
    },
    pageSize: {
    
      type: Number,
      default: 10
    },
    pageSizes: {
    
      type: Array,
      default: () => [10, 20, 30, 40]
    },
    layout: {
    
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    },
    align: {
    
      type: String,
      default: 'left'
    },
    resetIndex: {
    
      type: Boolean,
      default: false
    },

    //  Used when a composite event is triggered  emit  The value of the  key
    sizeKey: {
    
      type: String,
      default: 'pageSize'
    },
    currentKey: {
    
      type: String,
      default: 'currentPage'
    }
  },
  data() {
    
    return {
    
      innerPageIndex: 1,
      innerPageSize: 0
    }
  },

meanwhile , We need to understand pageSize,currentPage,pageSizes,resetIndex And so on , Used to trigger internal innerPageIndex and innerPageSize Changes .

  watch: {
    
    pageSize: {
    
      immediate: true,
      handler() {
    
        this.innerPageSize = this.pageSize;
      }
    },

    currentPage: {
    
      immediate: true,
      handler() {
    
        this.innerPageIndex = this.currentPage;
      }
    },

    pageSizes: {
    
      immediate: true,
      handler(newVal) {
    
        if (Array.isArray(newVal)) {
    
          this.innerPageSize = newVal.includes(this.pageSize) ? this.pageSize : this.pageSizes[0];
        }
      }
    },

    resetIndex(newVal) {
    
      if (!newVal) {
    
        return;
      }

      this.handleCurrentPageChange(1);
      this.$emit('update:reset-index', false);
    }
  }

stay created The stage of , We trigger once page-change, Used to get paging information .

created() {
    
  this.emitPageChange();
}
methods: {
    
    //  Anti shake processing , This event is triggered only once when two events are triggered at the same time 
    emitPageChange: debounce(function () {
    
      const {
     sizeKey, currentKey, innerPageIndex, innerPageSize } = this;
      this.$emit('page-change', {
     [sizeKey]: innerPageSize, [currentKey]: innerPageIndex });
    })
}

stay render when , take listeners Mount

  render(h) {
    
    //  Processing monitor 
    const listeners = this.resolveListeners();
    //  Handle props
    const props = this.resolveProps()
    //  Handle slot
    const children = this.resolveChildren();

    return h(
      'ElPagination',
      {
    
        props: {
     ...props },
        on: {
     ...listeners },
        style: {
    
          textAlign: this.align
        }
      },
      children
    );
  },

  methods: {
    
    resolveListeners() {
    
      const listeners = {
    
        'size-change': this.handlePageSizeChange,
        'current-change': this.handleCurrentPageChange
      };
      //  When listening to the front and back pages is added 
      this.$listeners['prev-click'] && (listeners['prev-click'] = this.$listeners['prev-click']);
      this.$listeners['next-click'] && (listeners['next-click'] = this.$listeners['next-click']);
      return listeners;
    },
    //  Keep the original  size-change、current-change  event 
    //  Add a merge event of two events , This event prevents switching on the last page through anti shake processing  pageSize  Causes two requests to be initiated 
    handlePageSizeChange(pageSize) {
    
      this.innerPageSize = pageSize;
      this.$emit('size-change', pageSize);
      this.emitPageChange();
    },

    handleCurrentPageChange(currentPage) {
    
      this.innerPageIndex = currentPage;
      this.$emit('current-change', currentPage);
      this.emitPageChange();
    },
    resolveProps() {
    
      const props = {
    
        ...this.$attrs,
        pageSizes: this.pageSizes,
        pageSize: this.innerPageSize,
        currentPage: this.innerPageIndex,
        layout: this.layout
      }
      return props;
    },
  }
  

props

prop	type	Whether it is necessary to transmit	describe
align	‘left’ | ‘center’ | ‘right’	no , Default ‘left’	Paginated content such as and display , text-align
resetIndex	Boolean	no , Default false	Reset page number to 1, Need to use .sync Modifier
sizeKey	String	no , Default ‘pageSize’	page-change Event triggered ,size Of related items key value
currentKey	String	no , Default ‘currentPage’	page-change Event triggered ,index Of related items key value
pageSizes	Array	no , Default [10, 20, 30, 40]	ElPagination Of pageSizes prop

resetIndex： Identify whether the component needs to reset the page number to 1, Generally used for searching , The component will try to reset the prop, So we need to use .sync The modifier modifies the prop, Trigger after resetting the page number current-change、page-change event

In addition to the above props, This component directly converts all attrs Pass to ElPagination, So it theoretically supports all ElPagination Component's props, Reference resources ElementUI file

slots

Support ElPagination Default slot for , Usage and ElPagination Slot consistency

events

Event name	Parameters	describe
page-change	{ [sizeKey]: pageSIze, [currentKey]: currentPage }	Amalgamated size-change、current-change event , See below for a detailed description
size-change	Number of entries per page	pageSize Triggered on change
current-change	The current page	currentPage Triggered on change
prev-click	The current page	Click the previous page to change the page number
next-click	The current page	Click next page to change the page number

page-change： Amalgamated size-change、current-change Parameters of , Anti shake treatment has been done , Trigger at the same time size-change、current-change This event will only be triggered once , It is recommended to use this event to get paging information , This event will be triggered once when the component is created

Example

Controlled

<template>
  <d-page 
  	:current-page="pageIndex"
    :page-size="pageSize"
    align="center"
    current-key="pageIndex"
    @page-change="handlePageChange"
  />
</template>
<script>
  export default {
    data() {
      return {
        pageIndex: 1,
        pageSize: 20
      }
    },
    methods: {
      handlePageChange(pageInfo) {
        //  Here is  currentKey  Value 
        this.pageIndex = pageInfo.pageIndex;
        this.pageSize = pageInfo.pageSize;
      }
    }
  }
</script>

Uncontrolled

<template>
  <d-page 
    align="center"
    current-key="pageIndex"
    :reset-index.sync="shouldResetIndex"
    @page-change="handlePageChange"
  />
  
  <el-button @click="resetIndex"> Reset page number </el-button>
</template>
<script>
  export default {
    data() {
      return {
        pageInfo: null,
        shouldResetIndex: false
      }
    },
    methods: {
      handlePageChange(pageInfo) {
        this.pageInfo = pageInfo;
      },
      resetIndex() {
        this.shouldResetIndex = true;
      }
    }
  }
</script>