vue3 element-plus分页

Element Plus 是一个基于 Vue 3 的 UI 组件库，它提供了大量的 UI 组件，其中包括了分页组件。

使用 Element Plus 的分页组件，需要按照如下步骤进行：

1. 安装 Element Plus

在项目中安装 Element Plus ：

npm install element-plus -S

2. 引入 Element Plus

在项目入口文件（main.js）中引入 Element Plus ：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

createApp(App).use(ElementPlus).mount('#app')

3. 使用分页组件

在组件中使用分页组件：

<el-pagination
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-size="pageSize"
  :total="total">
</el-pagination>

其中，current-change 是分页器当前页码改变时触发的事件，currentPage 是当前页码，pageSize 是每页显示条数，total 是总条数。

4. 编写事件方法

编写 handleCurrentChange 方法，响应分页器页码改变事件：

methods: {
  handleCurrentChange(page) {
    console.log(`当前页码：${page}`);
  }
}

以上就是使用 Element Plus 分页组件的步骤。