vue实现分页功能

使用 Vue 实现分页功能

分页功能是前端开发中常见的需求，Vue 可以结合计算属性、事件和方法轻松实现分页逻辑。以下是实现分页功能的几种方法：

基于计算属性的分页

利用 Vue 的计算属性动态计算当前页的数据，适用于前端分页场景：

<template>
  <div>
    <ul>
      <li v-for="item in paginatedData" :key="item.id">{{ item.name }}</li>
    </ul>
    <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
    <span>{{ currentPage }} / {{ totalPages }}</span>
    <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [], // 原始数据
      currentPage: 1,
      itemsPerPage: 10
    };
  },
  computed: {
    paginatedData() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return this.items.slice(start, end);
    },
    totalPages() {
      return Math.ceil(this.items.length / this.itemsPerPage);
    }
  },
  methods: {
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    }
  }
};
</script>

结合后端 API 的分页

当数据量较大时，通常需要后端配合实现分页。通过 API 传递页码和每页条数参数：

<template>
  <!-- 同上 -->
</template>

<script>
export default {
  data() {
    return {
      items: [],
      currentPage: 1,
      itemsPerPage: 10,
      totalItems: 0
    };
  },
  methods: {
    fetchData() {
      axios.get('/api/items', {
        params: {
          page: this.currentPage,
          limit: this.itemsPerPage
        }
      }).then(response => {
        this.items = response.data.items;
        this.totalItems = response.data.total;
      });
    },
    nextPage() {
      this.currentPage++;
      this.fetchData();
    },
    prevPage() {
      this.currentPage--;
      this.fetchData();
    }
  },
  created() {
    this.fetchData();
  }
};
</script>

使用第三方组件库

许多 Vue UI 库提供了现成的分页组件，如 Element UI、Vuetify 等：

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

<script>
export default {
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    }
  }
};
</script>

自定义分页组件

创建可复用的分页组件，提高代码复用性：

<!-- Pagination.vue -->
<template>
  <div class="pagination">
    <button @click="changePage(currentPage - 1)" :disabled="currentPage <= 1">Prev</button>
    <span v-for="page in pages" :key="page" 
          @click="changePage(page)"
          :class="{ active: currentPage === page }">
      {{ page }}
    </span>
    <button @click="changePage(currentPage + 1)" :disabled="currentPage >= totalPages">Next</button>
  </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: {
    changePage(page) {
      if (page >= 1 && page <= this.totalPages) {
        this.$emit('page-changed', page);
      }
    }
  }
};
</script>

分页优化技巧

添加页面跳转功能，允许用户直接输入页码：

<input v-model.number="goToPage" @keyup.enter="goToSpecificPage" />
<button @click="goToSpecificPage">跳转</button>

methods: {
  goToSpecificPage() {
    if (this.goToPage >= 1 && this.goToPage <= this.totalPages) {
      this.currentPage = this.goToPage;
      this.fetchData();
    }
  }
}

实现每页条数动态调整：

<select v-model="itemsPerPage" @change="handlePageSizeChange">
  <option value="5">5条/页</option>
  <option value="10">10条/页</option>
  <option value="20">20条/页</option>
</select>

methods: {
  handlePageSizeChange() {
    this.currentPage = 1;
    this.fetchData();
  }
}

以上方法涵盖了 Vue 实现分页功能的主要场景，可以根据具体需求选择合适的方式。前端分页适合数据量小的场景，后端分页更适合大数据量情况。第三方组件库可以快速实现功能，而自定义组件则提供更大的灵活性。