Vue笔记-element ui中关于table的前端分页

对于 Element UI 表格的前端分页，可以在组件中使用 JavaScript 来实现数据的分页显示，而不必从后端获取已分页的数据。以下是一个简单的示例，演示如何在前端进行 Element UI 表格的分页：

<template><div><el-table:data="getCurrentPageData"style="width: 100%"><el-table-columnlabel="日期"prop="date"></el-table-column><el-table-columnlabel="姓名"prop="name"></el-table-column><el-table-columnlabel="地址"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方法来更新当前页数。这种方式可以在前端进行数据的分页展示。