vue实现分页6

Vue实现分页的6种方法

基础分页组件实现

使用Vue的v-for指令和计算属性实现基础分页功能。通过计算总页数并动态渲染页码按钮，结合v-model绑定当前页码。

<template>
  <div class="pagination">
    <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
    <span v-for="page in pages" :key="page">
      <button @click="goToPage(page)" :class="{ active: page === currentPage }">
        {{ page }}
      </button>
    </span>
    <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
  </div>
</template>

<script>
export default {
  props: ['totalItems', 'itemsPerPage'],
  data() {
    return {
      currentPage: 1
    }
  },
  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: {
    prevPage() {
      this.currentPage--
    },
    nextPage() {
      this.currentPage++
    },
    goToPage(page) {
      this.currentPage = page
    }
  }
}
</script>

使用第三方库

Element UI、Ant Design Vue等UI库提供现成的分页组件。以Element UI为例：

<template>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[10, 20, 30, 40]"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total">
  </el-pagination>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 100
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
    }
  }
}
</script>

服务器端分页

结合axios实现服务器端分页，传递page和pageSize参数到API接口：

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

无限滚动分页

使用vue-infinite-loading插件实现无限滚动分页效果：

<template>
  <div>
    <div v-for="item in items" :key="item.id">{{ item.content }}</div>
    <infinite-loading @infinite="loadMore"></infinite-loading>
  </div>
</template>

<script>
import InfiniteLoading from 'vue-infinite-loading'
export default {
  components: { InfiniteLoading },
  data() {
    return {
      page: 1,
      items: []
    }
  },
  methods: {
    loadMore($state) {
      axios.get(`/api/items?page=${this.page}`).then(({ data }) => {
        if (data.length) {
          this.items.push(...data)
          this.page++
          $state.loaded()
        } else {
          $state.complete()
        }
      })
    }
  }
}
</script>

动态分页大小

实现可动态调整每页显示数量的分页控件：

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

<script>
export default {
  data() {
    return {
      pageSize: 10
    }
  },
  methods: {
    resetPagination() {
      this.currentPage = 1
      this.fetchData()
    }
  }
}
</script>

分页与路由结合

将分页状态保存在URL中，实现可分享的分页链接：

watch: {
  '$route.query.page'(newPage) {
    this.currentPage = Number(newPage) || 1
    this.fetchData()
  }
},
methods: {
  goToPage(page) {
    this.$router.push({
      query: {
        ...this.$route.query,
        page: page
      }
    })
  }
}

每种方法适用于不同场景，基础分页适合简单需求，第三方库可快速实现标准化分页，服务器端分页处理大数据量，无限滚动提升用户体验，动态分页大小增加灵活性，路由结合实现状态持久化。