Vue3中使用Element-Plus分页组件

Element-Plus是基于Vue3的一套UI组件库,内置了分页组件,使用它可以快速实现分页功能。

首先,需要在项目中安装Element-Plus:

npm i element-plus

然后在项目入口文件中引入Element-Plus和样式文件:

import { createApp } from 'vue'
import App from './App.vue'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css' // 引入样式文件

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

使用分页组件需要传递一些参数,包括:

  • currentPage:当前页码
  • pageSize:每页显示的条数
  • total:数据总条数
  • layout:分页布局,可以自定义显示哪些部分(如:'total, sizes, prev, pager, next, jumper')

下面是一个使用Element-Plus分页组件的示例:



其中,currentPagepageSizetotallayout都是从父组件中传递过来的数据,handleCurrentChangehandleSizeChange分别是页码变化和每页显示条数变化时的回调函数。

详细的使用方法可以参考Element-Plushttps://element-plus.org/zh-CN/官方文档。

你可能感兴趣的:(vue.js,elementui,前端)