element-ui实现分页功能

原创

已于 2023-05-23 17:55:20 修改 · 3.5k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

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

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

为列表数据添加分页功能，使用分页组件完成分页功能。
参考：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": ['1', '2',