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 获取当前页数据:
methods: {
handleCurrentChange(currentPage) {
this.currentPage = currentPage;
// 计算 start 和 limit,根据 currentPage 和 pageSize 设置 start 和 level
const start = (currentPage - 1) * this.pageSize;
const limit = this.pageSize;
// 调用 API 获取数据
axios.get(`/api/data?start=${start}&limit=${limit}`).then(response => {
this.tableData = response.data;
})
}
}