使用vue3+＜script setup＞+element-plus中el-table前端切片完成分页效果

<template>
  <div>
    <el-table :data="visibleData" :row-key="row => row.id">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
    ></el-pagination>
  </div>
</template>

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

const tableData = reactive([]);
const visibleData = reactive([]);
const currentPage = ref(1); // 当前页码
const pageSize = 10; // 每页显示的数据数量
const total = ref(0); // 总数据量

const loadData = () => {
  // 模拟异步请求数据
  setTimeout(() => {
    // 假设从后端获取到的数据为 response
    const response = {
      data: [], // 当前页的数据
      total: 100 // 总数据量
    };
    tableData.splice(0, tableData.length, ...response.data);
    total.value = response.total;
    updateVisibleData();
  }, 1000);
};

const updateVisibleData = () => {
  const start = (currentPage.value - 1) * pageSize;
  const end = currentPage.value * pageSize;
  visibleData.splice(0, visibleData.length, ...tableData.slice(start, end));
};

const handleCurrentChange = (page) => {
  currentPage.value = page;
  updateVisibleData();
};

onMounted(loadData);
</script>

在上面的示例中，我们使用了?<script setup>?语法来编写组件逻辑。通过?import?引入所需的函数和变量，然后在?<script setup>?中直接使用它们。

在?onMounted?钩子函数中，我们调用?loadData?方法来加载初始数据。

在?handleCurrentChange?方法中，我们更新?currentPage?的值，并调用?updateVisibleData?方法来更新可见数据。

通过这样的实现，你可以在前端完成分页效果，并根据当前页码和每页显示的数据数量来展示对应的数据。