当前位置：首页 > VUE

vue2实现分页

2026-01-21 03:36:41VUE

vue2实现分页的方法

使用Element UI的分页组件

Element UI提供了现成的分页组件el-pagination，可以快速实现分页功能。需要先安装Element UI库。

安装Element UI：

npm install element-ui

在Vue组件中使用：

<template>
  <div>
    <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>
  </div>
</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() {
      // 根据currentPage和pageSize获取数据
    }
  }
}
</script>

自定义分页组件

如果需要自定义分页组件，可以手动实现分页逻辑。

定义分页组件：

<template>
  <div class="pagination">
    <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
    <span v-for="page in pages" :key="page" @click="goToPage(page)" :class="{ active: page === currentPage }">
      {{ page }}
    </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);
    },
    pages() {
      const range = [];
      for (let i = 1; i <= this.totalPages; i++) {
        range.push(i);
      }
      return range;
    }
  },
  methods: {
    prevPage() {
      this.$emit('page-changed', this.currentPage - 1);
    },
    nextPage() {
      this.$emit('page-changed', this.currentPage + 1);
    },
    goToPage(page) {
      this.$emit('page-changed', page);
    }
  }
}
</script>

<style>
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.active {
  font-weight: bold;
  color: red;
}
</style>

在父组件中使用：

<template>
  <div>
    <custom-pagination
      :total-items="totalItems"
      :items-per-page="itemsPerPage"
      :current-page="currentPage"
      @page-changed="handlePageChange"
    />
  </div>
</template>

<script>
import CustomPagination from './CustomPagination.vue';

export default {
  components: { CustomPagination },
  data() {
    return {
      totalItems: 100,
      itemsPerPage: 10,
      currentPage: 1
    }
  },
  methods: {
    handlePageChange(page) {
      this.currentPage = page;
      this.fetchData();
    },
    fetchData() {
      // 根据currentPage和itemsPerPage获取数据
    }
  }
}
</script>

使用第三方库

除了Element UI，还可以使用其他第三方库如v-pagination。

安装v-pagination：

npm install v-pagination

使用示例：

<template>
  <div>
    <pagination
      v-model="currentPage"
      :records="totalItems"
      :per-page="itemsPerPage"
      @paginate="fetchData"
    />
  </div>
</template>

<script>
import Pagination from 'v-pagination';
export default {
  components: { Pagination },
  data() {
    return {
      currentPage: 1,
      totalItems: 100,
      itemsPerPage: 10
    }
  },
  methods: {
    fetchData() {
      // 根据currentPage和itemsPerPage获取数据
    }
  }
}
</script>

后端分页实现

通常分页需要后端配合，前端传递页码和每页数量，后端返回对应数据。

API请求示例：

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

后端处理示例（Node.js）：

app.get('/api/data', (req, res) => {
  const page = parseInt(req.query.page) || 1;
  const pageSize = parseInt(req.query.pageSize) || 10;
  const offset = (page - 1) * pageSize;

  // 模拟数据库查询
  const data = [...]; // 所有数据
  const items = data.slice(offset, offset + pageSize);

  res.json({
    items,
    total: data.length
  });
});

分页样式优化

可以根据需求自定义分页样式，例如添加过渡效果或调整布局。

CSS示例：

.pagination {
  margin-top: 20px;
}
.pagination button {
  padding: 5px 10px;
  margin: 0 5px;
  cursor: pointer;
}
.pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pagination span {
  padding: 5px 10px;
  margin: 0 2px;
  cursor: pointer;
}
.pagination span:hover {
  background: #eee;
}

以上方法可以根据项目需求选择适合的实现方式。Element UI适合快速开发，自定义组件更适合特定需求，第三方库可以提供更多功能选项。后端分页是常见实践，需确保前后端参数一致。

vue2实现分页