Element UI 是一个基于 Vue 2.0 的前端 UI 库，提供了丰富的组件和工具，帮助开发者快速构建出高质量的用户界面。其中，Pagination 分页组件是 Element UI 中非常实用的一环，能够帮助我们轻松实现数据的分页显示。
分页组件基本用法
在 Element UI 中，Pagination 组件的使用非常简单。以下是一个基本的分页组件示例：
<template>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30, 40]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="100">
</el-pagination>
</template>
<script>
export default {
data() {
return {
currentPage: 1,
pageSize: 10
};
},
methods: {
handleSizeChange(newSize) {
this.pageSize = newSize;
this.fetchData();
},
handleCurrentChange(newPage) {
this.currentPage = newPage;
this.fetchData();
},
fetchData() {
// 获取数据的方法
}
}
};
</script>
在上面的代码中，我们定义了一个分页组件，其中包括了总页数、每页显示的条数、当前页码、页面布局等配置项。同时，我们还定义了两个事件处理函数 handleSizeChange 和 handleCurrentChange，用于处理页面大小和当前页码的变化。
分页组件高级用法
除了基本用法外，分页组件还支持一些高级用法，如自定义插槽、显示总数等。以下是一个高级用法的示例：
<template>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30, 40]"
:page-size="pageSize"
layout="prev, pager, next, jumper, ->, total"
:total="100">
<template #total>
<span>共 {{ total }} 条</span>
</template>
</el-pagination>
</template>
<script>
export default {
data() {
return {
currentPage: 1,
pageSize: 10,
total: 100
};
},
methods: {
handleSizeChange(newSize) {
this.pageSize = newSize;
this.fetchData();
},
handleCurrentChange(newPage) {
this.currentPage = newPage;
this.fetchData();
},
fetchData() {
// 获取数据的方法
}
}
};
</script>
在这个示例中，我们通过 template 标签和 #total 插槽来自定义了分页组件的总数显示。
总结
Pagination 分页组件是 Element UI 中非常实用的一个组件，可以帮助我们轻松实现数据的分页显示。在实际开发中，我们可以根据需求灵活运用分页组件的各种配置和用法，为用户提供更好的用户体验。