如何实现分页vue

使用 vue-paginate 库实现分页

安装 vue-paginate：

npm install vue-paginate

在 main.js 中注册插件：

import Vue from 'vue';
import VuePaginate from 'vue-paginate';

Vue.use(VuePaginate);

在组件中使用：

<template>
  <div>
    <paginate
      v-model="currentPage"
      :page-count="totalPages"
      :click-handler="changePage"
      :prev-text="'Prev'"
      :next-text="'Next'"
      :container-class="'pagination'"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      totalPages: 10,
      items: [] // 分页数据
    };
  },
  methods: {
    changePage(pageNum) {
      this.currentPage = pageNum;
      // 加载对应页数据
    }
  }
};
</script>

<style>
.pagination {
  display: flex;
  list-style: none;
}
.pagination li {
  margin: 0 5px;
  cursor: pointer;
}
</style>

手动实现分页逻辑

计算分页数据：

<template>
  <div>
    <ul>
      <li v-for="item in paginatedItems" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
    <button @click="prevPage" :disabled="currentPage === 1">Previous</button>
    <span>Page {{ currentPage }} of {{ totalPages }}</span>
    <button @click="nextPage" :disabled="currentPage === totalPages">Next</button>
  </div>
</template>

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

使用 Element UI 分页组件

安装 Element UI：

npm install element-ui

在 main.js 中引入：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

在组件中使用：

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

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      totalItems: 100
    };
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val;
      // 加载对应页数据
    }
  }
};
</script>

使用 Vuetify 分页组件

安装 Vuetify：

npm install vuetify

在 main.js 中引入：

import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';

Vue.use(Vuetify);

在组件中使用：

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

<script>
export default {
  data() {
    return {
      currentPage: 1,
      totalPages: 10
    };
  },
  methods: {
    changePage(page) {
      this.currentPage = page;
      // 加载对应页数据
    }
  }
};
</script>

使用 Bootstrap-Vue 分页组件

安装 Bootstrap-Vue：

npm install bootstrap-vue

在 main.js 中引入：

import Vue from 'vue';
import BootstrapVue from 'bootstrap-vue';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';

Vue.use(BootstrapVue);

在组件中使用：

<template>
  <b-pagination
    v-model="currentPage"
    :total-rows="totalItems"
    :per-page="itemsPerPage"
    @change="changePage"
  />
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      totalItems: 100,
      itemsPerPage: 10
    };
  },
  methods: {
    changePage(page) {
      this.currentPage = page;
      // 加载对应页数据
    }
  }
};
</script>

根据项目需求选择合适的方案，手动实现适合轻量级需求，而库或框架组件可提供更丰富的功能。