vue实现每页显示条数

实现每页显示条数的基本配置

在Vue中实现分页功能通常需要结合分页组件和数据管理。通过v-model绑定当前页码和每页显示条数，动态计算分页数据。

<template>
  <div>
    <select v-model="pageSize" @change="handlePageSizeChange">
      <option value="10">10条/页</option>
      <option value="20">20条/页</option>
      <option value="50">50条/页</option>
    </select>

    <ul>
      <li v-for="item in paginatedData" :key="item.id">{{ item.name }}</li>
    </ul>

    <button @click="currentPage--" :disabled="currentPage === 1">上一页</button>
    <span>{{ currentPage }} / {{ totalPages }}</span>
    <button @click="currentPage++" :disabled="currentPage === totalPages">下一页</button>
  </div>
</template>

计算分页数据逻辑

通过计算属性实现数据分片，根据当前页码和每页条数返回对应数据段。

<script>
export default {
  data() {
    return {
      allData: [], // 原始数据
      currentPage: 1,
      pageSize: 10
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.allData.length / this.pageSize)
    },
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return this.allData.slice(start, end)
    }
  },
  methods: {
    handlePageSizeChange() {
      this.currentPage = 1 // 切换每页条数时重置到第一页
    }
  }
}
</script>

结合第三方分页组件

使用Element UI等库可以快速实现专业分页功能。el-pagination组件提供现成的每页条数选择器。

<template>
  <el-pagination
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :page-sizes="[10, 20, 50, 100]"
    :total="totalItems"
    layout="total, sizes, prev, pager, next"
  />
</template>

后端分页实现方案

当前端数据量过大时，建议采用后端分页。通过API参数传递页码和每页条数。

methods: {
  fetchData() {
    axios.get('/api/items', {
      params: {
        page: this.currentPage,
        size: this.pageSize
      }
    }).then(response => {
      this.paginatedData = response.data.items
      this.totalItems = response.data.total
    })
  }
}

本地存储记住用户选择

使用localStorage保存用户选择的每页条数偏好，提升用户体验。

mounted() {
  const savedSize = localStorage.getItem('preferredPageSize')
  if (savedSize) this.pageSize = Number(savedSize)
},
methods: {
  handlePageSizeChange() {
    localStorage.setItem('preferredPageSize', this.pageSize)
    this.currentPage = 1
    this.fetchData()
  }
}