ElementUI 实现可翻页表格 - 示例代码及详解
<p>"<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="gender" 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>\nexport 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 // 发送请求获取数据，可以使用axios或其他方式\n // 示例代码直接使用静态数据\n this.tableData = [\n { name: '张三', age: 18, gender: '男' },\n { name: '李四', age: 20, gender: '女' },\n // ...\n ]\n this.total = this.tableData.length\n },\n // 每页显示条数改变时触发\n handleSizeChange(val) {\n this.pageSize = val\n },\n // 当前页码改变时触发\n handleCurrentChange(val) {\n this.currentPage = val\n },\n },\n}\n</script>\n" ElementUI 提供了 Table 组件和 Pagination 组件，可以轻松实现可翻页表格功能。本示例演示如何使用这些组件，并解释关键代码的含义。\n\n- <strong><code><el-table></code> 组件:</strong> 用于展示表格数据。\n- <strong><code><el-pagination></code> 组件:</strong> 实现分页功能。\n- <strong><code>tableData</code> 数组:</strong> 存储表格数据。\n- <strong><code>currentPage</code>:</strong> 当前页码。\n- <strong><code>pageSize</code>:</strong> 每页显示的条数。\n- <strong><code>total</code>:</strong> 总条数。\n\n<code>mounted</code> 钩子函数中调用 <code>getTableData</code> 方法获取表格数据，可以通过发送请求或直接使用静态数据。<code>handleSizeChange</code> 和 <code>handleCurrentChange</code> 方法分别在每页显示条数和当前页码改变时触发，更新 <code>pageSize</code> 和 <code>currentPage</code> 的值。\n\n将 <code>currentPage</code>、<code>pageSize</code> 和 <code>total</code> 等属性绑定到 <code>el-pagination</code> 组件上，即可实现可翻页的表格。</p>
原文地址: https://www.cveoy.top/t/topic/pQbW 著作权归作者所有。请勿转载和采集!