element-plus-分页

下载依赖包

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