如何实现分页vue

使用 v-pagination 组件（Vuetify）

如果项目使用 Vuetify，可以直接使用内置的 v-pagination 组件。该组件提供了分页功能，支持自定义样式和事件。

<template>
  <v-pagination
    v-model="currentPage"
    :length="totalPages"
    @input="handlePageChange"
  ></v-pagination>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      totalPages: 10,
    };
  },
  methods: {
    handlePageChange(page) {
      console.log("切换到页码:", page);
      // 在这里调用 API 或更新数据
    },
  },
};
</script>

使用 el-pagination 组件（Element UI）

如果项目使用 Element UI，可以使用 el-pagination 组件实现分页功能。

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

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      totalItems: 100,
    };
  },
  methods: {
    handlePageChange(page) {
      console.log("切换到页码:", page);
      // 在这里调用 API 或更新数据
    },
  },
};
</script>

手动实现分页逻辑

如果没有使用 UI 框架，可以手动实现分页逻辑。以下是一个简单的分页组件示例：

<template>
  <div class="pagination">
    <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
    <span>{{ currentPage }} / {{ totalPages }}</span>
    <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
  </div>
</template>

<script>
export default {
  props: {
    totalItems: {
      type: Number,
      required: true,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
  },
  data() {
    return {
      currentPage: 1,
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.totalItems / this.pageSize);
    },
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
        this.$emit("page-change", this.currentPage);
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
        this.$emit("page-change", this.currentPage);
      }
    },
  },
};
</script>

<style>
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
</style>

结合 API 分页请求

分页通常需要与后端 API 配合，以下是一个结合 API 请求的分页示例：

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
    <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      :total="totalItems"
      @current-change="fetchData"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      totalItems: 0,
      items: [],
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    async fetchData(page = 1) {
      this.currentPage = page;
      const response = await axios.get("/api/items", {
        params: {
          page: this.currentPage,
          pageSize: this.pageSize,
        },
      });
      this.items = response.data.items;
      this.totalItems = response.data.total;
    },
  },
};
</script>

分页逻辑优化

为了提高用户体验，可以在分页时添加加载状态：

<template>
  <div>
    <div v-if="loading">加载中...</div>
    <ul v-else>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
    <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      :total="totalItems"
      @current-change="fetchData"
      :disabled="loading"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      totalItems: 0,
      items: [],
      loading: false,
    };
  },
  methods: {
    async fetchData(page = 1) {
      this.loading = true;
      this.currentPage = page;
      try {
        const response = await axios.get("/api/items", {
          params: {
            page: this.currentPage,
            pageSize: this.pageSize,
          },
        });
        this.items = response.data.items;
        this.totalItems = response.data.total;
      } catch (error) {
        console.error("分页请求失败:", error);
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>