Element UI 的分页组件非常方便实用，只需要在页面中引入组件并传入相应的分页参数即可。
- 引入组件
首先需要在页面中引入分页组件 el-pagination，可以通过以下代码实现：
<template> <div> <!-- 分页组件的使用，以下为基本使用示例 --> <el-pagination :current-page="currentPage" :page-size="pageSize" :total="total" @current-change="handleCurrentChange"> </el-pagination> </div> </template> <script> // 引入 Element 组件库 import { Pagination } from 'element-ui'; // 注册组件 export default { components: { 'el-pagination': Pagination, }, data() { return { currentPage: 1, // 当前页码默认值为1 pageSize: 10, // 每页显示条数默认值为10 total: 0, // 数据总数 } }, methods: { // 翻页触发的方法 handleCurrentChange(currentPage) { this.currentPage = currentPage; // 根据 this.currentPage 获取对应页面数据 //... } } } </script>
2.绑定参数
在组件的 data 对象中定义分页所需的三个常用参数：currentPage（当前页码）、pageSize（每页显示的数据条数）和 total（总数据条数）。
data() { return { currentPage: 1, pageSize: 10, total: 0, } }
currentPage 表示当前页码，默认值为 1， pageSize 表示每页显示多少条数据，可以根据具体情况设置合适的值，默认值为 10， total 表示数据的总条数，需要根据实际数据总数进行绑定。
3.翻页事件
通过绑定 @current-change 事件，来监听用户翻页的动作。事件会触发 handleCurrentChange 方法，参数为当前所点击的页码。在该方法中，你可以编写相应的逻辑，实现分页数据的获取和显示。
例如，以下代码可以通过 Axios 获取当前页数据：
1. methods: { 2. handleCurrentChange(currentPage) { 3. this.currentPage = currentPage; 4. // 计算 start 和 limit，根据 currentPage 和 pageSize 设置 start 和 level 5. const start = (currentPage - 1) * this.pageSize; 6. const limit = this.pageSize; 7. // 调用 API 获取数据 8. axios.get(`/api/data?start=${start}&limit=${limit}`).then(response => { 9. this.tableData = response.data; 10. }) 11. } 12. }
