效果展示:
状态页面
用户页面
Vue 源码:
定义封装组件：Pagination.vue
<template>
<div>
<el-table height="520" :data="tableData" style="width: 100%" border>
<template v-for="(item, index) in columnData">
<el-table-column
:prop="item.prop"
:key="index"
:label="item.label"
>
</el-table-column>
</template>
</el-table>
<el-pagination
class="pg"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 50, 100]"
:page-size="pagesize"
:total="total"
background
></el-pagination>
</div>
</template>
<script>
export default {
props: {
// 分页数据总数
total: {
type: Number,
default: 1000,
required: false
},
// 单页数据量
pagesize: {
type: Number,
default: 10,
required: false
},
// 当前页码
currentPage: {
type: Number,
default: 1,
required: false
},
// 表格数据
tableData: {
type: Array,
default: ()=>[],
required: false
},
// 表头数据
columnData: {
type: Array,
default: ()=>[],
required: false
}
},
data() {
return {};
},
methods: {
// 以下两个函数均是触发父组件的handleChange事件，从而实现点击分页的功能按钮后，子组件向父组件传参
handleCurrentChange: function (currentPage) {
this.$emit('handleChange', this.pagesize, currentPage)
},
handleSizeChange: function (pageSize) {
this.$emit('handleChange', pageSize, this.currentPage)
}
},
};
</script>
<style scoped>
.pg {
margin: 5px;
text-align: right;
}
</style>
调用封装组件：user.vue
<style>
.pg-div {
margin: auto;
width: 100%;
}
</style>
<template>
<div class='pg-div'>
<Pagination :columnData="columnData"
:tableData="tableDataList"
:total="totalNum"
:pagesize="pagesizeNum"
:currentPage="currentPageNum"
@handleChange="handleChangeData"
/>
</div>
</template>
<script>
import Pagination from "@/components/Pagination";
import {getUserList} from "@/api/user";
export default{
name: 'user',
data() {
return {
columnData:[], // 表头数据，引用于mock数据
tableDataList: [], // 分页后的表格数据
totalNum: 24, // 数据总数
pagesizeNum: 10, // 单页数据量
currentPageNum: 1 // 当前页码
};
},
components:{
Pagination
},
created() {
this.getData()
},
methods:{
// 获取子组件传来修改后的pagesize和currentPage，改变数据页码或每页条目，进而请求新数据
handleChangeData (pagesize, currentPage) {
console.log("pagesize", pagesize)
this.pagesizeNum = pagesize
this.currentPageNum = currentPage
this.getData()
},
getData(){
var params ={
'pageNum': this.currentPageNum,
'pageSize': 10,
}
getUserList(this.$qs.stringify(params)).then(res => {
console.log(res)
this.columnData = [{"label":"姓名", "prop":"name"}]
// 把请求到的数据给testDatas数组
this.tableDataList = res.data.list
// 当前页数
this.currentPageNum = res.data.pageNum
// 当前页数量
this.pagesizeNum = res.data.pageSize
// 分页总数
this.totalNum = res.data.total
// console.log(JSON.stringify(res.data.data.total))
})
.catch((error) => {
console.log(error)
})
}
}
}
</script>state.vue
<style>
.pg-div {
margin: auto;
width: 100%;
}
</style>
<template>
<div class='pg-div'>
<Pagination :columnData="columnData"
:tableData="tableDataList"
:total="totalNum"
:pagesize="pagesizeNum"
:currentPage="currentPageNum"
@handleChange="handleChangeData"
/>
</div>
</template>
<script>
import Pagination from "@/components/Pagination";
import {getStateList} from "@/api/state";
export default{
name: 'user',
data() {
return {
columnData:[], // 表头数据，引用于mock数据
tableDataList: [], // 分页后的表格数据
totalNum: 24, // 数据总数
pagesizeNum: 10, // 单页数据量
currentPageNum: 1 // 当前页码
};
},
components:{
Pagination
},
created() {
this.getData()
},
methods:{
// 获取子组件传来修改后的pagesize和currentPage，改变数据页码或每页条目，进而请求新数据
handleChangeData (pagesize, currentPage) {
console.log("pagesize", pagesize)
this.pagesizeNum = pagesize
this.currentPageNum = currentPage
this.getData()
},
getData(){
var params ={
'pageNum': this.currentPageNum,
'pageSize': 10,
}
getStateList(params).then(res => {
console.log(res)
this.columnData = [{"label":"状态名称", "prop":"name"}]
// 把请求到的数据给testDatas数组
this.tableDataList = res.data.list
// 当前页数
this.currentPageNum = res.data.pageNum
// 当前页数量
this.pagesizeNum = res.data.pageSize
// 分页总数
this.totalNum = res.data.total
// console.log(JSON.stringify(res.data.data.total))
})
.catch((error) => {
console.log(error)
})
}
}
}
</script>api 定义:user.js 和state.js
import request from '@/utils/request'
export function getStateList(params) {
return request({
url: '/state/page',
method: 'get',
params
})
}import request from '@/utils/request'
export function getUserList(data) {
return request({
url: '/user/page',
method: 'post',
data
})
}axios 封装:request.js
import { Message, MessageBox } from "element-ui";
import axios from 'axios';
const service = axios.create({
baseURL: 'http://192.168.1.74:8081/crm',
timeout: 15000 // 请求超过15秒就报错
})
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
// request拦截器
service.interceptors.request.use(config => {
return config
}, error => {
// 当请求错误时
console.log(error)
Promise.reject(error)
})
// response拦截器
service.interceptors.response.use(
response => {
const res = response.data
// if !200 start
if (res.code !== 200) {
Message({
message: res.massage,
type: 'error',
duration: 3 * 1000
})
// code = 401 表示未登录
// if 401 start
if (res.code === 401) {
MessageBox.confirm('登录失效，请重新登录', '确认登出', {
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
})
} // if 401 end
return Promise.reject('error')
} else { // if !200 end
return response.data
}
}, // response end
error => {
console.log('err' + error)
Message({
message: error.message,
type: 'error',
duration: 3 * 1000
})
return Promise.reject(error)
}
)
export default serviceSpringBoot 后台接口：
后台下载地址: