标签：Vue console pagesize ElementUI res error 组件 currentPage data
效果展示:
状态页面
用户页面
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 后台接口：
后台下载地址:
标签：Vue,console,pagesize,ElementUI,res,error,组件,currentPage,data 来源： https://blog.csdn.net/zhouzhiwengang/article/details/120136960
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。