下面简单介绍一下el-pagination的使用方法。
- 引入el-pagination组件
在Vue组件中引入el-pagination组件：
import { Pagination } from 'element-ui';
- 在Vue组件中使用el-pagination组件
将el-pagination组件添加到Vue组件模板中：
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" :layout="layout" :total="total"> </el-pagination>
其中，各参数的含义如下：
currentPage：当前页码，可以通过v-model绑定双向绑定。
pageSize：每页显示的数量。可以通过v-model绑定双向绑定。
total：总条数。
page-sizes：每页显示条数选择器的选项设置。
layout：分页布局，支持总共多少条，当前页，每页显示条数选择器等等不同的布局。
- 在Vue组件中实现分页方法
在Vue组件中实现分页方法：
methods: { handleSizeChange(val) { this.pageSize = val; this.currentPage = 1; this.getData(); }, handleCurrentChange(val) { this.currentPage = val; this.getData(); }, getData() { // 通过接口获取数据 } }
其中，handleSizeChange和handleCurrentChange是el-pagination组件的回调方法，分别用于每页显示条数改变和当前页码改变时触发。getData方法根据当前的pageSize和currentPage获取数据。
以上就是el-pagination分页使用的简单介绍。
