ruoyi+vue2的前端Demo（不分页、前端分页、后端分页）

目录

• 前言
• [1. 不分页](#1. 不分页)
• [2. 前端分页](#2. 前端分页)
• [3. 后端分页](#3. 后端分页)

前言

Java基本知识：

1. java框架 零基础从入门到精通的学习路线 附开源项目面经等（超全）
2. 【Java项目】实战CRUD的功能整理（持续更新）

本文主要是通过实战中进行总结！

主要的分页是基于ruoyi这一套去阐述

<pagination
  v-show="total > 0"
  :total="total"
  :page.sync="pageNum"
  :limit.sync="pageSize"
  @pagination="handlePageChange"
/>

1. 不分页

对应将所有数据都给丢给一个数组，后续一一遍历

<template>
  <div class="app-container">
    <el-card>
      <h3>Demo 1：不分页（一次性加载所有数据）</h3>

      <el-table
        :data="tableData"
        border
        stripe
        size="mini"
      >
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="age" label="年龄" />
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "NoPaginationDemo",
  data() {
    return {
      tableData: []
    };
  },
  created() {
    // 模拟后端一次性返回所有数据
    this.tableData = Array.from({ length: 20 }).map((_, i) => ({
      id: i + 1,
      name: "用户-" + (i + 1),
      age: 20 + (i % 10)
    }));
  }
};
</script>

2. 前端分页

最主要的区别在于 ，后端拿到所有数据，前端点击第二页的时候不是触发后端的请求，而是将下一页在前端进行切割！

<template>
  <div class="app-container">
    <el-card>
      <h3>Demo 2：前端分页（数据只请求一次）</h3>

      <el-table
        :data="pageData"
        border
        stripe
        size="mini"
      >
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="age" label="年龄" />
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="pageNum"
        :limit.sync="pageSize"
        @pagination="handlePageChange"
      />
    </el-card>
  </div>
</template>

<script>
export default {
  name: "FrontendPaginationDemo",
  data() {
    return {
      allData: [],   // 后端返回的全部数据
      pageData: [],  // 当前页数据
      total: 0,
      pageNum: 1,
      pageSize: 5
    };
  },
  created() {
    // 模拟后端一次性返回
    this.allData = Array.from({ length: 23 }).map((_, i) => ({
      id: i + 1,
      name: "用户-" + (i + 1),
      age: 18 + (i % 15)
    }));
    this.total = this.allData.length;
    this.refreshPage();
  },
  methods: {
    refreshPage() {
      const start = (this.pageNum - 1) * this.pageSize;
      const end = start + this.pageSize;
      this.pageData = this.allData.slice(start, end);
    },
    handlePageChange() {
      this.refreshPage();
    }
  }
};
</script>

3. 后端分页

知道分多少页，对应每一页都是请求后端拿到数据！

<template>
  <div class="app-container">
    <el-card>
      <h3>Demo 3：后端分页（每次翻页请求接口）</h3>

      <el-table
        :data="tableData"
        border
        stripe
        size="mini"
        v-loading="loading"
      >
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="age" label="年龄" />
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
  </div>
</template>

<script>
export default {
  name: "BackendPaginationDemo",
  data() {
    return {
      loading: false,
      tableData: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 5
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;

      // ===== 模拟后端分页 =====
      const allData = Array.from({ length: 42 }).map((_, i) => ({
        id: i + 1,
        name: "用户-" + (i + 1),
        age: 20 + (i % 10)
      }));

      const { pageNum, pageSize } = this.queryParams;
      const start = (pageNum - 1) * pageSize;
      const end = start + pageSize;

      setTimeout(() => {
        this.tableData = allData.slice(start, end);
        this.total = allData.length;
        this.loading = false;
      }, 300);
    }
  }
};
</script>