vue前端分页,后端未做分页将所有数据统一返回,前端基于Vue和Elm组件库的分页实现(纯前端分页)_elementui 分页无效 一次性渲染全部数据

1. 先上效果图.(后端接口请求一次,返回所有(1000条为例)数据,前端拿到所有数据处理分页).
   

2. 使用情形: A.正常情况下,前后端分离的项目,对于表格类数据多的情况,都是由前端传当前页的页码和当前页的容量大小给后台,后台拿到这些字段进行分页返回数据(即前端动一页就发送一次请求拿到当前页的数据,这部分应用太过简单,这里不再累述). B.特殊情形下,后台不处理分页,只会在请求的时候一下将所有数据一起返回,这时候就需要前端同学自己处理分页了(本文针对的就是这种情形下的一种处理方式,仅供参考,大佬勿喷).

3. 主体思路: 前端发送请求拿到所有数据 → 对该数据进行处理 → 操作分页组件.

4. 关键代码:

<template>
  <div class="home">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="ID" width="180"></el-table-column>
      <el-table-column prop="phone" label="电话" width="180"></el-table-column>
      <el-table-column prop="userName" label="用户名"></el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[20, 30, 50, 100]"
      :page-size="20"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import * as API from "@/api/pageRequest/home.js";

export default {
  name: "Home",
  data() {
    return {
      currentPage: 1, //当前页
      total: null, //总数
      list: [], //后台返回的所有结果
      tableData: [], //当前页码的表格数据
      pageSize: 20, //当前页容量
    };
  },
  methods: {
    handleSizeChange(val) {       //切换每页条数容量
      this.currentPage = 1;
      this.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {    //切换当前页
      this.currentPage = val;
      this.getList();
    },
    getList() {    //自己封装的axios请求,获取数据
      API.getList().then((res) => {
        this.list = res.data.data;    //总数组
        this.total = res.data.data.length;      //总条数
        this.tableData = this.getNeedArr(this.list,this.pageSize)[this.currentPage - 1]  //当前页的表格数据
        console.log(this.tableData);
      });
    },
    getNeedArr(array, size) {       //获取所需指定长度分割的数组;参数1为用于分割的总数组,参数2为分割数组后每个小数组的长度
      const length = array.length;
      //判断不是数组，或者size没有设置，size小于1，就返回空数组
      if (!length || !size || size < 1) {
        return [];
      }
      //核心部分
      let index = 0; //用来表示切割元素的范围start
      let resIndex = 0; //用来递增表示输出数组的下标

      //根据length和size算出输出数组的长度，并且创建它。
      let result = new Array(Math.ceil(length / size));
      //进行循环
      while (index < length) {
        //循环过程中设置result[0]和result[1]的值。该值根据array.slice切割得到。
        result[resIndex++] = array.slice(index, (index += size));
      }
      //输出新数组
      return result;
    },
  },
  created() {
    this.getList();
  },
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

5. 核心代码(对原数据的数组进行切割成自己想要的小数组):

getNeedArr(array, size) {       //获取所需指定长度分割的数组;参数1为用于分割的总数组,参数2为分割数组后每个小数组的长度
      const length = array.length;
      //判断不是数组，或者size没有设置，size小于1，就返回空数组
      if (!length || !size || size < 1) {
        return [];
      }
      //核心部分
      let index = 0; //用来表示切割元素的范围start
      let resIndex = 0; //用来递增表示输出数组的下标

      //根据length和size算出输出数组的长度，并且创建它。
      let result = new Array(Math.ceil(length / size));
      //进行循环
      while (index < length) {
        //循环过程中设置result[0]和result[1]的值。该值根据array.slice切割得到。
        result[resIndex++] = array.slice(index, (index += size));
      }
      //输出新数组
      return result;
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

6. 结语: 以上就是基于Vue和Elm组件库纯前端处理分页的一种简易办法.当然方法很多,仅供参考.友情链接Elm官网-分页