vue实现分页条数

实现分页条数的基础方法

在Vue中实现分页条数通常需要结合后端API和前端组件。分页条数的核心是计算总页数并渲染分页按钮。

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

<script>
export default {
  props: {
    totalItems: Number,
    itemsPerPage: Number
  },
  computed: {
    totalPages() {
      return Math.ceil(this.totalItems / this.itemsPerPage)
    }
  },
  methods: {
    changePage(page) {
      this.$emit('page-changed', page)
    }
  }
}
</script>

使用Element UI的分页组件

如果项目中使用Element UI，可以直接使用其分页组件实现分页条数功能。

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

<script>
export default {
  data() {
    return {
      total: 100,
      pageSize: 10
    }
  },
  methods: {
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>

动态调整每页显示条数

实现允许用户自定义每页显示条数的功能，可以增加一个选择器组件。

<template>
  <div>
    <select v-model="itemsPerPage" @change="updatePagination">
      <option value="5">5条/页</option>
      <option value="10">10条/页</option>
      <option value="20">20条/页</option>
    </select>
    <!-- 分页组件 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      itemsPerPage: 10
    }
  },
  methods: {
    updatePagination() {
      this.$emit('per-page-changed', this.itemsPerPage)
    }
  }
}
</script>

结合Vuex管理分页状态

在大型应用中，可以使用Vuex集中管理分页状态。

// store.js
export default new Vuex.Store({
  state: {
    pagination: {
      currentPage: 1,
      itemsPerPage: 10,
      totalItems: 0
    }
  },
  mutations: {
    SET_PAGINATION(state, payload) {
      state.pagination = {...state.pagination, ...payload}
    }
  }
})

// 组件中使用
methods: {
  changePage(page) {
    this.$store.commit('SET_PAGINATION', {currentPage: page})
  }
}

响应式分页实现

实现响应式分页，根据屏幕大小自动调整显示的分页按钮数量。

<template>
  <el-pagination
    :pager-count="pagerCount"
    @resize="handleResize">
  </el-pagination>
</template>

<script>
export default {
  data() {
    return {
      pagerCount: 7
    }
  },
  created() {
    window.addEventListener('resize', this.handleResize)
    this.handleResize()
  },
  destroyed() {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      this.pagerCount = window.innerWidth < 768 ? 5 : 7
    }
  }
}
</script>

分页性能优化

对于大数据量分页，可以采用虚拟滚动或懒加载技术优化性能。

<template>
  <div class="infinite-list" v-infinite-scroll="loadMore">
    <!-- 列表内容 -->
  </div>
</template>

<script>
export default {
  methods: {
    loadMore() {
      if (this.loading || !this.hasMore) return
      this.loading = true
      this.currentPage++
      // 获取下一页数据
    }
  }
}
</script>

以上方法可以根据具体项目需求选择使用或组合使用，实现灵活高效的分页功能。