Ant Design Vue Pagination分页组件的封装与使用

Ant Design Vue是基于Vue.js框架的UI组件库，提供了一系列优美且易于使用的组件，包括表格、表单、菜单栏、分页器等。其中，分页器Pagination是一个常用的组件，用于分页展示数据列表，本文将介绍Ant Design Vue Pagination分页组件的封装与使用。

安装Ant Design Vue

Ant Design Vue的安装非常简单，只需在项目中引入对应的库即可，具体步骤如下。

1. 安装Ant Design Vue

npm install ant-design-vue --save

1. 在项目中引入Ant Design Vue的样式文件

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/ant-design-vue/1.7.2/antd.min.css" />

1. 在项目中引入Ant Design Vue的脚本文件

<script src="https://cdn.bootcdn.net/ajax/libs/ant-design-vue/1.7.2/antd.min.js"></script>

封装Ant Design Vue Pagination组件

Ant Design Vue Pagination组件的基本使用格式如下：

<a-pagination :current="current" :total="50" @change="getCurrent" />

其中，:current表示当前页码，:total表示总页数，@change表示页码改变触发的事件。为了方便使用，我们可以将分页组件封装成一个独立的组件，具体步骤如下。

1. 创建Pagination.vue文件，定义Pagination组件：

<template>
  <a-pagination
    :current="current"
    :total="total"
    :defaultPageSize="defaultPageSize"
    showSizeChanger
    showQuickJumper
    @change="handleChange"
    @showSizeChange="handleSizeChange"
  />
</template>

<script>
export default {
  name: "Pagination",
  props: {
    current: {
      type: Number,
      default: 1
    },
    total: {
      type: Number,
      default: 100
    },
    defaultPageSize: {
      type: Number,
      default: 10
    }
  },
  methods: {
    handleChange(currentPage) {
      this.$emit("change", currentPage);
    },
    handleSizeChange(currentPage, pageSize) {
      this.$emit("size-change", currentPage, pageSize);
    }
  }
};
</script>

1. 在其他组件中引用Pagination组件：

<Pagination ref="myPagination"
            :current="currentPage"
            :total="total"
            :default-page-size="defaultPageSize"
            @change="handleChangePage"
            @size-change="handleSizeChange"/>

在上述示例中，我们通过ref关键字引入Pagination组件，并传递了当前页码、总页码、默认每页条目数、页码改变触发的事件和每页条目数改变触发的事件。

使用示例

接下来，我们提供两个示例，分别是：

• 简单列表数据的分页展示
• 动态获取数据的分页展示

示例一：简单列表数据的分页展示

上述封装的Pagination组件适用于开发中的多种情况，示例一中我们通过构造简单的数据项，对其进行分页展示。

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>年龄</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in dataList.slice((currentPage - 1) * defaultPageSize, currentPage * defaultPageSize)" :key="index">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
        </tr>
      </tbody>
    </table>
    <Pagination ref="myPagination"
                :current="currentPage"
                :total="total"
                :default-page-size="defaultPageSize"
                @change="handleChangePage"
                @size-change="handleSizeChange"/>
  </div>
</template>

<script>
import Pagination from "./Pagination.vue";

export default {
  name: "PaginationExample",
  components: { Pagination },
  data() {
    return {
      dataList: [
        { id: 1, name: "张三", age: 18 },
        { id: 2, name: "李四", age: 20 },
        { id: 3, name: "王五", age: 22 },
        { id: 4, name: "赵六", age: 24 },
        { id: 5, name: "孙七", age: 26 },
        { id: 6, name: "周八", age: 28 },
        { id: 7, name: "钱九", age: 30 },
        { id: 8, name: "吴十", age: 32 }
      ],
      currentPage: 1,
      total: 8,
      defaultPageSize: 3
    };
  },
  methods: {
    handleChangePage(currentPage) {
      this.currentPage = currentPage;
    },
    handleSizeChange(currentPage, pageSize) {
      console.log("current:", currentPage, "pageSize:", pageSize);
    }
  }
};
</script>

在上述代码中，我们定义了一个简单的静态数组dataList，其中包含了8个对象，每个对象包含3个键值对。通过v-for指令循环遍历输出表格行，并设置每页默认展示3条数据。同时，当Pagination中的页码发生改变时，触发相应的事件，改变currentPage的值，以此来达到分页的效果。

示例二：动态获取数据的分页展示

示例二中，我们通过请求API获取数据，并进行分页展示。

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>年龄</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in dataList" :key="index">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
        </tr>
      </tbody>
    </table>
    <Pagination ref="myPagination"
                :current="currentPage"
                :total="total"
                :default-page-size="defaultPageSize"
                @change="handleChangePage"
                @size-change="handleSizeChange"/>
  </div>
</template>

<script>
import Pagination from "./Pagination.vue";

export default {
  name: "PaginationExample",
  components: { Pagination },
  data() {
    return {
      dataList: [],
      currentPage: 1,
      total: 0,
      defaultPageSize: 5
    };
  },
  created() {
    this.getDataList();
  },
  methods: {
    async getDataList() {
      const res = await this.$axios.get("/api/list");
      this.dataList = res.data.list;
      this.total = res.data.total;
    },
    handleChangePage(currentPage) {
      this.currentPage = currentPage;
      this.getDataList();
    },
    handleSizeChange(currentPage, pageSize) {
      this.currentPage = currentPage;
      this.defaultPageSize = pageSize;
      this.getDataList();
    }
  }
};
</script>

在上述代码中，我们通过created钩子函数，在组件创建完毕后即获取页面初始数据。通过请求API获取数据，将获取结果赋值给dataList，同时获取total用于计算总页数。当Pagination中的页码或每页展示条目数发生改变时，触发相应的事件，改变currentPage和defaultPageSize的值，并重新获取数据，以此来达到分页展示数据的目的。

总结

本文介绍了Ant Design Vue Pagination分页组件的封装与使用，通过对Pagination组件的封装，极大地方便了分页组件的调用。实际开发中，我们常常用到分页器，通过本次的学习，您可以快速上手Ant Design Vue提供的Pagination组件，并尝试将其应用到实际项目中。