首先，确保你已经安装了 Element-React，并在你的项目中引入了相应的样式和组件。可以通过 npm 或 yarn 安装：
npm install element-react
# 或
yarn add element-react
然后，在你的 Vue 组件中，可以这样使用 Pagination 组件：
<template>
<div>
<h3>Element-React Pagination 分页</h3>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30, 40]"
:page-size="pageSize"
:total="totalItems"
/>
</div>
</template>
<script>
import { ElPagination } from 'element-react';
export default {
components: {
ElPagination,
},
data() {
return {
currentPage: 1,
pageSize: 10,
totalItems: 100,
};
},
methods: {
handleSizeChange(newSize) {
// 处理每页显示条数变化
console.log(`每页显示条数变为: ${newSize}`);
},
handleCurrentChange(newPage) {
// 处理当前页码变化
console.log(`当前页码变为: ${newPage}`);
},
},
};
</script>
在这个例子中，我们引入了 Element-React 的 ElPagination 组件，并在模板中使用它。通过设置一些属性，比如 current-page、page-sizes、page-size、total 等，你可以控制分页的行为和显示。
同时，我们监听了 size-change 和 current-change 事件，可以在这两个事件的处理函数中执行相应的逻辑，比如获取新的数据，更新列表等。
你可以根据 Element-React 的文档和组件属性来进一步自定义分页组件的外观和行为。
请参考 Element-React 的官方文档：[Element-React Pagination](https://element-plus.org/#/en-US/component/pagination) 以获取更多详细信息和选项。
转载请注明出处：http://www.zyzy.cn/article/detail/5619/Element-React