在 ElementUI 中提供了 el-tableel-pagination 两个组件,但这两个组件间没有任何关联,我们必须自行实现分页功能。为了能尽可能的复用分页代码,我编写了一个可以自动实现表格数据分页的包裹组件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<template>
<div class="table_wrapper">
<el-table :data="pagingData">
<el-table-column type="index" :index="calcPagingIndex"></el-table-column>
<slot name="table-columns"></slot>
</el-table>

<el-pagination
background
v-if="hasMultiplePages"
style="margin-top: 24px"
layout="total, prev, pager, next, jumper"
:page-size="paginationSize"
:total="dataLength"
:current-page.sync="currentPage"
></el-pagination>
</div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';

@Component
export default class TableWrapper extends Vue {
// 全量数据
@Prop({ type: Array, required: true }) private totalData!: any[];
// 分页步长
@Prop({ type: Number, default: 15 }) private paginationSize!: number;

private currentPage = 1;

// 分页总长度
get dataLength(): number {
return this.totalData.length;
}
// 当前页码的数据
get pagingData(): any[] {
return this.totalData.slice(
(this.currentPage - 1) * this.paginationSize,
this.currentPage * this.paginationSize
);
}
// 是否有多页
get hasMultiplePages(): boolean {
return this.dataLength > this.paginationSize;
}

// 计算表格索引
public calcPagingIndex(index: number): number {
return (this.currentPage - 1) * this.paginationSize + index + 1;
}
}
</script>

使用也非常的简单,只需要将全量数据通过 prop 传入组件,并且通过 slot 插入表格内容即可。

1
2
3
4
5
6
7
<table-wrapper :total-data="tableData">
<template slot="table-columns">
<el-table-column label="Name" prop="name"></el-table-column>
<el-table-column label="Phone" prop="phone"></el-table-column>
<el-table-column label="Email" prop="email"></el-table-column>
</template>
</table-wrapper>

这个组件目前只适用于静态数据的分页,理论上使其支持动态分页也并非难事。我们可以将接口地址传入组件内部,每当页码改变时就请求接口获取数据,并实时插入到 totalData 数组中。