在 Vue 中实现分页功能

Vue 3月前 41

分页功能是现代 Web 应用程序中常见的功能之一。它允许用户在浏览大量数据时，将数据分成多个页面进行浏览。在 Vue 中，我们可以使用一些库和组件来实现分页功能。在本文中，我们将深入探讨如何在 Vue 中实现分页功能。

安装和使用 Vue 分页组件

Vue 分页组件是一个易于使用的插件，它提供了分页器、分页导航条和分页表格等功能。我们可以通过 npm 包管理器来安装它：

npm install vue-pagination-component --save

安装完成后，我们可以在 Vue 组件中使用它：

<template>
  <div>
    <pagination
      :currentPage="currentPage"
      :perPage="perPage"
      :total="total"
      @page-changed="onPageChanged"
    ></pagination>
  </div>
</template>

<script>
import Pagination from 'vue-pagination-component';

export default {
  components: {
    Pagination,
  },
  data() {
    return {
      currentPage: 1,
      perPage: 10,
      total: 100,
    };
  },
  methods: {
    onPageChanged(page) {
      this.currentPage = page;
    },
  },
};
</script>

在上面的代码中，我们使用了一个名为 pagination 的组件。它需要传递三个属性：currentPage、perPage 和 total。它还需要一个事件处理程序 @page-changed，用于在分页器的页码更改时更新当前页码。

实现自定义分页器

如果您需要更多的自定义功能，您可以使用自定义分页器来实现分页功能。在 Vue 中，我们可以使用计算属性和方法来实现自定义分页器。

<template>
  <div>
    <ul>
      <li v-for="page in pages" :key="page">
        <a href="#" @click.prevent="onPageClick(page)">{{ page }}</a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      perPage: 10,
      total: 100,
    };
  },
  computed: {
    pages() {
      let pages = [];
      let from = Math.max(1, this.currentPage - 2);
      let to = Math.min(this.currentPage + 2, this.totalPages);

      if (from > 1) {
        pages.push(1);
        if (from > 2) {
          pages.push('...');
        }
      }

      for (let i = from; i <= to; i++) {
        pages.push(i);
      }

      if (to < this.totalPages) {
        if (to < this.totalPages - 1) {
          pages.push('...');
        }
        pages.push(this.totalPages);
      }

      return pages;
    },
    totalPages() {
      return Math.ceil(this.total / this.perPage);
    },
  },
  methods: {
    onPageClick(page) {
      this.currentPage = page;
    },
  },
};
</script>

在上面的代码中，我们使用了一个名为 pages 的计算属性来计算分页器中的页码。我们还使用一个名为 totalPages 的计算属性来计算总页数。最后，我们使用一个名为 onPageClick 的方法来处理点击分页器中的页码事件。

实现服务端分页

如果您的数据是从服务器获取的，您可以使用服务端分页来实现分页功能。在 Vue 中，我们可以使用 Axios 库来获取服务器数据，并使用计算属性和方法来实现服务端分页。

<template>
  <div>
    <ul>
      <li v-for="page in pages" :key="page">
        <a href="#" @click.prevent="onPageClick(page)">{{ page }}</a>
      </li>
    </ul>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.email }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      currentPage: 1,
      perPage: 10,
      total: 0,
      users: [],
    };
  },
  computed: {
    pages() {
      let pages = [];
      let from = Math.max(1, this.currentPage - 2);
      let to = Math.min(this.currentPage + 2, this.totalPages);

      if (from > 1) {
        pages.push(1);
        if (from > 2) {
          pages.push('...');
        }
      }

      for (let i = from; i <= to; i++) {
        pages.push(i);
      }

      if (to < this.totalPages) {
        if (to < this.totalPages - 1) {
          pages.push('...');
        }
        pages.push(this.totalPages);
      }

      return pages;
    },
    totalPages() {
      return Math.ceil(this.total / this.perPage);
    },
  },
  methods: {
    onPageClick(page) {
      this.currentPage = page;
      this.getUsers();
    },
    getUsers() {
      axios
        .get(`/api/users?page=${this.currentPage}&per_page=${this.perPage}`)
        .then((response) => {
          this.total = response.data.total;
          this.users = response.data.users;
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
  mounted() {
    this.getUsers();
  },
};
</script>