使用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 函数更新当前页。
相关推荐
京东零售技术几秒前
京东小程序JS API仓颉改造实践
前端
奋飛10 分钟前
TypeScript系列:第六篇 - 编写高质量的TS类型
javascript·typescript·ts·declare·.d.ts
老A技术联盟10 分钟前
从小白入门,基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序
风铃喵游14 分钟前
构建引擎: 打造小程序编译器
前端·小程序·架构
sunbyte18 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock(主题时钟)
前端·javascript·css·vue.js·前端框架·tailwindcss
小飞悟27 分钟前
🎯 什么是模块化?CommonJS 和 ES6 Modules 到底有什么区别?小白也能看懂
前端·javascript·设计
浏览器API调用工程师_Taylor27 分钟前
AOP魔法:一招实现登录弹窗的全局拦截与动态处理
前端·javascript·vue.js
FogLetter29 分钟前
初识图片懒加载:让网页像"懒人"一样聪明加载
前端·javascript
微客鸟窝30 分钟前
一文搞懂NVM管理Node.js:从安装到实战全攻略
前端
归于尽30 分钟前
Cookie、Session、JWT 的前世今生
前端