使用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 函数更新当前页。
相关推荐
李鸿耀6 分钟前
仅用几行 CSS,实现优雅的渐变边框效果
前端
码事漫谈26 分钟前
解决 Anki 启动器下载错误的完整指南
前端
im_AMBER1 小时前
Web 开发 27
前端·javascript·笔记·后端·学习·web
蓝胖子的多啦A梦1 小时前
低版本Chrome导致弹框无法滚动的解决方案
前端·css·html·chrome浏览器·版本不同造成问题·弹框页面无法滚动
玩代码1 小时前
vue项目安装chromedriver超时解决办法
前端·javascript·vue.js
訾博ZiBo1 小时前
React 状态管理中的循环更新陷阱与解决方案
前端
StarPrayers.2 小时前
旅行商问题(TSP)(2)(heuristics.py)(TSP 的两种贪心启发式算法实现)
前端·人工智能·python·算法·pycharm·启发式算法
计算机毕业设计木哥2 小时前
计算机毕业设计选题推荐:基于SpringBoot和Vue的快递物流仓库管理系统【源码+文档+调试】
java·vue.js·spring boot·后端·课程设计
一壶浊酒..2 小时前
ajax局部更新
前端·ajax·okhttp
苏打水com2 小时前
JavaScript 面试题标准答案模板(对应前文核心考点)
javascript·面试