惠州网站建设 英语6/长沙seo公司

后端没有返回序号，前端可根据：
当前页面 * 每页展示的条数 - 每页展示的条数 + 当前下标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-paginationbackground: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;},