对于 Element UI 表格的前端分页,可以在组件中使用 JavaScript 来实现数据的分页显示,而不必从后端获取已分页的数据。以下是一个简单的示例,演示如何在前端进行 Element UI 表格的分页:
<template>
<div>
<el-table
:data="getCurrentPageData"
style="width: 100%">
<el-table-column
label="日期"
prop="date">
</el-table-column>
<el-table-column
label="姓名"
prop="name">
</el-table-column>
<el-table-column
label="地址"
prop="address">
</el-table-column>
</el-table>
<el-pagination
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length">
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
// more data...
],
currentPage: 1,
pageSize: 10,
};
},
computed: {
getCurrentPageData() {
const start = (this.currentPage - 1) * this.pageSize;
const end = start + this.pageSize;
return this.tableData.slice(start, end);
}
},
methods: {
handleCurrentChange(val) {
this.currentPage = val;
}
}
};
</script>
在这个示例中,使用了computed属性getCurrentPageData来根据当前页和每页显示条数来计算当前页面应该显示的数据。在分页变化时,我们通过handleCurrentChange方法来更新当前页数。这种方式可以在前端进行数据的分页展示。