需求：
基于vue2 + element实现的一个table表格，模拟实现数据，比如用户列表，然后进行前端分页，写一个这样的组件案例。
实现：
<template>
<div>
<el-table :data="currentData" style="width: 100%">
<el-table-column prop="id" label="ID" width="80"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="email" label="邮箱"></el-table-column>
<el-table-column prop="age" label="年龄" width="95"></el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30, 40]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
users: [], // 模拟的用户数据
currentPage: 1, // 当前页数
pageSize: 10, // 每页显示的数据量
total: 0, // 总数据量
currentData: [] // 当前页面显示的数据
};
},
created() {
this.fetchData();
},
methods: {
fetchData() {
// 模拟从后端获取数据
this.users = Array.from({ length: 100 }, (_, i) => ({
id: i + 1,
name: `User ${i + 1}`,
email: `user${i + 1}@example.com`,
age: Math.floor(Math.random() * 60) + 18
}));
this.total = this.users.length;
this.updateCurrentData();
},
updateCurrentData() {
const start = (this.currentPage - 1) * this.pageSize;
const end = start + this.pageSize;
this.currentData = this.users.slice(start, end);
},
handleSizeChange(val) {
this.pageSize = val;
this.updateCurrentData();
},
handleCurrentChange(val) {
this.currentPage = val;
this.updateCurrentData();
}
}
};
</script>解释：
组件说明：
- 数据模拟：在
created钩子中，我们创建了100条模拟用户数据。 - 分页逻辑：通过
currentPage和pageSize控制当前显示的数据范围。 - 事件处理：
handleSizeChange和handleCurrentChange分别处理每页显示数量变化和当前页数变化的事件，更新显示的数据。 - 展示数据：
updateCurrentData方法用于根据当前页数和每页数量计算并设置当前页面应显示的数据。
这个组件可以作为一个基本的分页表格组件使用，适用于展示大量数据时的前端分页场景。
