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 = true
  successNum.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 组件会展示对应页码的数据。