vue实现分页功能

下面给出“Vue实现分页功能”的完整攻略：

1.需求分析

要实现分页功能，我们首先需要对其进行需求分析。常见的分页功能通常包含以下需求：

• 当前页码的展示；
• 总页数的展示；
• 点击页码进行跳转；
• 上一页和下一页的按钮；
• 可以手动输入页码进行跳转。

2.实现方法

根据需求分析，我们可以采用以下方法来实现：

2.1.设置数据和计算属性

首先，在Vue实例中设置两个数据：currentPage(当前页)和pageSize(每页数据条数)。然后使用计算属性pageCount(总页数)计算总页数。

<template>
  <div>
    <ul>
      <li v-for="n in pageCount" :key="n">
        <a href="#" :class="{ active: n === currentPage }">{{n}}</a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1, // 当前页
      pageSize: 10, // 每页数据条数
      total: 100, // 总数据条数
    };
  },
  computed: {
    pageCount() {
      return Math.ceil(this.total / this.pageSize); // 计算总页数
    }
  }
};
</script>

2.2.点击页码进行跳转

使用v-on指令绑定click事件，点击页码后修改当前页码，即可实现跳转到对应页。

<a href="#" :class="{ active: n === currentPage }" v-on:click="currentPage = n">{{n}}</a>

2.3.实现上一页和下一页按钮

同样使用v-on指令绑定click事件，修改当前页码实现跳转。

<ul>
  <li>
    <a href="#" v-on:click="currentPage--">上一页</a>
  </li>
  <li v-for="n in pageCount" :key="n">
    <a href="#" :class="{ active: n === currentPage }" v-on:click="currentPage = n">{{n}}</a>
  </li>
  <li>
    <a href="#" v-on:click="currentPage++">下一页</a>
  </li>
</ul>

2.4.手动输入页码进行跳转

使用input元素和v-model指令实现输入框，然后绑定keyup.enter事件，如果输入的页码符合当前总页数的范围，则修改当前页码，实现跳转。

<div>
  <input type="text" v-model="inputPage" v-on:keyup.enter="goToPage(inputPage)">
  <button v-on:click="goToPage(inputPage)">Go</button>
</div>

<script>
export default {
  data() {
    return {
      currentPage: 1, // 当前页
      pageSize: 10, // 每页数据条数
      total: 100, // 总数据条数
      inputPage: '', // 手动输入的页码
    };
  },
  computed: {
    pageCount() {
      return Math.ceil(this.total / this.pageSize); // 计算总页数
    }
  },
  methods: {
    goToPage(page) {
      if (page >= 1 && page <= this.pageCount) {
        this.currentPage = page;
      }
    }
  }
};
</script>

3.示例说明

下面给出两个示例说明：

3.1.基础分页功能

一个基础的分页功能示例，包含了上一页、下一页、总页数、页码点击跳转、手动输入跳转等功能。代码演示：https://codepen.io/kuleyang/pen/dyWbYGr

3.2.带搜索过滤功能的分页

示例展示了带搜索过滤功能的分页。搜索时将数据过滤后展示在页面，同时配合分页功能进行数据的展示。代码演示：https://codepen.io/kuleyang/pen/YzPXjzv