Vue3ElementPlus使用纯前端分页展示数据,全网最新教程

JAY.LIN 收录于未分类

2024-10-29 约 2259 字预计阅读 5 分钟

https://bing.ee123.net/img/rand?artid=143295809

Vue3+ElementPlus使用纯前端分页展示数据，全网最新教程

引言

分页展示数据是一个在项目中很常见的内容，那么在这里我们就使用纯前端的形式来分页展示数据，那么如何去展示呢？

依赖

我们在这里使用的是Vue3的setup语法和ElementPlus来作为框架，首先我们需要去引入ElementPlus，如果不知道怎么去引入，那么可以通过官方来引入。

我在 上一遍

讲解表单校验的文章也提到过如何去引入，链接在这里

源代码展示

既然我们需要去分页展示数据，那么我们数据肯定是需要准备好的，我们这边就拿模拟出来的假数据作为后端api接口返回出来的数据。

<script setup>
import { ref, reactive, onMounted } from 'vue'

onMounted(() => {
updateTableData()
})

// 模拟数据
const mockData = reactive({
list:[
{ id: 1, name: '商品 A', price: 100, stock: 50 },
{ id: 2, name: '商品 B', price: 200, stock: 30 },
{ id: 3, name: '商品 C', price: 150, stock: 40 },
// ....更多假数据
],
total: 3
})

// 参数一：当前页数
// 参数二：每页数据条数
const paginationData = reactive({
pageNum: 1,
pageSize: 10
})

// 数据源
const tableData = reactive({
list: [],
total: 0
})

// 处理分页大小变化
const handleSizeChange = (newSize) => {
paginationData.pageSize = newSize
paginationData.pageNum = 1 // 重置为第一页
updateTableData()
}

// 处理当前页变化
const handleCurrentChange = (newPage) => {
paginationData.pageNum = newPage
updateTableData()
}

// 更新表格数据
const updateTableData = () => {
const start = (paginationData.pageNum - 1) * paginationData.pageSize
const end = start + paginationData.pageSize
tableData.list = mockData.list.slice(start, end)
tableData.total = mockData.total
}
</script>

<template>
<!-- 此处是 table 表单域，如果有不懂的可以看我的补充文档，在最底下 -->
<el-table :data="tableData.list" style="width: 100%">
<el-table-column prop="id" label="id"/>
<el-table-column prop="name" label="商品名称"/>
<el-table-column prop="stock" label="库存"/>
</el-table>
<!-- 此处就是展示分页的核心逻辑了 -->
<div class="pagination-info">
<el-pagination
v-model:current-page="paginationData.pageNum"
:page-size="paginationData.pageSize"
:size="small"
:background="background"
layout="total, prev, pager, next"
:total="tableData.total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</template>

<style lang="less">
.pagination-info {
text-align: center;
}
</style>

以上就是源代码的全部展示了，下面会逐步开始讲解源代码的作用。

script 代码分段讲解

onMounted(() => {
tableData.list = mockData.list
tableData.total = mockData.total
})

onMounted 是 Vue 3 中的一个生命周期钩子，它在组件被挂载到 DOM 上之后立即被调用。
onMounted 被用来初始化组件的数据。具体来说，它在组件挂载后执行一个函数，这个函数有两个主要任务：
复制模拟数据到表格数据源
设置总数据量

// 处理分页大小变化
const handleSizeChange = (newSize) => {
paginationData.pageSize = newSize
paginationData.pageNum = 1 // 重置为第一页
updateTableData()
}

// 处理当前页变化
const handleCurrentChange = (newPage) => {
paginationData.pageNum = newPage
updateTableData()
}

// 更新表格数据
const updateTableData = () => {
const start = (paginationData.pageNum - 1) _ paginationData.pageSize
const end = start + paginationData.pageSize
tableData.list = mockData.list.slice(start, end)
tableData.total = mockData.total
}

这三个方法是前端分页的核心逻辑，让我们一个一个来分析这三个函数的作用。

首先我们来看第一个方法
1.这个函数用于处理分页组件中页面大小（每页显示的条目数）的变化。newSize 是用户选择的新页面大小。当页面大小变化时，函数会更新 paginationData 对象中的 pageSize 属性为新的页面大小。同时，将 pageNum 重置为 1，即回到第一页，因为页面大小变化后，之前的分页能不再适用。最后，调用 updateTableData() 函数来更新表格数据。

再来看第二个方法
2.这个函数用于处理分页组件中当前页的变化。newPage 是用户选择的新页面编号。当前页变化时，函数会更新 paginationData 对象中的 pageNum 属性为新的页面编号。然后，同样调用 updateTableData() 函数来更新表格数据。

最后我们看第三个方法，也是最最重要的方法。
这个函数用于根据当前的分页信息更新表格数据。首先计算 start 索引，这是当前页数据的起始位置，计算方式是：
_ (paginationData.pageNum - 1) paginationData.pageSize。
接着计算 end 索引，这是当前页数据的结束位置，计算方式是：
start + paginationData.pageSize。
使用 slice(start, end) 方法从 mockData.list 中截取当前页的数据，并赋值给 tableData.list。
tableData.total 被设置为 mockData.total，这通常是总数据条目数，用于分页组件显示总页数。

template 展示讲解

那么我们最核心的三个函数已经讲解清楚了，再回到 template 代码，看看我们是如何展示出来的呢？

<el-table :data="tableData.list" style="width: 100%">
<el-table-column prop="id" label="id"/>
<el-table-column prop="name" label="商品名称"/>
<el-table-column prop="stock" label="库存"/>
</el-table>

这段代码是 element-plus 组件的中的 table 表格组件用法，在官方中是这么描述的:

用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

那么效果展示出来的话也是和表格一样的，如下图：

此时我们还缺少 template 最关键的部分，那就是分页的按钮，官方的效果展示图如下：

那么我们写出来的代码，效果就应该和上方类似，现在来讲解一下文中的 pagination 分页效果如何实现的。

 <el-pagination
v-model:current-page="paginationData.pageNum"
:page-size="paginationData.pageSize"
:size="small"
:background="background"
layout="total, prev, pager, next"
:total="tableData.total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>

解析：

v-model:current-page=“paginationData.pageNum” 这段代码动态绑定了我们在上文中定义的 pageNum，学过 vue 的动态绑定都知道效果，这边不过多赘述了。
:page-size=“paginationData.pageSize” 动态绑定了上面定义的 pageSize。
:size=“small” 这段代码的意思就是使分页按钮为 small 类型
:background=“background” 设置按钮和数字的背景颜色
layout=“total, prev, pager, next” 从左到右的布局依次是“总数量”，“后退一页”，“页码”，“前进一页”
@size-change=“handleSizeChange” 绑定的是我们定义的第一个方法，作用时是更改页码
@current-change=“handleCurrentChange” 绑定的是我们定义的第二个方法，作用是处理当前页变化。

总结

文章详细解释了如何使用 Vue3 和 ElementPlus 来实现一个基本的分页功能，包括数据的准备、分页逻辑的实现以及如何在模板中展示分页组件。通过这种方式，可以在前端有效地展示和管理大量数据，提升用户体验。

结束语

以上就是我们此次文章所讲述关于使用纯前端分页展示数据的全部知识了，如果你觉得这篇对文章对你有所帮助的话，不妨给我一个免费的点赞，关注加收藏，这对我的鼓励很大，感谢你对我文章的支持，让我们下一篇文章再见！👋