后端没有返回序号，前端可根据：
当前页面 * 每页展示的条数 - 每页展示的条数 + 当前下标index +1
以展示序号
pageParamsRight: {
total: 0,
pageNum: 1,
pageSize: 9,
},
<el-col >{
{
pageParamsRight.pageNum * 9 - 9 + index + 1}}</el-col>
前端分页
前端是接口返回全部内容，然后用js来分
后端是指前端通过请求页码 每页展示多少条数据，后端直接返回当前页的参数
前端分页缺点：第一次显示慢，加载时用户体验不好。数据不是实时的
优点：换页时用户体验好
基本代码：
pageParamsRight: {
total: 0,
pageNum: 1,
pageSize: 9,
},
//网路请求后的AllList
//pageParamsRight的pageNum表示当前是第几页 9表示该页面展示的多少条
this.list = this.AllList.slice(
(this.pageParamsRight.pageNum - 1) * 9,
this.pageParamsRight.pageNum * 9
);
结合element-ui分页 可达到分页效果，当点击下一页时,再次对请求回的全部数据进行截取，代码如上.
下面是我对element-ui分页进行了二次封装
新建myPagination.vue文件
<template>
<div id="my_page">
<el-pagination
background
:pager-count="5"
class="pageCls"
:page-sizes="pageSizes"
:current-page.sync="pageParams.pageNum"
:page-size="pageParams.pageSize"
:total="pageParams.total"
@size-change="onPageSizeChange"
@current-change="onCurrentPageChange"
layout="prev, pager, next, total,jumper"
></el-pagination>
</div>
</template>
<script>
/**接收的参数：
* pageParams:{
* pageNum: 1,
pageSize: 10,
total: 0,
* }
pageSizes
*
*/
const PAGE_SIZES = [10, 20, 30, 40, 50, 100];
export default {
name: "Pagination",
props: {
pageParams: {
type: Object,
default: {
pageNum: 1,
pageSize: 10,
total: 0,
},
},
pageSizes: {
type: Array,
default() {
return PAGE_SIZES;
},
},
},
data() {
return {
PAGE_SIZES,
};
},
computed: {
},
watch: {
},
methods: {
onPageSizeChange(val) {
this.$emit("pageParamsChange", {
...this.pageParams,
pageSize: val,
});
},
onCurrentPageChange(val) {
this.$emit("pageParamsChange", {
...this.pageParams,
pageNum: val,
});
},
},
};
</script>
<style lang="scss" >
.pagination-container {
background: #fff;
padding: 32px 16px;
}
.pagination-container.hidden {
display: none;
}
#my_page {
font-weight: 400;
.el-input__inner {
color: #fff;
height: 28px;
border-radius: 3px;
border: 1px solid rgba($color: #a6bd2c, $alpha: 0.4);
background: transparent;
}
.el-pagination__jump {
font-size: 12px;
font-family: MicrosoftYaHei;
color: #ffffff;
line-height: 28px;
margin-left:9px ;
}
.el-pagination__total {
display: inline-block;
font-size: 12px;
line-height: 28px;
font-family: MicrosoftYaHei;
color: #cad7eb;
padding-left: 10px;
margin: 0;
}
.number {
font-weight: 400;
padding: 0;
width: 25px;
height: 28px;
background: rgba($color: #abbb49, $alpha: 0.4);
color: #fff;
border-radius: 50%;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #ffffff;
line-height: 28px;
}
.active {
background: #dd8f00;
}
// 省
.el-icon-more {
background: transparent;
color: #fff;
}
.btn-prev,
.btn-next {
background: rgba($color: #abbb49, $alpha: 0.4);
color: #fff;
border-radius: 60%;
height: 28px;
}
}
</style>
在main.js中以入，并注册成全局组件
import Pagination from "@/components/myPagination.vue";
// 全局组件挂载
Vue.component("Pagination", Pagination);
在局部组件中，就可以使用了
<Pagination
:pageParams="pageParamsRight"
@pageParamsChange="CurrentTaskChange"
/>
data(){
return:{
pageParamsRight: {
total: 0,
pageNum: 1,
pageSize: 9,
},
}
}
// 切换分页 做出相应操作等等
CurrentTaskChange(val) {
// this.initQuery.pagenum = val.pageNum;
},