element-ui实现分页——前端代码

最近做项目的时候，使用了element-ui的分页功能，简单记录一下前端代码是如何实现的：

目标效果：

• 在element-ui组件中选择分页组件，找到完整功能的代码片段并复制
  
  复制代码：

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
1
2
3
4
5
6
7
8
9

把这段代码放在合适的位置，并修改其中的属性和事件处理函数，使之符合自己的预期：

把该组件的属性和自己data中的数据对应，这里对应的是queryInfo中的值
这些属性的作用是：

• total：总条目数 对应数据中的total
• page-size： 每页显示条数 对应数据中的queryInfo的pagesize
• page-sizes：每页显示个数选择器的选项设置，这里可以选择每页1、2、5、10页
• current-page： 当前页数 对应数据中的queryInfo的pagenum
• layout：选择分页拦中要展示哪些东西

重点是修改两个事件处理函数：

1. @current-change：当前页面发生变化时会触发。我们定义一个函数来实现：

// 监听页码改变的事件
    handleCurrentChange(newPage){
      this.queryInfo.pagenum = newPage
      this.getUserList()   
    }
1
2
3
4
5

2. @size-change:选择每页显示条数时会触发
   
   我们也书写一个函数：得到的参数就是每页显示几条数据的新值，我们把它给data对应的数据重新赋值，并再次调用请求后端接口的方法

// 监听pagesize改变的事件
    handleSizeChange(newSize){
      this.queryInfo.pagesize = newSize
      this.getUserList()
    }
1
2
3
4
5

可见我们获得新的页码或者每页显示条数的时候，都要重新执行访问后台接口的那个方法 getUserLIst
因为此时的查询条件已经变了，我们要根据新的分页参数重新向后台请求数据：

async getUserList() { // 请求后台数据
     const { data: res } = await this.$http.get('users', {
       params: this.queryInfo
     })
     if ( res.meta.status !== 200) {
     return this.$message.error('获取用户列表失败')
   }
   this.userlist =res.data.users
   this.total = res.data.total
   }
1
2
3
4
5
6
7
8
9
10

这是该后端接口的文档：

1.3.1. 用户数据列表

• 请求路径：users
• 请求方法：get
• 请求参数

• 响应参数

• 响应数据

{
    "data": {
        "totalpage": 5,
        "pagenum": 4,
        "users": [
            {
                "id": 25,
                "username": "tige117",
                "mobile": "18616358651",
                "type": 1,
                "email": "tige112@163.com",
                "create_time": "2017-11-09T20:36:26.000Z",
                "mg_state": true, // 当前用户的状态
                "role_name": "炒鸡管理员"
            }
        ]
    },
    "meta": {
        "msg": "获取成功",
        "status": 200
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22