Vue+ElementUI 实现分页查询展示
ElementUI分页组件代码
最完整的分页完整功能
<div class="block">
<span class="demonstration">完整功能</span>
<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>
</div>
在data里面定义用到的数据:
//获取用户列表的参数对象
queryInfo: {
query: "",
//当前页数
pagenum: 1,
//每页数据大小
pagesize: 2,
},
//总数据量
total: 0,
//数据
userList: []
在methods里面定义两个方法用于监听pagesize和pagenum的改变
// 监听pagesize改变的事件
handleSizeChange(newSize) {
this.queryInfo.pagesize = newSize;
this.getGoodsList();
},
//监听多少页值改变的事件
handleCurrentChange(newPage) {
this.queryInfo.pagenum = newPage;
this.getGoodsList();
}
请求接口文档:
用户数据列表
- 请求路径:users
- 请求方法:get
- 请求参数
参数名 | 参数说明 | 备注 |
---|---|---|
query | 查询参数 | 可以为空 |
pagenum | 当前页码 | 不能为空 |
pagesize | 每页显示条数 | 不能为空 |
- 响应参数
参数名 | 参数说明 | 备注 |
---|---|---|
totalpage | 总记录数 | |
pagenum | 当前页码 | |
users | 用户数据集合 |
- 响应数据
{
"data": {
"total": 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
}
}
在methods里面定义发送请求的方法
async getUserList() {
//将方法获取到的data 数据转义为 res
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;
},
通过table进行数据展示
<!-- 用户列表区 -->
<el-table :data="userList" style="width: 100%" border stripe>
<el-table-column type="index"></el-table-column>
<el-table-column prop="username" label="姓名"></el-table-column>
<el-table-column prop="email" label="邮箱"></el-table-column>
<el-table-column prop="mobile" label="电话"> </el-table-column>
<el-table-column prop="role_name" label="角色"> </el-table-column>
<el-table-column prop="mg_state" label="状态">
</el-table>