vue2.0+Element UI 表格前端分页和后端分页

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

之前写过一篇博客，当时对element ui框架还不太了解，分页组件用 html + css 自己写的，比较麻烦，而且只提到了后端分页（见 https://www.cnblogs.com/zdd2017/p/9714633.html）。由于工作上的需要，写了很多表格，因此对于分页有了新的理解，在这里重新总结一下，用 element ui 自带的分页组件实现前端分页和后端分页。

首先我们将分页功能的代码封装成一个组件，这样以后要用的时候可以直接拿，这里需要一个预备知识就是父子组件的交互，不清楚的可以自己先看一下。

新建pagination.vue文件，内容如下：

<template>
<div :class="{'hidden':hidden}" class="pagination-container">
<el-pagination
:background="background"
:current-page.sync="currentPage"
:page-size.sync="pageSize"
:layout="layout"
:page-sizes.sync="pageSizes"
:pager-count.sync="pageCount"
:pager-count="pageCount"
:total="total"
v-bind="$attrs"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</template><script>
import { scrollTo } from "@/utils/scroll-to";export default {
name: "Pagination",
props: {
total: {
required: true,
type: Number
},
page: {
type: Number,
default: 1
},
limit: {
type: Number,
default: 10
},
pageCount: {
type: Number,
default: 5
},
pageSizes: {
type: Array,
default() {
return [10, 20, 30, 50];
}
},
layout: {
type: String,
default: "total, sizes, prev, pager, next, jumper"
},
background: {
type: Boolean,
default: true
},
autoScroll: {
type: Boolean,
default: true
},
hidden: {
type: Boolean,
default: false
}
},
computed: {
currentPage: {
get() {
return this.page;
},
set(val) {
this.$emit("update:page", val);
}
},
pageSize: {
get() {
return this.limit;
},
set(val) {
this.$emit("update:limit", val);
}
}
},
methods: {
handleSizeChange(val) {
this.$emit("pagination", { page: this.currentPage, limit: val });
if (this.autoScroll) {
scrollTo(0, 800);
}
},
handleCurrentChange(val) {
this.$emit("pagination", { page: val, limit: this.pageSize });
if (this.autoScroll) {
scrollTo(0, 800);
}
}
}
};
</script><style scoped>
.pagination-container {
background: #fff;
padding: 32px 16px;
}
.pagination-container.hidden {
display: none;
}
</style>

新建父组件myTable.vue，引入pagination插件

<el-table
v-loading="listLoading"
:key="tableKey"
:data="list"
border
fit
style="width: 100%;"
>

…………</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="listQuery.page"
:limit.sync="listQuery.limit"
@pagination="getList"
/>

注册变量、方法

export default {
data() {
return {
list: null,
total: 0,
listQuery: {
page: 1,
limit: 10
}
}
},
created() {
this.getList();
}
methods: {
// 获取列表数据
getList() {}
}
}

在首次进入页面, created 阶段以及每次点击页码时调用 getList() 方法，getList() 方法根据前端分页和后端分页的不同需求有不同写法。

先看后端分页，后端分页比较简单，只要将当前页数 page 与每页显示条数 limit 传给后台，再把后台返回的数据赋值给list即可。

getList() {
axios.get('/list', {
params: this.listQuery
}).then(res => {
this.list = res.value.list;
})
}

前端分页一次性拿到所有数据，要根据 page 和 limit 以及 total 通过前端计算来决定每一页展示哪些数据，计算公式为

this.list = res.value.list.slice((this.listQuery.page - 1) * this.listQuery.limit, this.listQuery.page * this.listQuery.limit);

这里有一个问题，因为我们第一次请求就已经拿到了所有的数据，所以在每次点击页码时就没必要再发送请求。这里我们可以用一个变量alllist来缓存表格数据，然后每次点击页码时先检查alllist是否为空，为空则发送请求请求表格数据；不为空则不发送请求，直接拿alllist里的值来处理。

在 data 里注册 alllist 变量后，getList() 方法如下：

getList(pagination) {
if (this.alllist) {
if (pagination) {
this.listQuery.page = pagination.page;
this.listQuery.limit = pagination.limit;
}
this.list = this.alllist.slice(
(this.listQuery.page - 1) * this.listQuery.limit,
this.listQuery.page * this.listQuery.limit
);
} else {
axios.get('/list', {
params: this.listQuery
}).then(response => {
this.alllist = response.value.list;
this.total = response.value.list.length;
this.list = this.alllist.slice(
(this.listQuery.page - 1) * this.listQuery.limit,
this.listQuery.page * this.listQuery.limit
);
});
}
}