vue2实现前端分页

<template>
  <div>
    <el-pagination :page-sizes="[5, 10, 30, 50]" :page-size="pageSize" :total="total" :current-page="currentPage"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
    <div class="content">
      <span v-for="item in paginatedData" :key="item.id">
        <el-tag>{{ item.name }}</el-tag>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1, // 当前页码
      pageSize: 5, // 每页显示条数
      total: 50, // 数据总条数
      tableData: [], // 表格数据
    };
  },
  mounted() {
    // 模拟异步获取数据
    setTimeout(() => {
      this.tableData = [
        { id: 1, name: 'Tom', email: 'tom@example.com' },
        { id: 2, name: 'Jerry', email: 'jerry@example.com' },
        { id: 3, name: 'Lucy', email: 'lucy@example.com' },
        { id: 4, name: 'Kate', email: 'kate@example.com' },
        { id: 5, name: 'Jim', email: 'jim@example.com' },
        { id: 6, name: 'Bob', email: 'bob@example.com' },
        { id: 7, name: 'Alice', email: 'alice@example.com' },
        { id: 8, name: 'John', email: 'john@example.com' },
        { id: 9, name: 'Jane', email: 'jane@example.com' },
        { id: 10, name: 'Mike', email: 'mike@example.com' },
        { id: 11, name: 'Susan', email: 'susan@example.com' },
        { id: 12, name: 'David', email: 'david@example.com' },
        { id: 13, name: 'Peter', email: 'peter@example.com' },
        { id: 14, name: 'Mary', email: 'mary@example.com' },
        { id: 15, name: 'Amy', email: 'amy@example.com' },
        { id: 16, name: 'Jack', email: 'jack@example.com' },
        { id: 17, name: 'Sam', email: 'sam@example.com' },
        { id: 18, name: 'Tim', email: 'tim@example.com' },
        { id: 19, name: 'Eva', email: 'eva@example.com' },
        { id: 20, name: 'Lisa', email: 'lisa@example.com' },
        { id: 21, name: 'Eric', email: 'eric@example.com' },
        { id: 22, name: 'Kevin', email: 'kevin@example.com' },
        { id: 23, name: 'Wendy', email: 'wendy@example.com' },
        { id: 24, name: 'Harry', email: 'harry@example.com' },
        { id: 25, name: 'Lily', email: 'lily@example.com' },
        { id: 26, name: 'Oliver', email: 'oliver@example.com' },
        { id: 27, name: 'George', email: 'george@example.com' },
        { id: 28, name: 'Emma', email: 'emma@example.com' },
        { id: 29, name: 'Nancy', email: 'nancy@example.com' },
        { id: 30, name: 'Frank', email: 'frank@example.com' },
        { id: 31, name: 'Grace', email: 'grace@example.com' },
        { id: 32, name: 'Ella', email: 'ella@example.com' },
        { id: 33, name: 'Sophia', email: 'sophia@example.com' },
        { id: 34, name: 'Helen', email: 'helen@example.com' },
        { id: 35, name: 'Bill', email: 'bill@example.com' },
        { id: 36, name: 'Rose', email: 'rose@example.com' },
        { id: 37, name: 'Tony', email: 'tony@example.com' },
        { id: 38, name: 'Maggie', email: 'maggie@example.com' },
        { id: 39, name: 'Mark', email: 'mark@example.com' },
        { id: 40, name: 'Andy', email: 'andy@example.com' },
        { id: 41, name: 'Zoe', email: 'zoe@example.com' },
        { id: 42, name: 'Vanessa', email: 'vanessa@example.com' },
        { id: 43, name: 'Chloe', email: 'chloe@example.com' },
        { id: 44, name: 'Olivia', email: 'olivia@example.com' },
        { id: 45, name: 'Jasmine', email: 'jasmine@example.com' },
        { id: 46, name: 'Ethan', email: 'ethan@example.com' },
        { id: 47, name: 'Daniel', email: 'daniel@example.com' },
        { id: 48, name: 'Rachel', email: 'rachel@example.com' },
        { id: 49, name: 'Cindy', email: 'cindy@example.com' },
        { id: 50, name: 'Vicky', email: 'vicky@example.com' },
      ];
      this.total = this.tableData.length;
    }, 1000);
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
  },
  computed: {
    // 计算分页后的数据
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.tableData.slice(start, end);
    },
  },
};
</script>

<style lang="scss">
  .content {
    height: 300px;
    .el-tag {
      margin: 5px;
    }
  }
</style>