Vue开发之封装分页组件与使用示例

1. 简介

在Vue项目中，我们常常需要使用到分页组件来进行数据的展示与分页处理。因此，我们可以封装一个分页组件，来减少重复的页面编写工作。本文将讲解如何封装一个Vue分页组件，并提供使用示例。

2. 封装分页组件

我们可以基于Element UI中的Pagination组件来封装我们自己的分页组件。首先，在components文件夹下创建Pagination.vue文件，然后在文件内部编写如下代码：

<template>
  <div class="pagination">
    <el-pagination
      @current-change="pageChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
    />
  </div>
</template>

<script>
export default {
  name: "Pagination",
  props: {
    currentPage: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 10
    },
    total: {
      type: Number,
      default: 0
    }
  },
  methods: {
    pageChange(page) {
      this.$emit("page-change", page);
    }
  }
};
</script>

<style>
.pagination {
  margin-top: 20px;
  text-align: right;
}
</style>

该分页组件中使用了Element UI中的Pagination组件，并且通过props接收传入的当前页码、每页显示条数和总条数等参数，同时将当前页码的变化事件通过自定义事件向父组件发送。需要注意的是，Pagination组件中的layout属性可以自定义显示组件的顺序以及是否隐藏某些组件。

3. 使用示例

下面将通过两个使用示例来展示分页组件的使用方法。

示例1：使用Pagination.vue组件

在需要使用分页组件的.vue文件中，可以通过如下方式引入和使用Pagination组件：

<template>
  <div>
    <!-- 显示数据列表 -->
    <table class="table" v-if="tableData.length">
      <!-- 省略表格头部 -->
      <tbody>
        <tr v-for="(item, index) in tableData" :key="index">
          <!-- 省略数据单元格 -->
        </tr>
      </tbody>
    </table>
    <!-- 显示分页组件 -->
    <pagination
      v-if="tableData.length"
      :current-page="page"
      :page-size="pageSize"
      :total="total"
      @page-change="handleChange"
    />
  </div>
</template>

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

export default {
  name: "Example1",
  components: { Pagination },
  data() {
    return {
      page: 1, // 当前页码
      pageSize: 10, // 每页显示条数
      total: 0, // 总条数
      tableData: [] // 数据列表
    };
  },
  created() {
    // 获取数据列表
    this.getDataList();
  },
  methods: {
    getDataList() {
      // 省略从后台获取数据列表的代码
      // 获取到的数据存储在tableData中
      this.tableData = [...];
      this.total = 100; // 设置总条数
    },
    handleChange(page) {
      this.page = page; // 修改当前页码
      this.getDataList(); // 重新获取数据列表
    }
  }
};
</script>

在该示例中，我们使用了Pagination.vue组件来展示分页组件，并且通过监听page-change事件来获取当前页码，并重新获取数据列表。

示例2：封装Pagination组件

为了减少重复的代码编写工作，我们可以在Vue项目全局注册Pagination组件，并在需要使用的.vue文件中直接使用。具体步骤如下：

1. 在src/main.js文件中引入Pagination组件

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

Vue.component('Pagination', Pagination)

1. 在需要使用的.vue文件中直接使用Pagination组件

<template>
  <div>
    <!-- 显示数据列表 -->
    <table class="table" v-if="tableData.length">
      <!-- 省略表格头部 -->
      <tbody>
        <tr v-for="(item, index) in tableData" :key="index">
          <!-- 省略数据单元格 -->
        </tr>
      </tbody>
    </table>
    <!-- 显示分页组件 -->
    <pagination
      v-if="tableData.length"
      :current-page="page"
      :page-size="pageSize"
      :total="total"
      @page-change="handleChange"
    />
  </div>
</template>

<script>
export default {
  name: "Example2",
  data() {
    return {
      page: 1, // 当前页码
      pageSize: 10, // 每页显示条数
      total: 0, // 总条数
      tableData: [] // 数据列表
    };
  },
  created() {
    // 获取数据列表
    this.getDataList();
  },
  methods: {
    getDataList() {
      // 省略从后台获取数据列表的代码
      // 获取到的数据存储在tableData中
      this.tableData = [...];
      this.total = 100; // 设置总条数
    },
    handleChange(page) {
      this.page = page; // 修改当前页码
      this.getDataList(); // 重新获取数据列表
    }
  }
};
</script>

通过封装和全局注册Pagination组件，我们可以在每个.vue文件中直接使用Pagination组件，减少代码编写工作，并提高代码的复用性。

4. 总结

本文讲解了如何使用Element UI的Pagination组件和Vue.js技术，来封装一个分页组件，并提供了两个使用示例。通过学习本文，相信大家已经掌握了封装分页组件的技巧和方法。