当前位置：首页 > VUE

vue实现分页缩进

2026-01-17 17:14:21VUE

vue实现分页缩进的方法

使用v-for和计算属性实现分页

通过计算属性对数据进行分页处理，结合v-for渲染分页数据。计算属性根据当前页码和每页显示数量对原始数据进行切片。

computed: {
  paginatedData() {
    const start = (this.currentPage - 1) * this.itemsPerPage
    const end = start + this.itemsPerPage
    return this.data.slice(start, end)
  },
  totalPages() {
    return Math.ceil(this.data.length / this.itemsPerPage)
  }
}

添加分页导航组件

创建分页导航组件，包含页码按钮和导航控制。使用v-for渲染页码按钮，通过v-bind动态绑定active类。

<div class="pagination">
  <button @click="prevPage" :disabled="currentPage === 1">Previous</button>
  <button 
    v-for="page in totalPages" 
    :key="page"
    @click="goToPage(page)"
    :class="{ active: currentPage === page }"
  >
    {{ page }}
  </button>
  <button @click="nextPage" :disabled="currentPage === totalPages">Next</button>
</div>

实现分页缩进样式

使用CSS对分页导航进行样式设计，特别是当前选中页面的突出显示和缩进效果。

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.pagination button {
  margin: 0 5px;
  padding: 5px 10px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
}

.pagination button.active {
  background: #42b983;
  color: white;
  border-color: #42b983;
  transform: scale(1.1);
  margin: 0 8px;
}

添加页面跳转功能

在methods中实现页面跳转功能，包括上一页、下一页和直接跳转到指定页面。

methods: {
  prevPage() {
    if (this.currentPage > 1) {
      this.currentPage--
    }
  },
  nextPage() {
    if (this.currentPage < this.totalPages) {
      this.currentPage++
    }
  },
  goToPage(page) {
    this.currentPage = page
  }
}

使用第三方分页组件

对于更复杂的需求，可以考虑使用第三方分页组件如element-ui的el-pagination。

vue实现分页缩进

import { ElPagination } from 'element-ui'

export default {
  components: {
    ElPagination
  },
  // ...其他代码
}

<el-pagination
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-size="itemsPerPage"
  :total="totalItems"
  layout="prev, pager, next"
>
</el-pagination>