vue可以直接使用的一个分页组件

 index.vue

<template>
  <div class="pageSize">
    <div class="paginaTion">
      <el-pagination
        background
        class="mt-4"
        layout="prev, pager, next"
        :current-page="props.data.pageIndex"
        :page-size="props.data.pageSize"
        :total="total"
        @current-change="handleChange"
      />
      <div class="endPage">
        <el-button @click="handleLast">尾页</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
const props = defineProps({
  total: Number,
  getData: Function,
  data: Object,
});
const router = useRouter();
const route = useRoute();
const handleChange = (curr) => {
  window.scrollTo({
    top: 0,
    behavior: "smooth",
  }); //点击分页切换滑动到tab栏
  props.data.pageIndex = curr;
  props.getData(props.data);
};

const handleLast = () => {
  window.scrollTo({
    top: 0,
    behavior: "smooth",
  }); //点击尾页滑动到tab栏
  const maxPage = Math.ceil(props.total / props.data.pageSize);
  if (props.data.pageIndex !== maxPage) {
    props.data.pageIndex = maxPage;
    props.getData(props.data);
  }
};
onMounted(() => {
  handleChange(1);
});
</script>

<style lang="less" scoped>
.pageSize {
  width: 100%;
  min-width: 100px;
  height: 76px;
  margin: 0 auto;
  .paginaTion {
    margin: 0 auto;
    height: 40px;
    display: flex;
    justify-content: center;
    :deep(.el-button) {
      padding: 8px;
      background-color: #f7f8fb;
    }
    :deep(.btn-prev) {
      border: 1px solid #e4e4e4;
      background-color: #f7f8fb;
    }
    :deep(.btn-next) {
      border: 1px solid #e4e4e4;
      background-color: #f7f8fb;
    }
    :deep(.el-pager) {
      .number {
        border: 1px solid #e4e4e4;
        background-color: #f7f8fb;
      }
    }
    :deep(.is-active) {
      background-color: #0762cb !important;
    }
    .endPage {
      margin: 5px 0 0 8px;
    }
  }
}
:deep(.el-pagination) {
  --el-pagination-hover-color: #0762cb;
}
.el-button:focus,
.el-button:hover {
  border-color: #0762cb;
  background-color: #0762cb;
}
.endPage:hover {
  .el-button {
    color: #0762cb;
  }
}
</style>

在页面中使用：

1.引入

import paginaTions from "@/components/paginaTions/index.vue";

        <paginaTions
          :total="total"
          :getData="getData"
          :data="data"
          v-show="newsItemData != ''"
        ></paginaTions>

2.传入三个参数

  2.1 初始的total是0，代表数据的条数

const total = ref(0);

  2.2 getData是触发页数改变的方法，onMounted阶段就需要执行。

const getData = (data) => {
  getNewsInfo(data).then((res) => {
    total.value = res.data.totalCount;
    newsItemData.value = res.data.currentPageDatas;
  });
};

onMounted(() => {
  getData(data);
});

 2.3 data是需要接口传的参数，其中的  pageIndex和pageSize是分页组件需要的参数。

const data = reactive({
  pageIndex: 1,
  pageSize: 6,
  title: "",
  beginTime: "",
  endTime: "",
  newsType: "",
});