vue分页条怎么实现

使用 Element UI 的分页组件

Element UI 提供了 el-pagination 组件，可以快速实现分页功能。

<template>
  <div>
    <el-table :data="currentPageData" border>
      <!-- 表格列定义 -->
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      layout="prev, pager, next"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 全部数据
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示条数
      total: 0, // 总数据量
    };
  },
  computed: {
    currentPageData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.tableData.slice(start, end);
    },
  },
  methods: {
    handleCurrentChange(page) {
      this.currentPage = page;
    },
    fetchData() {
      // 模拟 API 请求
      this.tableData = Array.from({ length: 50 }, (_, i) => ({
        name: `用户 ${i + 1}`,
        age: Math.floor(Math.random() * 30) + 18,
      }));
      this.total = this.tableData.length;
    },
  },
  mounted() {
    this.fetchData();
  },
};
</script>

使用 Vue 3 + Composition API 实现

如果使用 Vue 3 的 Composition API，可以更灵活地管理分页逻辑。

<template>
  <div>
    <table>
      <tr v-for="item in paginatedData" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
      </tr>
    </table>
    <div>
      <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
      <span>当前页: {{ currentPage }}</span>
      <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";

const data = ref(Array.from({ length: 50 }, (_, i) => ({
  id: i + 1,
  name: `用户 ${i + 1}`,
  age: Math.floor(Math.random() * 30) + 18,
})));

const currentPage = ref(1);
const pageSize = ref(10);

const totalPages = computed(() => Math.ceil(data.value.length / pageSize.value));
const paginatedData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return data.value.slice(start, end);
});

const prevPage = () => {
  if (currentPage.value > 1) currentPage.value--;
};

const nextPage = () => {
  if (currentPage.value < totalPages.value) currentPage.value++;
};
</script>

后端分页实现（结合 API）

通常分页数据由后端返回，前端只需传递页码和每页大小。

<template>
  <div>
    <el-table :data="tableData" border>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
    </el-table>
    <el-pagination
      @current-change="fetchData"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      layout="prev, pager, next"
    ></el-pagination>
  </div>
</template>

<script>
import axios from "axios";

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

自定义分页样式

如果需要自定义分页样式，可以基于 CSS 调整。

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

<script>
export default {
  data() {
    return {
      currentPage: 1,
      totalPages: 10,
      maxVisiblePages: 5,
    };
  },
  computed: {
    visiblePages() {
      const range = [];
      const start = Math.max(1, this.currentPage - 2);
      const end = Math.min(this.totalPages, start + this.maxVisiblePages - 1);
      for (let i = start; i <= end; i++) {
        range.push(i);
      }
      return range;
    },
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) this.currentPage--;
    },
    nextPage() {
      if (this.currentPage < this.totalPages) this.currentPage++;
    },
    goToPage(page) {
      this.currentPage = page;
    },
  },
};
</script>

<style>
.pagination-container {
  display: flex;
  gap: 5px;
  align-items: center;
}
.pagination-container span {
  cursor: pointer;
  padding: 5px 10px;
  border: 1px solid #ddd;
}
.pagination-container span.active {
  background-color: #409EFF;
  color: white;
}
</style>