Vue分页组件实现过程详解

下面是详细讲解“Vue分页组件实现过程详解”的完整攻略。

1. 分页组件概述

分页组件是网页中常用的组件之一。它用于在一页内容过多的情况下，将内容分为多页展示，便于用户浏览和操作。Vue.js在处理分页组件时，提供了一种简单且高度可定制的方式。

2. 分页组件实现的基本步骤

2.1 设计组件结构：包括需求分析，页面布局设计，功能需求设计。

2.2 实现组件结构：分别实现分页栏，页码等子组件。

2.3 完善功能：组件常见功能包括点击页码跳转到指定页面，改变每页显示的数据条数，更新分页状态等。

3.分页组件示例1

以下示例中，我们将实现一个简单的分页组件，该组件可以根据用户点击页码或点击“下一页”和“上一页”按钮，让用户浏览大量数据。

3.1 实现组件结构

我们先在Vue中定义一个名为page的组件。在组件中，我们使用props传递需要渲染的数据和每页显示的数据条数：

<template>
  <div>
    <!-- 待渲染数据 -->
    <ul>
      <li v-for="item in data">{{ item }}</li>
    </ul>

    <!-- 分页效果 -->
    <div>
      <button :disabled="currentPage === 1" @click="gotoPage(currentPage - 1)">上一页</button>
      <span v-for="index in pages" :key="index" @click="gotoPage(index)" :class="{'active': currentPage === index}">
        {{ index }}
      </span>
      <button :disabled="currentPage === totalPages" @click="gotoPage(currentPage + 1)">下一页</button>

      <select v-model="pageSize" @change="changePageSize">
        <option v-for="size in pageSizes">{{ size }}条/页</option>
      </select>
      <span>{{ currentPage }} / {{ totalPages }}页</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'page',
  props: {
    data: {
      type: Array,
      default: []
    },
    count: {
      type: Number,
      default: 0
    },
    pageSize: {
      type: Number,
      default: 10
    },
    pageSizes: {
      type: Array,
      default: () => [10, 20, 30, 40]
    }
  },
  data() {
    return {
      currentPage: 1
    }
  },
  computed: {
    // the total number of pages
    totalPages() {
      return Math.ceil(this.count / this.pageSize)
    },
    // the page list to display in the pagination bar
    pages() {
      const pageCount = 7
      const currentPage = this.currentPage
      const totalPages = this.totalPages
      const half = Math.floor(pageCount / 2)

      let start = Math.max(currentPage - half, 1)
      let end = Math.min(start + pageCount - 1, totalPages)

      if (end - start < pageCount) {
        start = end - pageCount + 1
      }

      const pagesList = []
      for (let i = start; i <= end; i++) {
        pagesList.push(i)
      }

      return pagesList
    }
  },
  methods: {
    gotoPage(pageNumber) {
      if (pageNumber < 1) {
        this.currentPage = 1
      } else if (pageNumber > this.totalPages) {
        this.currentPage = this.totalPages
      } else {
        this.currentPage = pageNumber
      }
      // emit out the page change event
      this.$emit('page-changed', { page: this.currentPage, size: this.pageSize })
    },
    changePageSize(event) {
      const newSize = parseInt(event.target.value, 10)
      if (this.pageSize !== newSize) {
        this.currentPage = 1
        this.$emit('page-changed', { page: this.currentPage, size: newSize })
      }
    }
  }
}
</script>

3.2 完善功能

以上代码中的功能实现时针对示例1所实现的分页组件，包括基本的页码、上一页、下一页、数据条数的显示和控制，用户可以根据自己的需求进行二次开发。

4. 分页组件示例2

以下示例中，我们将实现一个复杂一些的分页组件，该组件可以根据用户输入的搜索条件，从服务器请求数据，并可以支持跳转到指定的页码。

4.1 实现组件结构

我们同样先在Vue中定义一个名为page的组件，但与上一个示例不同的是，该组件的数据来源于服务器端，我们需要通过ajax等方式从服务器获取数据。

<template>
  <div>
    <input type="text" v-model="searchText" placeholder="请输入搜索关键词" @keyup.enter="search"/>
    <button @click="search">搜索</button>

    <table>
      <thead>
        <tr>
          <th>商品名称</th>
          <th>商品价格</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in list" :key="item.id">
          <td>{{ item.name }}</td>
          <td>{{ item.price }}</td>
        </tr>
      </tbody>
    </table>

    <!-- 分页效果 -->
    <div>
      <button :disabled="currentPage === 1" @click="gotoPage(currentPage - 1)">上一页</button>
      <span v-for="index in pages" :key="index" @click="gotoPage(index)" :class="{'active': currentPage === index}">
        {{ index }}
      </span>
      <button :disabled="currentPage === totalPages" @click="gotoPage(currentPage + 1)">下一页</button>
      <input type="text" v-model="jumpPage" placeholder="跳转到第几页" @keyup.enter="gotoPage(jumpPage)">

      <span>{{ currentPage }} / {{ totalPages }}页</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'page',
  data() {
    return {
      list: [],
      count: 0,
      currentPage: 1,
      pageSize: 10,
      keywords: '',
      jumpPage: ''
    }
  },
  computed: {
    // the total number of pages
    totalPages() {
      return Math.ceil(this.count / this.pageSize)
    },
    // the page list to display in the pagination bar
    pages() {
      if (this.totalPages <= 9) {
        return Array.from({ length: this.totalPages }, (_, index) => index + 1)
      } else if (this.currentPage <= 5) {
        return Array.from({ length: 6 }, (_, index) => index + 1).concat(['...'], [this.totalPages])
      } else if (this.currentPage + 4 >= this.totalPages) {
        return [1, '...', ...Array.from({ length: 6 }, (_, index) => this.totalPages - 5 + index)]
      } else {
        return [
          1,
          '...', 
          ...Array.from({ length: 5 }, (_, index) => this.currentPage - 2 + index),
          '...',
          this.totalPages
        ]
      }
    }
  },
  methods: {
    search() {
      this.getList()
    },
    getList() {
      //ajax调用 获取数据
    },
    gotoPage(pageNumber) {
      if (!pageNumber || pageNumber < 1) {
        this.currentPage = 1
      } else if (pageNumber > this.totalPages) {
        this.currentPage = this.totalPages
      } else {
        this.currentPage = pageNumber
      }

      this.getList()
    },
  }
}
</script>

4.2 完善功能

通过上述代码实现了使用复杂搜索条件获取服务器端数据，并实现跳转到指定页码的功能。但该示例中页面渲染、分页组件的表现形式可以根据自己的需求进行二次开发。