vue3表格分页的二次封装

Vue3中的表格分页通常会涉及到组件化设计，特别是当需要处理复杂的分页逻辑、状态管理和数据获取时。二次封装主要是为了提高复用性和易维护性，将基础的分页功能从项目的核心业务代码中抽离出来，形成一个独立的可配置组件。

以下是一个简化的二次封装示例：

1. 首先，创建一个名为`PaginationTable.vue`的组件，它接受以下属性：
- `dataList`: 当前页面的数据列表
- `totalCount`: 总记录数
- `changePage`: 用于触发分页改变的回调函数

<template>
  <div>
    <table :data="filteredData" />
    <pagination
      :current-page="currentPage"
      :total-pages=" totalPages "
      @page-change="handlePageChange"
    ></pagination>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import Pagination from './Pagination.vue'; // 自己实现的分页组件

export default defineComponent({
  components: {
    Pagination,
  },
  setup(props) {
    const filteredData = props.dataList.slice(
      (props.currentPage - 1) * props.pageSize,
      props.currentPage * props.pageSize
    );

    // ...其他计算和状态管理（如总页数）

    function handlePageChange(page) {
      props.changePage(page);
    }

    return {
      filteredData,
      totalPages: Math.ceil(props.totalCount / props.pageSize),
      handlePageChange,
    };
  },
});
</script>

2. 自定义一个`Pagination.vue`组件，负责展示分页控件并传递当前页信息给外部组件：

<template>
  <div class="pagination">
    <button v-for="(page, index) in pageNumbers" :key="index" @click="onPageClick(page)">
      {{ page }}
    </button>
  </div>
</template>

<script>
export default {
  props: {
    currentPage: {
      type: Number,
      required: true,
    },
    totalPages: {
      type: Number,
      required: true,
    },
  },
  methods: {
    onPageClick(page) {
      this.$emit('page-change', page);
    },
  },
};
</script>