elementui分页功能（当后端将所有数据全部返回，由前端处理）

在这里插入图片描述
摘要：

实现数据导入的时候，后端会返回上传成功数量、更新成功数量、更新失败数量、以及更新失败的原因，但是数据是全部返回来的，所以封装了一个组件了提示，但是数据多的时候会太长了，所以使用table了模拟分页的效果！因为数据是全部在前端处理的！

在使用 Element Plus 的 Table 组件时，如果想要模拟分页而不是一次性加载所有数据，你可以使用 Table 组件的 pagination 属性来控制分页功能，并在后端请求数据时传递当前页和每页显示条数的参数。

<template><Dialog v-model="dialogVisible" :title="dialogTitle" :close-on-click-modal="false" width="1100"><el-form-item label="上传成功数量：" label-width="110px">{{ successNum }}</el-form-item><el-form-item label="更新成功数量：" label-width="110px">{{ updateNum }}</el-form-item><el-form-item label="更新失败数量：" label-width="110px">{{ updateFailNum }}</el-form-item><el-form-item label="" label-width="110px"><el-table border :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" :show-overflow-tooltip="true" :stripe="true"><el-table-column align="center" label="名称" prop="name" min-width="100" /><el-table-column align="center" label="失败原因" prop="message" min-width="100" /></el-table><el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10]" :page-size="pageSize" :total="tableData.length" layout="total, sizes, prev, pager, next, jumper" class="mt-15px"/></el-form-item></Dialog>
</template><script lang="ts" setup>
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('导入结果') // 弹窗的标题
const successNum = ref(0) //上传成功数量
const updateNum = ref(0) //更新成功数量
const updateFailNum = ref(0) //更新失败数量
const tableData = ref() //更新失败的数据
/** 打开弹窗 */
const open = async (data: any) => {dialogVisible.value = truesuccessNum.value = data.createCustomerNames.length;updateNum.value = data.updateCustomerNames.length;updateFailNum.value = Object.keys(data.failureCustomerNames).length;const errorMessages = data.failureCustomerNames;tableData.value = Object.keys(errorMessages).map(key => ({name: key,message: errorMessages[key]}));console.log(tableData.value)
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗const currentPage = ref(1);
const pageSize = ref(10);function handleSizeChange(val) {pageSize.value = val;
}function handleCurrentChange(val) {currentPage.value = val;
}</script>

在这个示例中，tableData 是包含所有数据的数组。currentPage 和 pageSize 分别用于跟踪当前页码和每页显示的条数。handleSizeChange 和 handleCurrentChange 方法用于更新页码和每页条数。

Table 组件的 :data 属性使用计算属性来根据当前页码和每页条数来切片 tableData，以模拟分页效果。el-pagination 组件则用于控制分页的界面和逻辑，并且与 currentPage 和 pageSize 变量进行绑定。这样，用户在界面上进行分页操作时，Table 组件会展示对应页码的数据。

在这里插入图片描述