1：在组件里面找一个自己比较喜欢的分页的样式https://element.eleme.cn/#/zh-CN/component/pagination
其实我们可以看到，文档里面的样式非常的简单
复制一下这段代码
<el-pagination background layout="prev, pager, next" :total="1000"> </el-pagination>
就可以在页面上看到一个静态的分页的效果了
2：最重要的一个步骤就是点击分页的办法
// 初始页currentPage、初始每页数据数pagesize和数据data handleSizeChange: function (size) { this.pagesize = size; console.log(this.pagesize); //每页下拉显示数据 }, handleCurrentChange: function (currentPage) { this.currentPage = currentPage; console.log(this.currentPage); //点击第几页 },
3：对表格中获取到的json数据进行处理
:data="pvData.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
4:将前面的静态分页也进行修改一下，加上方法和变量
<el-pagination style="margin: 12px 0px" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 20, 40]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="pvData.length" > </el-pagination>
5：写一个完整的实例：
json
{"msg":"success","total":0,"code":1,"data":[{"id":6,"userOrganId":null,"userName":"super","sex":1,"realName":"super","birthday":null,"password":"202cb962ac59075b964b07152d234b70","roleId":1,"roleName":"角色1","organId":1,"organName":"部门1","authority":0,"companyId":1,"phone":null,"organIds":null,"isPagination":false,"page":1,"rows":1},{"id":13,"userOrganId":null,"userName":"super2","sex":1,"realName":"super","birthday":null,"password":"202cb962ac59075b964b07152d234b70","roleId":1,"roleName":"角色1","organId":1,"organName":"部门1","authority":0,"companyId":1,"phone":null,"organIds":null,"isPagination":false,"page":1,"rows":1},{"id":14,"userOrganId":null,"userName":"999","sex":1,"realName":"999","birthday":null,"password":"d41d8cd98f00b204e9800998ecf8427e","roleId":1,"roleName":"1","organId":1,"organName":"1","authority":1,"companyId":1,"phone":null,"organIds":null,"isPagination":false,"page":1,"rows":1},{"id":27,"userOrganId":null,"userName":"21","sex":null,"realName":"21","birthday":null,"password":"d41d8cd98f00b204e9800998ecf8427e","roleId":1,"roleName":"","organId":1,"organName":"","authority":1,"companyId":1,"phone":null,"organIds":null,"isPagination":false,"page":1,"rows":1},{"id":28,"userOrganId":null,"userName":"111","sex":1,"realName":"111","birthday":null,"password":"202cb962ac59075b964b07152d234b70","roleId":1,"roleName":"1","organId":1,"organName":"14","authority":1,"companyId":1,"phone":null,"organIds":null,"isPagination":false,"page":1,"rows":1},{"id":29,"userOrganId":null,"userName":"212","sex":0,"realName":"121","birthday":null,"password":"d41d8cd98f00b204e9800998ecf8427e","roleId":1,"roleName":"1","organId":1,"organName":"13","authority":1,"companyId":1,"phone":null,"organIds":null,"isPagination":false,"page":1,"rows":1}]}
实例代码
<template> <div class="tab-container"> <el-table :data="pvData.slice((currentPage - 1) * pagesize, currentPage * pagesize)" border fit highlight-current-row style="width: 100%" > <el-table-column prop="userName" label="用户名" width="180" ></el-table-column> <el-table-column prop="realName" label="姓名"></el-table-column> <el-table-column prop="sex" label="性别" :formatter="formatSex"></el-table-column> <el-table-column prop="organName" label="所属部门"></el-table-column> <el-table-column prop="authority" label="权限"></el-table-column> <el-table-column prop="roleName" label="角色"></el-table-column> </el-table> <el-pagination style="margin: 12px 0px" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 20, 40]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="pvData.length" > </el-pagination> </div> </template> <script> //调用接口 import {getQuerycheckList} from "@/api/permission/user"; export default { data() { return { // 分页 currentPage: 1, //初始页 pagesize: 5, // 每页的数据 total: 0, pvData: [], }; }, created() { this.getQuerycheckList(); }, methods: { // 初始页currentPage、初始每页数据数pagesize和数据data handleSizeChange: function (size) { this.pagesize = size; console.log(this.pagesize); //每页下拉显示数据 }, handleCurrentChange: function (currentPage) { this.currentPage = currentPage; console.log(this.currentPage); //点击第几页 }, //查询题目列表信息接口 getQuerycheckList() { const params = { organId: 1, userOrganId: 1, authority: 0, page: 1, rows: 5, isPagination: false, }; getQuerycheckList(params).then((res) => { console.log("查询题目列表信息", res); this.pvData = res.data; }); }, //格式化性别 formatSex(row, column) { return row.sex === 1? "男" : "女"; } }, }; </script> <style scoped> .tab-container { margin: 30px; } </style>
效果：
