从0到1完成一个Vue后台管理项目(十六、后端分页方法以及分页组件的封装以及复用)
阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |
往期
从0到1完成一个Vue后台管理项目二、使用element-ui
从0到1完成一个Vue后台管理项目三、使用SCSS/LESS安装图标库
从0到1完成一个Vue后台管理项目四、引入axios、配置路由
从0到1完成一个Vue后台管理项目五、登录页表单校验的使用和封装
从0到1完成一个Vue后台管理项目五、登录页mocktokenaxios封装
从0到1完成一个Vue后台管理项目七、Header、Footer、页面布局
从0到1完成一个Vue后台管理项目八、Menu改造完善、子组件创建、配置路由
从0到1完成一个Vue后台管理项目九、引入Breadcrumb面包屑更改bug
从0到1完成一个Vue后台管理项目十、列表API封装、Table列表渲染、表格数据转换
从0到1完成一个Vue后台管理项目十二、学生table列表删除、查询、重置
从0到1完成一个Vue后台管理项目十三、信息列表页面实现对话框新增、DateTimePicker 日期时间选择器
从0到1完成一个Vue后台管理项目十四、对话框封装、接口联通、api优化 很重点封装思想
从0到1完成一个Vue后台管理项目十五、作业列表、表格数据方法的封装
页面改造
我们顺便加一个loading、优化一下
分页接口
成功
分页组件的封装以及复用
common下建立Pageing.vue
分页使用上
代码
<template>
<div>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="[5, 10, 20, 50,100]" :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="total" :url="url">
</el-pagination>
</div>
</template>
<script>
import { getTableData } from '@/utils/table.js'
export default {
data() {
return {
page: 1, //当前页数
size: 10, //每页显示条数
loading: true
}
},
created() {
getTableData(this, '/works', { page: this.page, size: this.size }, ['completed'])
},
methods: {
handleSizeChange(val) {
this.size = val
this.page = 1
getTableData(this, '/works', { page: this.page, size: val }, ['completed'])
},
handleCurrentChange(val) {
this.page = val
getTableData(this, '/works', { page: val, size: this.size }, ['completed'])
}
}
}
</script>
<style lang="scss" scoped>
</style>
使用分页组件
这里需要注意我们获取的不再是this组件实例
完成