分页组件封装以及使用

第一步：在src/component下建立pagination.vue文件

<template>
  <div class="pageMachine">
    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
      v-model:currentPage="queryParam.PageIndex" :page-sizes="pageSizes" v-model:page-size="queryParam.PageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="TotalCount">
    </el-pagination>
  </div>
</template>
 
<script>
  import {
    reactive,
    toRefs
  } from 'vue'
  export default {
    name: 'pagination',
    props: {
      TotalCount: {
        type: [Number, String],
        default: 100
      },
       pageSizes:{
        type:Array,
        default:[20,50,100,300,500]
      },
        queryParam :{
         type:OBject      
      }
    },
    setup(props, {emit}) {
      //传递PageSize
      const handleSizeChange = (PageSize) => {
        emit('update:page-size', PageSize)
      }
      //   传递PagIndex
      const handleCurrentChange = (PageIndex) => {
        emit('update:current-page', PageIndex)
      }
      return {
        handleSizeChange,
        handleCurrentChange,
      }
    }
  }
 
</script>
 
<style>
 
</style>

第二步：以下代码在父组件中填补：

1.引入  分页组件

import pagination from '@/components/pagination.vue'

 2.在 components 中注册组件

components:{ pagination }

3.在 template 中使用组件 

<pagination
@update:current-page="handleCurrentChange"
@update:page-size="handleSizeChange"
:queryParam ="自定义分页"
:TotalCount ="自定义总数"
:pageSizes="自定义页总条数"
/>

 注释：

  <1>  非必传，第一页需要展示大量数据的时候（传）在 data 里定义变量 eg: pageSizes：[300,500,1000.....]
        :pageSizes="pageSizes"

    <2> handleCurrentChange/handleSizeChange
         是在父组件中定义的事件

      //分页组件事件
      handleSizeChange(PageSize) {
          this.自定义分页.PageSize = PageSize;
          //----获取列表数据
          this.GetData();
      },
      handleCurrentChange(PageIndex) {
          this.自定义分页.PageIndex = PageIndex;
          //----获取列表数据
          this.GetData();
      },

    <3>当没有数据的时候可以让分页组件隐藏
         v-if="响应得接口数据.TotalCount"