[element plus] 分页组件使用 - vue

这篇具有很好参考价值的文章主要介绍了[element plus] 分页组件使用 - vue。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

学习关键语句:
饿了么加组件分页组件
element+分页组件
vue3 + 饿了么分页组件

写在前面

必须要说明的是 , 这篇文章使用的分页组件样式包含了饿了么官方给出警告以后会弃用的部分
[element plus] 分页组件使用 - vue
但是问题是什么呢? 问题就是我还没找到这个用 vmodel 绑定的使用方法 , 再加上现在也算是有点小忙 , 暂时没有时间去仔细探究这里的内容

真正的写在前面

为什么要写这篇文章 , 是因为~~没有内容可以写了~~ 我只看官网的话其实并不是能很快的就晓得怎么用这个分页组件
所以说如果你看到这里其实是想详细了解这个组件的前因后果的话 , 那就可以离开了 .

这篇我只想让大家在需要用到分页组件却发现我™官网写了个锤子 , 我就想赶紧随便分一分页把数据展示下完事的那些小伙伴们 , 提供一个快速查阅的文章

ps:本次不会有任何实际文件出现

开始

一开始的引用总是让人很是兴奋

毕竟组件库嘛 , 谁没用过一样 , 我们就选择带有背景色的分页来简单讲一讲好了

[element plus] 分页组件使用 - vue
通常来说 , 对于这样一个分页组件 , 我们需要创建三个变量

// 当前页
let currentPage = ref(1)
// 总条数
let totalCount = ref(0)
// 每页显示限制
let limit = ref(10)
const pageChange = (p: number) => {
  currentPage.value = p
  // 发起接口请求数据 , 请求参数中使用 currentPage.value 作为查询当前页码
}

同时将这三个变量绑定在分页组件上

<el-pagination
 background // 分页带有背景色
 layout="prev, pager, next"	// 分页组件的布局内容 , 当前为 上一页 , 页码 , 下一页
 :page-size="limit" // 每页显示限制数量
 :total="totalCount"	// 全部数据总条数 , 通过这个和限制数量自动得出分几页
 :current-page="currentPage"	// 当前是在第几页
 @current-change="pageChange"	// 翻页事件
/>