在开发过程中我遇到这么一个需求我曾经遇到过这个需求,后台说数据分页麻烦,哎没办法这个公司就我和他搞技术的,要是有项目经理肯定不允许后台这么搞,无论数据量大不大,
前端采用的是Vue + ElementUi
下面这是父组件的需要代码
<!--html代码-->
<template>
<paging class="page" :totalCount="total" :pageSize="pageSize" :tableData="tableData"
@getTbles="getTbales"></paging>
</template>
data(){
totalCount: 0, // totalCount 这是传递给 分页组件的 total 从而显示多少页数
pageSize:22, // 这是每页表格最多显示多少条
tableView: [], //这个是给表格显示的数据
tableData: [], //这是接口返回的所有数据
defaultData: false //例如用户在第5页,增加后请求数据肯定子啊第1页面那么需要重置组件
},
// 接口数据
create(){
table().then(res => {
if(res.success){
//记得清除this.tableView 因为搜索的时候也会用这个,会造成上次数据没及时清除掉
this.tableView = []
this.totalCount = res.data.length
//进入if 因为他有多页码 else 只有1页
if (res.data.length >= this.pageSize) {
for (let i = 0; i < this.pageSize; i++) {
this.tableView.push(res.data[i]);
}
} else {
this.tableView = res.data;
}
}
})
},
methods(){
//用户点击页码组件返回的数据
tables(table) {
this.tableView = table;
}
}
子组件代码如下
<!--分页-->
<template>
<el-pagination
background
layout="prev, pager, next"
:total="totalCount"
:page-size="pageSize"
:current-page="currentPage"
@current-change="handleCurrentChange"
></el-pagination>
</template>
<script>
export default {
props: {
totalCount: {
type: Number,
default: 10
},
pageSize: {
type: Number,
default: 10
},
tableData: {
type: Array,
default: []
},
defaultData: {
type: Boolean,
default: false
}
},
data() {
return {
tableView: [],
currentPage: 1
};
},
watch: {
defaultData(newValue) {
//数据已经被更新
this.handleCurrentChange(1);
}
},
methods: {
handleCurrentChange(val) {
console.log(val);
//为什么必须不是1 呢 因为点击1是返回初始数据
if (val != 1)
val =(val-1) * this.pageSize //比如点击是2,并且pageSize是10的时候 那么数据下标是 10开始就是10
}
let number = this.tableData.length;
// 当点击2的时候如果第二页是最后一页进入else全部展示
if (number > val + this.pageSize) {
this.tableView = this.tableData.slice(val, val + this.pageSize);
} else {
this.tableView = this.tableData.slice(val, this.tableData.length);
}
this.$emit("tables", this.tableView);
}
}
};
</script>
这就是基本代码,但是前面说了假如我在第三页点击增加后,我请求table数据我是不是表格中的数据就是最新的,然后呢
页码也要重恢复初始化
save(){
//假设已经增加成功了
if(res.success){
this.tableData = []
this.tableView = []
this.tableData = res.data
this.totalCount = res.data.length
//进入if 因为他有多页码 else 只有1页
if (res.data.length >= this.pageSize) {
for (let i = 0; i < this.pageSize; i++) {
this.tableView.push(res.data[i]);
}
} else {
this.tableView = res.data;
}
this.defaultData = true //那么就会调用handleCurrentChange(1)
}
}
如果小伙伴看到错误希望赶快留言评论哦!!
谢谢 ^_^