基于vue2 + element实现的一个table表格,模拟实现数据,比如用户列表,然后进行前端分页

需求:

基于vue2 + element实现的一个table表格,模拟实现数据,比如用户列表,然后进行前端分页,写一个这样的组件案例。

实现:

<template>
  <div>
    <el-table :data="currentData" style="width: 100%">
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column prop="age" label="年龄" width="95"></el-table-column>
    </el-table>
    <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 {
      users: [], // 模拟的用户数据
      currentPage: 1, // 当前页数
      pageSize: 10, // 每页显示的数据量
      total: 0, // 总数据量
      currentData: [] // 当前页面显示的数据
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      // 模拟从后端获取数据
      this.users = Array.from({ length: 100 }, (_, i) => ({
        id: i + 1,
        name: `User ${i + 1}`,
        email: `user${i + 1}@example.com`,
        age: Math.floor(Math.random() * 60) + 18
      }));
      this.total = this.users.length;
      this.updateCurrentData();
    },
    updateCurrentData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      this.currentData = this.users.slice(start, end);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.updateCurrentData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.updateCurrentData();
    }
  }
};
</script>

解释:

组件说明:

  1. 数据模拟:在created钩子中,我们创建了100条模拟用户数据。
  2. 分页逻辑:通过currentPagepageSize控制当前显示的数据范围。
  3. 事件处理handleSizeChangehandleCurrentChange分别处理每页显示数量变化和当前页数变化的事件,更新显示的数据。
  4. 展示数据updateCurrentData方法用于根据当前页数和每页数量计算并设置当前页面应显示的数据。

这个组件可以作为一个基本的分页表格组件使用,适用于展示大量数据时的前端分页场景。

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-09 21:54:04       4 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-09 21:54:04       5 阅读
  3. 在Django里面运行非项目文件

    2024-07-09 21:54:04       4 阅读
  4. Python语言-面向对象

    2024-07-09 21:54:04       4 阅读

热门阅读

  1. SQL中字符串类型中char和varchar之间的区别是什么

    2024-07-09 21:54:04       8 阅读
  2. 【框架】ABP(ASP.NET Boilerplate Project)

    2024-07-09 21:54:04       8 阅读
  3. SQL Server集成服务(SSIS):数据集成的瑞士军刀

    2024-07-09 21:54:04       8 阅读
  4. LVS+Keepalived群集

    2024-07-09 21:54:04       8 阅读
  5. 精准控制:Eureka服务续约间隔配置全指南

    2024-07-09 21:54:04       10 阅读
  6. 部署LVS-DR群集

    2024-07-09 21:54:04       11 阅读
  7. WordPress禁止用户注册某些用户名

    2024-07-09 21:54:04       13 阅读