Vue--element实现会员管理分页

Vue--element实现会员管理分页

分页

当数据过多的时候，我们肯定是要实现分页效果的，分页效果在每个列表页都应该存在

我们后台的接口为

其中的page为页码，size为每页显示的条数。请求方法为post

接口数据格式为

{ "code": "2001", "success": true, "msg": "", "total": 26, "data": [ { "id": 28, "update_time": "2020-06-11 22:55:09", "create_time": "2020-06-11 22:55:09", "member_card": "123", "member_name": "114", "member_birthday": "1992-02-12", "phone_number": 17693638363, "card_money": 234234, "Available_integral": 342342, "pay_type": 1, "member_address": "甘肃省" }, { "id": 27, "update_time": "2020-06-11 22:55:00", "create_time": "2020-06-11 22:55:00", "member_card": "123", "member_name": "113", "member_birthday": "1992-02-12", "phone_number": 17693638363, "card_money": 234234, "Available_integral": 342342, "pay_type": 1, "member_address": "甘肃省" } ]}

其中的total为总条数

前面我们在 src/api/member.js 里写的没有分页的功能，重新更改。加上分页的参数，代码如下

// 会员管理接口import request from '@/utils/request'import BASE_URL from '@/utils/common'export default { // 获取会员列表数据,page 当前页码。size，每页查询条数 getList(token,size,page){ return request({ url: BASE_URL +`/api/manage/member/search?page=${page}&size=${size}`, // 反单引号'post', headers:{ "Authorization":"JWT "+token } }) }, }

然后在 src/views/member/index.vue里写如下代码

改动的地方如下

页面测试

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。