Vue3本地数组表格分页疑问：如何设置显示条数及启用分页

要让分页真正生效，核心是根据当前页码和每页条数，对过滤排序后的数组进行截取，同时确保总页数能随数据变化自动更新。以下是具体修改步骤：

1. 用计算属性自动计算总页数 #

原来仅在onMounted里计算总页数，无法应对数据新增、搜索/排序后总数变化的情况。把totalPage改成计算属性，基于过滤排序后的searchAndSort数据实时计算：

// 移除onMounted里的totalPage计算代码
// 替换成以下计算属性
const totalPage = computed(() => {
  return Math.ceil(searchAndSort.value.length / limit.value);
});

2. 创建分页后的数据计算属性 #

基于已完成搜索和排序的searchAndSort数组，通过slice方法截取当前页码对应的条目：

const paginatedPosts = computed(() => {
  // 计算当前页数据的起始索引
  const startIdx = (page.value - 1) * limit.value;
  // 计算结束索引（不包含该索引）
  const endIdx = startIdx + limit.value;
  // 返回截取后的目标数组
  return searchAndSort.value.slice(startIdx, endIdx);
});

3. 把分页后的数据传给Table组件 #

修改模板里的Table组件绑定，用分页后的paginatedPosts替代原来的searchAndSort：

<Table :tableData="paginatedPosts" />

完整修改后的代码 #

<template>
  <div class="containerApp">
    <Dialog
      :showForm="showForm"
      @changeToggle="changeToggle"
      @hideDialog="hideDialog"
    >
      <PostForm @create="createPost" />
    </Dialog>
    <Select v-model="selectedSort" :options="sortOptions" />
  </div>

  <input type="text" v-model="searchQuery" />

  <!-- 改用分页后的数据 -->
  <Table :tableData="paginatedPosts" />

  <div class="page_wrapper">
    <div
      v-for="(pageNumber, i) in totalPage"
      :key="i"
      @click="changePage(pageNumber)"
      class="page"
      :class="{ 'current-page': page === pageNumber }"
    >
      {{ pageNumber }}
    </div>
  </div>
</template>

<script>
import Table from "./components/Table.vue";
import Dialog from "./components/UI/Dialog.vue";
import PostForm from "./components/PostForm.vue";
import Select from "./components/UI/Select.vue";

import { ref } from "@vue/reactivity";
import { computed, onMounted } from "@vue/runtime-core";

export default {
  name: "App",
  components: {
    Table,
    Dialog,
    PostForm,
    Select
  },
  setup() {
    const showForm = ref(false);
    const searchQuery = ref("");
    const tableData = ref([
      // 你的本地数据
    ]);
    const selectedSort = ref("");
    const sortOptions = ref([
      // 你的排序选项
    ]);

    const page = ref(1);
    const limit = ref(5);

    const changePage = (pageNumber) => {
      page.value = pageNumber;
    };

    const createPost = (post) => {
      tableData.value.push(post);
      showForm.value = false;
    };
    const changeToggle = (toggle) => {
      showForm.value = !toggle;
    };
    const hideDialog = (val) => {
      showForm.value = val;
    };

    const sortedPosts = computed(() => {
      // 你的排序逻辑
    });

    const searchAndSort = computed(() => {
      // 你的搜索+排序逻辑
    });

    // 自动计算总页数
    const totalPage = computed(() => {
      return Math.ceil(searchAndSort.value.length / limit.value);
    });

    // 分页后的数据
    const paginatedPosts = computed(() => {
      const startIdx = (page.value - 1) * limit.value;
      const endIdx = startIdx + limit.value;
      return searchAndSort.value.slice(startIdx, endIdx);
    });

    return {
      showForm,
      tableData,
      selectedSort,
      sortOptions,
      searchQuery,

      changeToggle,
      hideDialog,
      createPost,

      sortedPosts,
      searchAndSort,
      paginatedPosts,

      page,
      limit,
      totalPage,
      changePage,
    };
  },
};
</script>

关键说明 #

• 当你新增数据、搜索或排序时，searchAndSort会自动更新，totalPage和paginatedPosts也会随之重新计算，保证分页状态始终正确。
• slice(startIdx, endIdx)方法不会修改原数组，只是返回截取后的新数组，符合Vue响应式的最佳实践。

内容的提问来源于stack exchange，提问作者Tertiadecima