element-ui实现分页功能

_MadD

已于 2023-05-23 17:55:20 修改

阅读量3.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： # element-ui 文章标签： vue.js

于 2020-08-20 22:51:06 首次发布

本文链接：https://blog.csdn.net/weixin_45849112/article/details/108135674

本文介绍了如何在Vue.js项目中利用Element-UI的分页组件实现列表数据的分页功能。首先参考Element官方文档，然后在EasyMock中设置分页模拟接口，接着在项目的member.js中添加分页查询方法，并在index.vue中声明分页属性，修改JS代码以调用search方法。同时更新template中的页面模板，添加current-change和size-change事件处理。最后，在methods中定义处理分页变化的函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为列表数据添加分页功能，使用分页组件完成分页功能。
参考：https://element.eleme.cn/#/zh-CN/component/pagination
在这里插入图片描述
EasyMock 添加分页模拟接口
请求URL： /member/list/search/{page}/{size}
page 当前要查询的页码， size 每页显示条数，通过这两个值，可查询出当前请求要响应的数据。
请求方式： post
描述：会员列表数据分页
mock.js 配置：

{
   
	"code": 2000, 
	"flag": true, 
	"message": "查询成功", 
	"data": {
    
		"total": "@integer(100,200)", // 查询出来的总记录数
		"rows|10": [{
    // 返回当前页的记录数 10 条, 即每页显示 10 条记录
			"id|+1": 10, 
			"cardNum": "@integer(10000)", //大于1000的正整数 
			"name": "@cname", 
			"birthday": "@date", 
			"phone|11": "@integer(0,9)", // 11个位数字
			"integral": "@integer(0, 500)", 
			"money": "@float(0, 100, 1, 3)", // 0-1000小数,1-3位小数位 
			"payType|1": [