element-plus-分页

最新推荐文章于 2025-09-03 14:20:12 发布

原创最新推荐文章于 2025-09-03 14:20:12 发布 · 2.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

下载依赖包

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 当前页码的变化 动态设置当前的数量