Element UI 表格翻页实现教程：代码示例与解析

"在使用 Element UI 实现可翻页的表格功能时，需要结合 el-pagination 组件来实现翻页功能。以下是一个示例代码：\n\nhtml\n<template>\n <div>\n <el-table :data="tableData" border>\n <el-table-column prop="name" label="姓名"></el-table-column>\n <el-table-column prop="age" label="年龄"></el-table-column>\n <el-table-column prop="address" label="地址"></el-table-column>\n </el-table>\n <el-pagination\n @size-change="handleSizeChange"\n @current-change="handleCurrentChange"\n :current-page="currentPage"\n :page-sizes="[10, 20, 30, 40]"\n :page-size="pageSize"\n layout="total, sizes, prev, pager, next, jumper"\n :total="total"\n ></el-pagination>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n tableData: [], // 表格数据\n currentPage: 1, // 当前页码\n pageSize: 10, // 每页显示条数\n total: 0, // 总条数\n };\n },\n mounted() {\n // 初始化表格数据\n this.getTableData();\n },\n methods: {\n // 获取表格数据\n getTableData() {\n // 模拟异步请求数据\n setTimeout(() => {\n const start = (this.currentPage - 1) * this.pageSize;\n const end = start + this.pageSize;\n this.tableData = this.mockData.slice(start, end);\n this.total = this.mockData.length;\n }, 500);\n },\n // 当前页码改变时的回调函数\n handleCurrentChange(currentPage) {\n this.currentPage = currentPage;\n this.getTableData();\n },\n // 每页条数改变时的回调函数\n handleSizeChange(pageSize) {\n this.pageSize = pageSize;\n this.currentPage = 1; // 改变每页条数时，重置页码为1\n this.getTableData();\n },\n },\n};\n</script>\n\n\n在上述代码中，我们使用了一个tableData数组来存储表格数据，currentPage表示当前页码，pageSize表示每页显示条数，total表示总条数。在mounted钩子函数中，我们调用getTableData方法来初始化表格数据。\n\ngetTableData方法中，我们使用setTimeout来模拟异步请求数据的过程。根据当前页码和每页显示条数，从mockData数组中切片获取对应的数据，并更新tableData和total。\n\nhandleCurrentChange方法和handleSizeChange方法分别是当当前页码改变和每页条数改变时的回调函数。在这两个方法中，我们更新对应的数据，并调用getTableData方法重新获取表格数据。\n\n最后，我们使用了el-pagination组件来显示分页器，并通过事件绑定@size-change和@current-change来监听每页条数和当前页码的变化。在el-pagination组件中，我们使用了layout属性来设定分页器的布局，并通过total属性设置总条数。\n\n这样就实现了一个使用 Element UI 实现可翻页的表格功能。\n