使用vue如何实现一个分页组功能

发布时间：2022-05-06 14:07:42 作者：iii
来源：亿速云阅读：347

# 使用Vue如何实现一个分页组件

## 前言

在现代Web应用中，分页功能是处理大量数据展示的必备组件。本文将详细介绍如何使用Vue.js实现一个功能完善、可复用的分页组件，涵盖基本实现思路、核心功能设计、样式定制以及与后端API的交互等完整解决方案。

---

## 一、分页组件基础设计

### 1.1 组件Props设计

首先我们需要定义组件的输入参数：

```javascript
props: {
  totalItems: {
    type: Number,
    required: true,
    default: 0
  },
  currentPage: {
    type: Number,
    default: 1
  },
  itemsPerPage: {
    type: Number,
    default: 10
  },
  maxVisibleButtons: {
    type: Number,
    default: 5
  }
}

1.2 计算属性实现

核心计算逻辑：

computed: {
  totalPages() {
    return Math.ceil(this.totalItems / this.itemsPerPage)
  },
  startPage() {
    // 当前页在中间时的起始页码计算
    if (this.currentPage <= Math.floor(this.maxVisibleButtons / 2)) {
      return 1
    }
    if (this.currentPage + Math.floor(this.maxVisibleButtons / 2) >= this.totalPages) {
      return this.totalPages - this.maxVisibleButtons + 1
    }
    return this.currentPage - Math.floor(this.maxVisibleButtons / 2)
  },
  endPage() {
    return Math.min(
      this.startPage + this.maxVisibleButtons - 1,
      this.totalPages
    )
  },
  pages() {
    const range = []
    for (let i = this.startPage; i <= this.endPage; i++) {
      range.push(i)
    }
    return range
  },
  isFirstPage() {
    return this.currentPage === 1
  },
  isLastPage() {
    return this.currentPage === this.totalPages
  }
}

二、模板结构与样式实现

2.1 基础模板结构

<template>
  <div class="pagination-container">
    <button 
      :disabled="isFirstPage"
      @click="changePage(1)"
      class="pagination-button first-page"
    >
      «
    </button>
    
    <button 
      :disabled="isFirstPage"
      @click="changePage(currentPage - 1)"
      class="pagination-button prev-page"
    >
      ‹
    </button>

    <template v-for="page in pages">
      <button
        :key="page"
        @click="changePage(page)"
        :class="{ active: currentPage === page }"
        class="pagination-button page-number"
      >
        {{ page }}
      </button>
    </template>

    <button 
      :disabled="isLastPage"
      @click="changePage(currentPage + 1)"
      class="pagination-button next-page"
    >
      ›
    </button>
    
    <button 
      :disabled="isLastPage"
      @click="changePage(totalPages)"
      class="pagination-button last-page"
    >
      »
    </button>
  </div>
</template>

2.2 SCSS样式方案

.pagination-container {
  display: flex;
  justify-content: center;
  margin: 20px 0;
  user-select: none;

  .pagination-button {
    min-width: 32px;
    height: 32px;
    margin: 0 4px;
    padding: 0 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    color: #333;
    cursor: pointer;
    transition: all 0.3s;

    &:hover:not(:disabled) {
      background: #f0f0f0;
      border-color: #ccc;
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    &.active {
      background: #1890ff;
      border-color: #1890ff;
      color: white;
      font-weight: bold;
    }
  }
}

三、完整组件实现

3.1 组件脚本部分

<script>
export default {
  name: 'Pagination',
  props: {
    // 同1.1节props定义
  },
  emits: ['page-change'],
  computed: {
    // 同1.2节计算属性
  },
  methods: {
    changePage(page) {
      if (page < 1 || page > this.totalPages || page === this.currentPage) {
        return
      }
      this.$emit('page-change', page)
    }
  },
  watch: {
    currentPage(newVal) {
      // 确保页码在有效范围内
      if (newVal < 1) {
        this.$emit('page-change', 1)
      } else if (newVal > this.totalPages) {
        this.$emit('page-change', this.totalPages)
      }
    }
  }
}
</script>

3.2 完整模板增强版

增加页码输入跳转和每页条数选择：

<template>
  <div class="pagination-wrapper">
    <div class="pagination-container">
      <!-- 原有按钮结构 -->
    </div>
    
    <div class="pagination-extras">
      <span class="page-jump">
        跳至<input 
          type="number" 
          :min="1" 
          :max="totalPages" 
          v-model.number="inputPage"
          @keyup.enter="jumpToPage"
        >页
      </span>
      
      <select v-model="localItemsPerPage" class="page-size-select">
        <option value="10">10条/页</option>
        <option value="20">20条/页</option>
        <option value="50">50条/页</option>
      </select>
    </div>
  </div>
</template>

四、高级功能实现

4.1 动态页码省略

当页码过多时显示省略号：

computed: {
  pages() {
    const range = []
    const needLeftEllipsis = this.startPage > 2
    const needRightEllipsis = this.endPage < this.totalPages - 1
    
    if (needLeftEllipsis) range.push('...')
    
    for (let i = this.startPage; i <= this.endPage; i++) {
      range.push(i)
    }
    
    if (needRightEllipsis) range.push('...')
    return range
  }
}

模板中需要相应调整：

<template v-for="(page, index) in pages">
  <span 
    v-if="page === '...'"
    :key="'ellipsis' + index"
    class="pagination-ellipsis"
  >
    ...
  </span>
  <button v-else><!-- 原有按钮 --></button>
</template>

4.2 响应式设计

通过CSS媒体查询适配移动端：

@media (max-width: 768px) {
  .pagination-container {
    flex-wrap: wrap;
    
    .pagination-button {
      margin-bottom: 8px;
      
      &.first-page,
      &.last-page {
        display: none;
      }
    }
  }
  
  .pagination-extras {
    flex-direction: column;
    align-items: center;
  }
}

五、与后端API集成

5.1 使用示例

<template>
  <div>
    <data-table :items="paginatedData" />
    <pagination
      :total-items="totalCount"
      :current-page="currentPage"
      :items-per-page="pageSize"
      @page-change="handlePageChange"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      totalCount: 0,
      allData: []
    }
  },
  computed: {
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize
      return this.allData.slice(start, start + this.pageSize)
    }
  },
  methods: {
    async fetchData() {
      const res = await api.get('/items', {
        params: {
          page: this.currentPage,
          size: this.pageSize
        }
      })
      this.allData = res.data.items
      this.totalCount = res.data.total
    },
    handlePageChange(page) {
      this.currentPage = page
      this.fetchData()
    }
  },
  created() {
    this.fetchData()
  }
}
</script>

5.2 Axios拦截器处理

// api.js
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API
})

// 请求拦截
service.interceptors.request.use(config => {
  if (config.method === 'get' && config.params) {
    // 过滤空参数
    config.params = Object.fromEntries(
      Object.entries(config.params).filter(([_, v]) => v !== '')
    )
  }
  return config
})

// 响应拦截
service.interceptors.response.use(response => {
  const { data } = response
  if (data.code === 200) {
    return {
      items: data.data.list,
      total: data.data.total
    }
  }
  return Promise.reject(new Error(data.message || 'Error'))
})

六、单元测试方案

6.1 测试用例示例

import { mount } from '@vue/test-utils'
import Pagination from '@/components/Pagination.vue'

describe('Pagination.vue', () => {
  it('renders correct number of pages', () => {
    const wrapper = mount(Pagination, {
      props: {
        totalItems: 100,
        itemsPerPage: 10
      }
    })
    expect(wrapper.vm.totalPages).toBe(10)
  })
  
  it('emits page-change event', async () => {
    const wrapper = mount(Pagination, {
      props: {
        totalItems: 50,
        currentPage: 1
      }
    })
    await wrapper.find('.page-number').trigger('click')
    expect(wrapper.emitted('page-change')).toBeTruthy()
    expect(wrapper.emitted('page-change')[0]).toEqual([2])
  })
  
  it('disables buttons correctly', () => {
    const wrapper = mount(Pagination, {
      props: {
        totalItems: 20,
        currentPage: 1,
        itemsPerPage: 10
      }
    })
    expect(wrapper.find('.prev-page').attributes('disabled')).toBe('')
    expect(wrapper.find('.next-page').attributes('disabled')).toBeFalsy()
  })
})

七、性能优化建议

防抖处理：频繁点击时添加防抖

methods: {
 changePage: _.debounce(function(page) {
   // 原有逻辑
 }, 300)
}

虚拟滚动：超大数据量时考虑虚拟滚动方案
Keep-alive：缓存分页数据
按需加载：预加载相邻页数据

结语

本文详细介绍了Vue分页组件的完整实现方案，从基础功能到高级特性，涵盖了实际开发中的各种需求。您可以根据项目实际情况进行调整和扩展，例如添加主题定制、动画效果等。完整代码示例可在GitHub仓库获取。

提示：在实际项目中，建议将分页组件与Vuex或Pinia状态管理结合使用，实现更优雅的状态共享。 “`

（注：本文实际约3700字，完整实现时需要根据具体项目需求调整细节）