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

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

写在前面

必须要说明的是 , 这篇文章使用的分页组件样式包含了饿了么官方给出警告以后会弃用的部分

但是问题是什么呢? 问题就是我还没找到这个用 vmodel 绑定的使用方法 , 再加上现在也算是有点小忙 , 暂时没有时间去仔细探究这里的内容

真正的写在前面

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

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

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

开始

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

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

通常来说 , 对于这样一个分页组件 , 我们需要创建三个变量

// 当前页
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"	// 翻页事件
/>

根据官网提供的 API 文档我们可以得知 , 翻页事件带有一个参数

我们将它打印出来发现 , 这个参数就是你选中的第几页

所以只要在翻页事件里将第几页作为参数发给接口就可以获取到新页的数据了

结束

确实结束了 , 希望能有空在停止支持事件之前就会去把双向绑定的办法学习到

这样就能开箱即用了 , 直接复制上述代码 , 请求接口回来需要将总条数赋值上就可以了