下载依赖包
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
