当前位置：首页 > VUE

vue前端实现分页

2026-01-15 03:42:31VUE

实现分页的基本思路

在Vue中实现分页通常需要结合后端API返回的数据和前端的分页组件。核心逻辑包括计算总页数、处理当前页码变化以及动态加载数据。

使用Element UI的分页组件

Element UI提供了现成的分页组件el-pagination，适合快速集成：

<template>
  <div>
    <el-table :data="tableData">
      <!-- 表格列定义 -->
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      layout="prev, pager, next">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  methods: {
    fetchData() {
      // 调用API获取数据，传递currentPage和pageSize参数
      axios.get('/api/data', {
        params: {
          page: this.currentPage,
          size: this.pageSize
        }
      }).then(response => {
        this.tableData = response.data.list
        this.total = response.data.total
      })
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchData()
    }
  },
  created() {
    this.fetchData()
  }
}
</script>

自定义分页组件

如果需要完全自定义分页逻辑，可以手动实现：

<template>
  <div>
    <ul class="pagination">
      <li v-for="page in pages" :key="page">
        <button @click="goToPage(page)">{{ page }}</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    currentPage: Number,
    totalItems: Number,
    itemsPerPage: Number
  },
  computed: {
    totalPages() {
      return Math.ceil(this.totalItems / this.itemsPerPage)
    },
    pages() {
      const range = []
      for (let i = 1; i <= this.totalPages; i++) {
        range.push(i)
      }
      return range
    }
  },
  methods: {
    goToPage(page) {
      this.$emit('page-changed', page)
    }
  }
}
</script>

分页与路由结合

在单页应用中，可以将分页状态保存在URL中：

methods: {
  handleCurrentChange(page) {
    this.$router.push({
      query: { ...this.$route.query, page }
    })
    this.fetchData()
  }
},
created() {
  this.currentPage = parseInt(this.$route.query.page) || 1
}

分页性能优化

对于大数据量分页，考虑实现虚拟滚动或无限滚动：

window.addEventListener('scroll', () => {
  if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
    this.currentPage++
    this.fetchData()
  }
})

分页样式定制

通过CSS可以自定义分页组件的外观：

vue前端实现分页

.pagination {
  display: flex;
  list-style: none;
}
.pagination li {
  margin: 0 5px;
}
.pagination button {
  padding: 5px 10px;
  border: 1px solid #ddd;
}
.pagination button.active {
  background-color: #409EFF;
  color: white;
}

以上方法涵盖了从简单到复杂的分页实现方案，可根据项目需求选择合适的方式。与后端API交互时，确保参数命名一致（如page/size或currentPage/pageSize）。