vue前端分页怎么实现

使用 Element UI 的分页组件

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

<template>
  <div>
    <el-table :data="currentPageData" border>
      <!-- 表格列定义 -->
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 全部数据
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  computed: {
    currentPageData() {
      return this.tableData.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    fetchData() {
      // 模拟获取数据
      this.tableData = Array.from({ length: 100 }, (_, i) => ({ id: i + 1 }));
      this.total = this.tableData.length;
    }
  },
  mounted() {
    this.fetchData();
  }
}
</script>

自定义分页实现

如果不使用 UI 库，可以手动实现分页功能。通过计算属性筛选当前页数据，并渲染分页按钮。

<template>
  <div>
    <table>
      <tr v-for="item in currentPageData" :key="item.id">
        <td>{{ item.name }}</td>
      </tr>
    </table>
    <div class="pagination">
      <button 
        v-for="page in totalPages" 
        :key="page"
        @click="currentPage = page"
        :class="{ active: currentPage === page }">
        {{ page }}
      </button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [], // 全部数据
      currentPage: 1,
      itemsPerPage: 5
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.items.length / this.itemsPerPage);
    },
    currentPageData() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return this.items.slice(start, end);
    }
  },
  mounted() {
    this.items = Array.from({ length: 20 }, (_, i) => ({
      id: i + 1,
      name: `Item ${i + 1}`
    }));
  }
}
</script>

<style>
.pagination button.active {
  background-color: #42b983;
  color: white;
}
</style>

后端分页 API 集成

实际项目中通常从后端 API 获取分页数据，前端只需传递页码和每页大小参数。

<template>
  <div>
    <el-table :data="tableData" border>
      <!-- 表格列定义 -->
    </el-table>
    <el-pagination
      @current-change="fetchData"
      :current-page="currentPage"
      :page-size="pageSize"
      layout="prev, pager, next"
      :total="total">
    </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;
      try {
        const res = await axios.get('/api/data', {
          params: {
            page: this.currentPage,
            size: this.pageSize
          }
        });
        this.tableData = res.data.items;
        this.total = res.data.total;
      } catch (error) {
        console.error(error);
      }
    }
  },
  mounted() {
    this.fetchData();
  }
}
</script>

使用 Vue Paginate 插件

Vue Paginate 是一个轻量级的分页插件，适合简单项目使用。

安装插件：

npm install vue-paginate

使用示例：

<template>
  <div>
    <ul>
      <li v-for="item in paginated('items')">{{ item.name }}</li>
    </ul>
    <paginate
      v-model="page"
      :page-count="totalPages"
      :click-handler="changePage"
      :prev-text="'Prev'"
      :next-text="'Next'"
      :container-class="'pagination'"
      :page-class="'page-item'">
    </paginate>
  </div>
</template>

<script>
import VuePaginate from 'vue-paginate';
Vue.use(VuePaginate);

export default {
  data() {
    return {
      items: Array.from({ length: 50 }, (_, i) => ({ id: i, name: `Item ${i}` })),
      page: 1,
      perPage: 5
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.items.length / this.perPage);
    }
  },
  methods: {
    changePage(pageNum) {
      this.page = pageNum;
    }
  }
}
</script>

<style>
.pagination {
  display: flex;
  list-style: none;
}
.page-item {
  margin: 0 5px;
}
</style>