分页vue 3

Question

我有一个本地数组，其中包含传递给表的数据。我创建了变量:页面、限制、totalPage和函数changePage。在钩子onMounted中，我根据给定的限制计算页面数。通过v-for循环，显示页面并使它们在函数上可点击，但我不知道如何设置显示的表元素的限制，以及如何使分页工作。

<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="searchAndSort" />

  <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: {
    ...
  },
  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 totalPage = ref(0);

    onMounted(() => {
      totalPage.value = Math.ceil(tableData.value.length / limit.value);
    });

    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(() => {
    ...
    });

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

      changeToggle,
      hideDialog,
      createPost,

      sortedPosts,
      searchAndSort,

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

Answer 1

为了显示数组的一部分，可以使用Array.slice。(文档)

在您的searchAndSort中，您应该这样做：

const searchAndSort = computed(() => {
    const start = (page.value - 1) * limit.value;
    const end = (page.value * limit.value)+1;
    return tableData.value.slice(start, end);
});

page - 1 * limit -最初这将导致0 * 5，意思是从0开始(因为页面从1开始使用-1)。当您转到第二个页面时，这将导致1 * 5等。end是由其自身乘以页面的限制来定义的。因此，在第一页上，将数组从0切片到5，在第二页，从5到10，等等。

const end = (page.value * limit.value)+1; - +1将为您提供第5个元素，因为Array.slice在end索引处导出项目)

您也应该添加一些检查。