分页组件使用

A.分页组件1---pagination.vue

<template>
  <el-pagination
    class="pagination"
    :current-page="pageNum"
    :page-sizes="[10, 20, 30]"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    :pager-count="5"
    prev-text="上一页"
    next-text="下一页"
    background
    v-bind="$attrs"
    v-on="$listeners"
  >
  </el-pagination>
</template>

<script>
export default {
  name: 'Pagination',
  props: {
    pageNum: {
      type: Number,
      default: 1,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
    total: {
      type: Number,
      default: 0,
    },
  },
}
</script>

<style lang="less" scoped>
.pagination {
  position: relative;
  padding: 12px 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  &::before {
    order: 3;
    flex-grow: 1;
  }
}
::v-deep {
  .el-pagination__total {
    order: 1;
  }
  .el-pagination__sizes {
    order: 1;
  }
  .el-pager {
    order: 5;
  }
  .el-pager .number {
    border-radius: 14px !important;
    // width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
  }
  .el-pager li.btn-quicknext,
  .el-pager li.btn-quickprev {
    border-radius: 14px !important;
  }
  .el-pagination__jump {
    order: 5;
  }
  .btn-prev {
    order: 5;
    border-radius: 14px !important;
    padding: 0 12px 0 8px !important;
    display: flex;
    align-items: center;
    &::before {
      content: '\e6de';
      font-family: element-icons !important;
      font-style: normal;
      font-weight: 400;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      vertical-align: baseline;
      margin-right: 10px;
    }
  }
  .btn-next {
    order: 5;
    display: flex;
    align-items: center;
    border-radius: 14px !important;
    padding: 0 8px 0 12px !important;
    &::after {
      font-family: element-icons !important;
      font-style: normal;
      font-weight: 400;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      vertical-align: baseline;
      content: '\e6e0';
      margin-left: 10px;
    }
  }
}
</style>

A.分页组件1---pagination组件使用

import pagination from '.....'

     <pagination
        v-if="pageState"
        :pageNum="pageNum"
        :pageSize="pageSize"
        :total="totalNum"
        @current-change="onPageChange"
        @size-change="onSizeChange"
      ></pagination>

    onPageChange(num) {
      this.pageNum = num
      this.刷新列表请求函数()
    },
    onSizeChange(size) {
      this.pageSize = size
      this.pageNum = 1
      this.刷新列表请求函数()
    },
     刷新列表请求函数(){}.then((res)=> {
        this.pageNum = res.pageNum
        this.pageSize = res.pageSize
        this.totalNum = res.total
})

B.小型分页组件2--pagination.vue

<template>
  <el-pagination
    class="pagination"
    small
    :pager-count="5"
    @current-change="handleCurrentChange"
    :current-page="pageNum"
    :page-size="pageSize"
    layout="prev, pager, next"
    :total="total"
  >
  </el-pagination>
</template>

<script>
export default {
  name: 'Pagination',
  props: {
    pageNum: {
      type: Number,
      default: 1,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
    total: {
      type: Number,
      default: 0,
    },
  },
  methods: {
    handleCurrentChange(val) {
      this.$emit('current-page', val)
    },
  },
}
</script>

<style lang="less" scoped>
.pagination {
  ::v-deep {
    button {
      width: 0px !important;
    }
    .btn-prev {
      padding-right: 0px;
    }
    .btn-next {
      padding-left: 0px;
    }
  }
}
</style>

B.分页组件2--pagination组件使用

      <pagination
        :pageNum="pageNum"
        :pageSize="pageSize"
        :total="total"
        @current-page="onPageChange"
      ></pagination>

    onPageChange(num) {
      this.pageNum = num;
      this.刷新列表请求函数()
    },
     刷新列表请求函数(){}.then((res)=> {
        this.pageNum = res.pageNum
        this.pageSize = res.pageSize
        this.totalNum = res.total
   })