代码实现展示：
<template>
<div>
<el-table :data="tableList" border style="width: 100%;">
<el-table-column align="center" type="index" label="序号" width="50" />
<el-table-column prop="id" header-align="center" align="center" label="缺陷ID" />
<el-table-column prop="name" header-align="center" align="center" label="名称" />
</el-table>
<!-- 分页 -->
<div class="pagination-container" align="center">
<el-pagination :current-page="pageData.currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="pageData.size" :total="pageData.total" layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange" @current-change="handleCurrentChange" />
</div>
</div>
</template>
<script>
export default {
components: {
},
data() {
return {
pageData: {
total: 0,//总条数
size: 10,//默认每页显示10条
currentPage: 1,//默认显示第一页
},
start: 0, // 处理前端分页数据保存
end: 0, // 处理前端分页数据保存
tableData: [],
tableList: [], //table前端分页后显示数据
dataVal: [
{
id: 1, name: "测试1" },
{
id: 2, name: "测试2" },
{
id: 3, name: "测试3" },
{
id: 4, name: "测试4" },
{
id: 5, name: "测试5" },
{
id: 6, name: "测试6" },
{
id: 7, name: "测试7" },
{
id: 8, name: "测试8" },
{
id: 9, name: "测试9" },
{
id: 10, name: "测试10" },
{
id: 11, name: "测试11" },
],//需要展示的所有数据
};
},
created() {
},
mounted() {
},
computed: {
},
methods: {
//获取数据的方法---假设现在获取到的数据就是dataVal，把this.dataVal赋给this.tableData，通过方法分段后，赋给this.tableList(table前端分页后显示数据)。
getTableData() {
this.tableList = [];
this.tableData = [];
// table数据处理
this.tableData = this.dataVal;
this.tableList = this.dataVal.slice(0, this.pageData.size);
this.pageData.total = this.tableData.length;
this.pageData.currentPage = 1;
this.start = 0;
this.end = this.pageData.size;
},
// 分页点击方法
//改变每页展示的条数
handleSizeChange(val) {
const preTable = this.tableData.slice(0, this.start);
const LastTable = this.tableData.slice(this.end);
this.tableData = preTable.concat(this.tableList).concat(LastTable);
this.pageData.size = val;
this.start = this.pageData.size * (this.pageData.currentPage - 1);
this.end =
this.pageData.size * (this.pageData.currentPage - 1) +
this.pageData.size;
this.tableList = this.tableData.slice(
this.pageData.size * (this.pageData.currentPage - 1),
this.pageData.size * (this.pageData.currentPage - 1) +
this.pageData.size
);
},
//改变页码
handleCurrentChange(val) {
const preTable = this.tableData.slice(0, this.start);
const LastTable = this.tableData.slice(this.end);
this.tableData = preTable.concat(this.tableList).concat(LastTable);
// 处理数据后分页
this.pageData.currentPage = val;
this.start = this.pageData.size * (this.pageData.currentPage - 1);
this.end =
this.pageData.size * (this.pageData.currentPage - 1) +
this.pageData.size;
this.tableList = this.tableData.slice(
this.pageData.size * (this.pageData.currentPage - 1),
this.pageData.size * (this.pageData.currentPage - 1) +
this.pageData.size
);
console.log("显示tablelist", this.tableList);
},
},
};
</script>
分页效果：
