下载依赖包

npm install element-plus –save

或者

yarn add element-plus

全局引入 element plus

import ElementPlus from ‘element-plus’

import ‘element-plus/dist/index.css’

const app = createApp(App)

app.use(ElementPlus)

app.mount(‘#app’)

在需要用到的页面或者组件里面写入

 <el-pagination v-model:currentPage="currentPage"  :page-sizes="[10, 30, 50, 100]"
      layout=" prev, pager, next, jumper,total, sizes," :total="400" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />


currentPage

当前页 对应当前数据的当前页


page-sizes

下拉菜单 每一页的列表 对应类似选项卡


layout

数据包括

prev

上一页

pager

当前页码

next

下一页

jumper

进入到某一行

total

数据总条数

sizes

可选的数据列表


@size-change

每页条数的变化

动态设置当前页面的条数



@current-change

当前页码的变化

动态设置当前的数量


参考文档:https://element-plus.gitee.io/zh-CN/component/pagination.html