分页

• 分页、查询、重置、修改、删除

分页、查询、重置、修改、删除

vue中的分页使用频繁，在此记录一下。因为分页一般和增删查改等一起使用，所以写了一套。若是没有使用到其他功能，可以直接删除，只使用分页功能。

pagination: {total: 0,current: 1,pageSize: 10, //每页中显示10条数据pageSizeOptions: ["10", "20", "30"], // 每页中显示的数据showTotal: (total) => `共有${total}条数据`, //分页中显示总的数据showSizeChanger: true, // 显示页面条数改变showQuickJumper: true, // 显示快速跳转},queryParam: {//查询参数page: 1, //第几页size: 10, //每页中显示数据的条数hosName: "",hosCode: "",province: "",city: "",}, // ---------- 分页函数 -------------handleTableChange(pagination) {this.pagination.current = pagination.current;this.pagination.pageSize = pagination.pageSize;this.queryParam.page = pagination.current;this.queryParam.size = pagination.pageSize;this.Search();}, // 1. 获取列表函数,该函数的作用是获取页面上显示的表格// 获取列表设置默认参数:分页为 1 的参数getList(queryPath = "?pageNo=1") {this.dataSource = []; // 重置 table 的 dataSource 数据BZGLHttp.getFangfa(queryPath).then((res) => {// console.log("res列表:::", res);// 设置分页const pagination = { ...this.pagination };pagination.total = res.result.total;pagination.pageSize = res.result.size;this.pagination = pagination;// 渲染数据,把接收的数据渲染到table中for (let i = 0; i < res.result.records.length; i++) {let data = {key: (res.result.current - 1) * res.result.size + i + 1,day: res.result.records[i].day,id: res.result.records[i].id,remark: res.result.records[i].remark,storageQuantity: res.result.records[i].storageQuantity,transferOutQuantity: res.result.records[i].transferOutQuantity,lossQuantity: res.result.records[i].lossQuantity,lossRate: res.result.records[i].lossRate,source: res.result.records[i].source,source_dictText: res.result.records[i].source_dictText,grade: res.result.records[i].grade,grade_dictText: res.result.records[i].grade_dictText,operation: res.result.records[i].operation,operation_dictText: res.result.records[i].operation_dictText,otherTrainerId: res.result.records[i].otherTrainerId,otherTrainerId_dictText:res.result.records[i].otherTrainerId_dictText,};this.dataSource.push(data);}});},// 2. 获取查询条件 函数,该函数会返回当前的查询条件， 搜索栏查询条件 + 分页的页码getQueryPath() {let queryPath ="?pageNo=" +this.queryParam.page +"&day=" +this.startTime +"&day=" +this.endTime +"&operation=" +this.form.operation;return queryPath; // 返回的查询条件},// 3. 重置当前页码及页码参数resetPagination() {this.pagination = {total: 0,current: 1,pageSize: 10, //每页中显示10条数据showSizeChanger: true,pageSizeOptions: ["10"], //每页中显示的数据showTotal: (total) => `共有${total}条数据`, //分页中显示总的数据};//查询参数this.queryParam = {page: 1, //第几页size: 10, //每页中显示数据的条数hosName: "",hosCode: "",province: "",city: "",};},// 4、查询按钮触发函数——单独写，目的是在页码不为1时，点击查询，页码自动归1getsearch1() {this.resetPagination(); //重置页码和参数//重置按钮触发函数// this.resetForm();// 获取目前选择好的查询条件let queryPath = this.getQueryPath();this.getList(queryPath);// this.resetPagination(); // 查询完后 需要重置页码和参数},// 5. 供分页调用的查询函数Search() {// 获取目前选择好的查询条件let queryPath = this.getQueryPath();// console.log("当前的查询路径为:::",queryPath);this.getList(queryPath);//this.resetPagination(); // 查询完后 需要重置页码和参数},// 6. 重置按钮触发函数resetForm() {// 重置查询表单,动态刷新列表this.form = {day: null, //日期operation: "", //操作单选按钮};this.resetPagination(); //需要重置页码和参数// 重新调用获取列表函数，默认参数获取列表this.getList();}, // 7. 修改提交handleOk() {// console.log("要更新的数据::::::", this.updateForm);BZGLHttp.updateJianGenPaiShiInfo(this.updateForm).then((res) => {console.log(res);if (res.code == 200) {this.$message.success("修改成功");}});// 获取当前的查询路径重新进行查询，刷新列表let queryPath = this.getQueryPath();this.getList(queryPath);this.updatevisible = false;},// 8. 删除按钮 workdelete(Id) {// console.log("要删除的该记录的id:::",Id);BZGLHttp.deleteJianGenPaiShiInfo("?id=" + Id).then((res) => {if (res.code == 200) {this.$message.success("删除成功");this.dataSource = [];let queryPath = this.getQueryPath();this.getList(queryPath);}});},

总结

以上是生活随笔为你收集整理的vue分页功能的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。