Element UI Table & Pagination: 实现表格翻页功能

要使用 Element UI 实现 table 和翻页的功能，你可以按照以下步骤进行操作：\n\n1. 安装 Element UI：首先，确保你的项目已经安装了 Element UI。如果没有安装，可以使用以下命令进行安装：\n\nnpm install element-ui --save\n\n\n2. 导入 Element UI 组件：在你的 Vue 组件中，导入你需要使用的 Element UI 组件。例如，你可以导入 el-table 和 el-pagination 组件：\nvue\n<template>\n <div>\n <el-table :data="tableData">\n <!-- 表格列 -->\n </el-table>\n <el-pagination\n @current-change="handleCurrentChange"\n :current-page="currentPage"\n :page-sizes="[10, 20, 30, 40]"\n :page-size="pageSize"\n :total="total"\n layout="total, sizes, prev, pager, next, jumper"\n ></el-pagination>\n </div>\n</template>\n\n<script>\nimport { ElTable, ElPagination } from 'element-ui';\n\nexport default {\n components: {\n ElTable,\n ElPagination,\n },\n data() {\n return {\n tableData: [], // 表格数据\n currentPage: 1, // 当前页码\n pageSize: 10, // 每页显示数量\n total: 0, // 总条数\n };\n },\n methods: {\n handleCurrentChange(page) {\n this.currentPage = page;\n // 根据当前页码和每页显示数量，获取对应的数据\n this.fetchData();\n },\n fetchData() {\n // 根据当前页码和每页显示数量，从后端获取数据\n // 更新表格数据和总条数\n // 示例：假设从后端获取数据的方法为 fetchDataFromBackend\n fetchDataFromBackend(this.currentPage, this.pageSize).then((res) => {\n this.tableData = res.data;\n this.total = res.total;\n });\n },\n },\n mounted() {\n // 初始化时获取第一页的数据\n this.fetchData();\n },\n};\n</script>\n\n\n3. 更新表格数据和总条数：在 fetchData 方法中，你需要根据当前页码和每页显示数量从后端获取数据，并更新表格数据和总条数。这里只是一个示例，你需要根据你的实际情况来实现这个方法。\n\n4. 监听页码变化：在 handleCurrentChange 方法中，你可以监听页码变化事件，当页码变化时，重新获取对应的数据并更新表格。\n\n5. 修改表格列和分页布局：根据你的实际需求，你可以在 el-table 标签中添加表格列，并在 el-pagination 标签中修改分页布局。在上面的示例中，我使用了 total, sizes, prev, pager, next, jumper 布局，你可以根据需要进行修改。\n\n这样，你就可以使用 Element UI 实现表格和翻页的功能了。记得根据你的实际情况来修改代码中的数据和方法。