使用elementplus中的分页器,后端一次性返100条数据,前端自己做分页处理,vue3写法

安装依赖

确保你已经安装了 Vue 3 和 Element Plus:

javascript 复制代码
npm install vue@next element-plus

组件

javascript 复制代码
<template>
  <div>
    <el-table :data="currentPageData" style="width: 100%">
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="age" label="年龄" />
      <el-table-column prop="email" label="邮箱" />
    </el-table>

    <el-pagination
      v-model:current-page="currentPage"
      :page-size="pageSize"
      :total="totalData"
      @current-change="handlePageChange"
      layout="total, prev, pager, next, jumper"
    />
  </div>
</template>

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

export default {
  setup() {
    const data = ref([]); // 存放从后端获取的数据
    const currentPage = ref(1);
    const pageSize = ref(10); // 每页显示的条目数

    // 假设这里是从后端获取的数据
    const totalData = 100; // 总数据条数
    const fetchData = async () => {
      // 模拟异步请求
      const response = await new Promise((resolve) =>
        setTimeout(() => {
          // 生成模拟数据
          const data = Array.from({ length: totalData }, (_, index) => ({
            name: `姓名 ${index + 1}`,
            age: Math.floor(Math.random() * 40) + 20,
            email: `example${index + 1}@domain.com`,
          }));
          resolve(data);
        }, 1000)
      );
      data.value = response;
    };

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

    const handlePageChange = (newPage) => {
      currentPage.value = newPage;
    };

    // 在组件挂载时获取数据
    fetchData();

    return {
      data,
      currentPage,
      pageSize,
      totalData,
      currentPageData,
      handlePageChange,
    };
  },
};
</script>

<style>
/* 添加一些样式 */
</style>

说明

  • 数据获取:fetchData 函数模拟了一个异步请求,获取 100 条数据。
  • 分页逻辑:通过 computed 计算属性 currentPageData,根据当前页码和每页大小计算出当前显示的数据。
  • Element Plus 分页器:使用 el-pagination 组件实现分页功能,通过 v-model:current-page 绑定当前页,并在页码变化时调用 handlePageChange 函数更新当前页。
相关推荐
然我17 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子22 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹26 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器32 分钟前
指定阿里镜像原理
前端
枷锁—sha37 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha38 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜1 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
DanB241 小时前
html复习
javascript·microsoft·html
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux