如何使用Pagination 分页组件

下面简单介绍一下el-pagination的使用方法。

1. 引入el-pagination组件

在Vue组件中引入el-pagination组件：

import { Pagination } from 'element-ui';

1. 在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：分页布局，支持总共多少条，当前页，每页显示条数选择器等等不同的布局。

1. 在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分页使用的简单介绍。