使用 Element Plus 的 `el-pagination` 组件与 Vue 3 实现分页功能

---

前言

在现代 Web 开发中，分页功能是处理大量数据的常见需求。Element Plus 是一个基于 Vue 3 的 UI 组件库，提供了丰富的组件来简化开发流程。其中，el-pagination 组件是一个功能强大且易于使用的分页组件。本文将介绍如何在 Vue 3 项目中使用 el-pagination 实现分页功能。

1. 环境准备

首先，确保已经创建了一个 Vue 3 项目，并安装了 Element Plus 库。如果尚未安装，可以通过以下命令进行安装：

npm install element-plus

然后在项目的入口文件（通常是 main.js 或 main.ts）中引入 Element Plus：

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import App from './App.vue';

const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');

2. 使用 el-pagination 组件

el-pagination 组件提供了多种配置选项，可以灵活地满足不同的分页需求。以下是一个基本的使用示例：

<template>
  <div>
    <el-table :data="currentPageData" style="width: 100%">
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
      <el-table-column prop="address" label="Address"></el-table-column>
    </el-table>

    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const data = ref([
      { name: 'John', age: 25, address: 'New York' },
      { name: 'Jane', age: 30, address: 'Los Angeles' },
      // 更多数据...
    ]);

    const pageSize = ref(10);
    const currentPage = ref(1);

    const total = computed(() => data.value.length);

    const currentPageData = computed(() => {
      const start = (currentPage.value - 1) * pageSize.value;
      const end = start + pageSize.value;
      return data.value.slice(start, end);
    });

    const handleCurrentChange = (page) => {
      currentPage.value = page;
    };

    return {
      data,
      pageSize,
      currentPage,
      total,
      currentPageData,
      handleCurrentChange,
    };
  },
};
</script>

3. 代码解析

• el-table 组件：用于展示数据表格。

• el-pagination 组件：用于实现分页功能。

  • background：为分页按钮添加背景色。
  • layout：定义分页组件的布局，prev 表示上一页按钮，pager 表示页码按钮，next 表示下一页按钮。
  • total：总数据条数。
  • page-size：每页显示的数据条数。
  • @current-change：当前页码改变时触发的事件。

• currentPageData 计算属性：根据当前页码和每页显示的数据条数，计算出当前页需要显示的数据。

• handleCurrentChange 方法：当用户点击分页按钮时，更新当前页码。

4. 进一步优化

在实际项目中，数据通常是从后端 API 获取的。可以通过 axios 或其他 HTTP 客户端库来请求数据，并根据分页参数动态更新数据。以下是一个简单的示例：

import { ref, onMounted } from 'vue';
import axios from 'axios';

export default {
  setup() {
    const data = ref([]);
    const pageSize = ref(10);
    const currentPage = ref(1);
    const total = ref(0);

    const fetchData = async () => {
      const response = await axios.get('/api/data', {
        params: {
          page: currentPage.value,
          pageSize: pageSize.value,
        },
      });
      data.value = response.data.items;
      total.value = response.data.total;
    };

    onMounted(fetchData);

    const handleCurrentChange = (page) => {
      currentPage.value = page;
      fetchData();
    };

    return {
      data,
      pageSize,
      currentPage,
      total,
      handleCurrentChange,
    };
  },
};

5. 总结

通过 Element Plus 的 el-pagination 组件，可以轻松地在 Vue 3 项目中实现分页功能。本文介绍了基本的使用方法，并提供了从后端 API 获取数据的示例。希望这篇文章能帮助你更好地理解和使用 el-pagination 组件。

如果你有任何问题或建议，欢迎在评论区留言讨论！