使用el-pagination实现分页

发表于

背景介绍

分页功能非常常见，当要展示的列表页项目很多的时候，全部加载到页面上会使页面卡顿，此时便需要对列表进行分页显示，分页又分为前端分页和后端分页。

  • 前端分页：一次性拉取全部数据，前端对所有数据进行分页显示。

    • 缺点：下载量大，显示慢，加载时用户体验不好。如果有即时性内容，就不能翻回来的时候更新了。
    • 优点：服务器压力请求少，换页时用户体验好。

  • 后端分页：后端对数据划分为若干页，前端每次只拉取一页数据并显示。

    • 缺点：每次换页都需要访问后端，加重服务器的压力，换页时显示慢。
    • 优点：不用一次性拉取所有数据，显示快，用户体验较好。

目前能够实现分页的框架有很多，这里只介绍Element-Ui的一个组件el-pagination，该组件在后端分页的基础上实现分页，需要后端提供返回数据总数和每一页数据的接口。

用法介绍

官方文档

1
2
3
4
5
6
7
<el-pagination
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-size="20"
    layout="total, prev, pager, next, jumper"
    :total="questionsNum"
></el-pagination>

以上代码可以显示分页组件，该组件只提供展示功能，当换页时会回调handleCurrentChange返回新的页码，利用新的页码向服务端请求该页数据即可实现分页。

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
export default {
  data() {
    return {
      questionsList: [],
      questionsNum: 0,
      currentPage: 1,
    };
  },
  mounted: function() {
    this.$http.get("/api/assignment/qa/" + this.currentPage).then(
      response => {
        this.questionsList = response.data.assignments;
        this.questionsNum = response.data.asgCount;
        console.log(response.data);
      },
      response => console.log(response)
    );
  },
  methods: {
    handleCurrentChange: function(val) {
      this.currentPage = val;
      this.$http.get("/api/assignment/qa/" + this.currentPage).then(
        response => {
          this.questionsList = response.data.assignments;
          this.questionsNum = response.data.asgCount;
          console.log(response.data);
        },
        response => console.log(response)
      );
      console.log(`当前页: ${val}`);
    }
  }
}

questionsList即当前页的数据，questionsNum即数据总数。

0%