首先，确保你已经在项目中引入了 Element Plus。如果没有，你可以通过以下方式安装：
npm install element-plus
然后，在你的 Vue 组件中使用 el-pagination：
<template>
<div>
<el-pagination
v-model="currentPage"
:page-sizes="[10, 20, 30, 40]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalItems"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</template>
<script>
import { ElPagination } from 'element-plus';
export default {
components: {
ElPagination,
},
data() {
return {
currentPage: 1,
pageSize: 10,
totalItems: 100,
};
},
methods: {
handleSizeChange(newSize) {
console.log('每页条数改变', newSize);
// 根据新的每页条数请求数据或更新数据
},
handleCurrentChange(newPage) {
console.log('当前页码改变', newPage);
// 根据新的页码请求数据或更新数据
},
},
};
</script>
在这个例子中，我们使用了 el-pagination 组件，并通过绑定 v-model 来实现分页。page-sizes 属性用于设置每页显示条数的选项，page-size 属性表示当前每页显示的条数，total 属性表示总条数。
通过监听 size-change 和 current-change 事件，我们可以获取每页条数和当前页码的变化，并在相应的回调方法中处理数据的请求或更新。
你可以根据实际需求自定义分页组件的样式和行为。
转载请注明出处：http://www.zyzy.cn/article/detail/5553/ElementPlus