当前位置：首页 > VUE

vue怎样实现分页

2026-01-16 08:20:43VUE

Vue实现分页的方法

使用第三方库（如Element UI或Ant Design Vue）

Element UI的Pagination组件可以直接集成到Vue项目中。安装Element UI后，在组件中引入Pagination组件并配置相关属性。

<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;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    fetchData() {
      // 调用API获取数据
    }
  }
}
</script>

自定义分页组件

创建一个自定义分页组件，通过计算属性确定总页数和当前页的数据范围。

<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: Number,
    itemsPerPage: Number,
    currentPage: Number
  },
  computed: {
    totalPages() {
      return Math.ceil(this.totalItems / this.itemsPerPage);
    }
  },
  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);
      }
    }
  }
}
</script>

结合后端API分页

通常后端API会支持分页参数（如page和pageSize），前端只需传递这些参数并处理返回的数据。

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

使用Vuex管理分页状态

在大型项目中，可以使用Vuex集中管理分页状态，便于多个组件共享和同步。

// store.js
const store = new Vuex.Store({
  state: {
    currentPage: 1,
    pageSize: 10,
    total: 0
  },
  mutations: {
    setPage(state, payload) {
      state.currentPage = payload.page;
      state.pageSize = payload.pageSize;
    },
    setTotal(state, total) {
      state.total = total;
    }
  }
});

前端本地分页

如果数据量不大，可以在前端进行分页处理，使用计算属性或方法对数据进行切片。

vue怎样实现分页

computed: {
  paginatedData() {
    const start = (this.currentPage - 1) * this.pageSize;
    const end = start + this.pageSize;
    return this.dataList.slice(start, end);
  }
}

以上方法可以根据项目需求选择适合的方式实现分页功能。