vue实现商品分页

Vue实现商品分页的方法

使用Element UI的分页组件

安装Element UI库后，可以直接使用其分页组件。在模板中添加el-pagination组件，通过v-model绑定当前页码，监听current-change事件处理分页逻辑。

<template>
  <div>
    <el-table :data="currentPageData">
      <!-- 表格内容 -->
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="totalItems">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      totalItems: 0,
      allData: [],
      currentPageData: []
    }
  },
  methods: {
    handleCurrentChange(page) {
      this.currentPage = page;
      this.updateCurrentPageData();
    },
    updateCurrentPageData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      this.currentPageData = this.allData.slice(start, end);
    }
  }
}
</script>

自定义分页实现

如果不使用UI库，可以手动实现分页功能。创建一个分页组件，包含页码按钮和导航控制。

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

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

后端分页与API集成

对于大数据量，建议使用后端分页。发送请求时携带页码和每页数量参数，后端返回对应数据。

methods: {
  fetchProducts(page = 1) {
    axios.get('/api/products', {
      params: {
        page,
        per_page: this.pageSize
      }
    }).then(response => {
      this.currentPageData = response.data.data;
      this.totalItems = response.data.total;
    });
  },
  handlePageChange(page) {
    this.fetchProducts(page);
  }
}

优化分页体验

添加加载状态提示，避免页面切换时的空白。可以使用加载动画或骨架屏提升用户体验。

<template>
  <div>
    <div v-if="loading" class="loading">加载中...</div>
    <el-table v-else :data="currentPageData">
      <!-- 表格内容 -->
    </el-table>
  </div>
</template>

data() {
  return {
    loading: false
  }
},
methods: {
  async fetchProducts(page) {
    this.loading = true;
    try {
      const response = await axios.get('/api/products', {
        params: { page, per_page: this.pageSize }
      });
      this.currentPageData = response.data.data;
      this.totalItems = response.data.total;
    } finally {
      this.loading = false;
    }
  }
}