elementui数据表格分页

最新推荐文章于 2024-10-28 18:39:41 发布

阿拉丁神灯_v

最新推荐文章于 2024-10-28 18:39:41 发布

阅读量554

点赞数

分类专栏：前端开发文章标签： javascript css node.js elementui vue.js

本文链接：https://blog.csdn.net/weixin_43101671/article/details/112555332

版权

本文介绍了如何在Vue.js项目中利用ElementUI库创建数据表格并实现分页功能。首先展示了实现后的效果图，接着详细阐述了初始化表格的步骤，以及配合JavaScript代码完成分页操作的过程。

摘要由CSDN通过智能技术生成

效果图

1.初始化表格

<template>
  <el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"> </el-table-column>
    <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
    <el-table-column prop="address" label="地址"> </el-table-column>
  </el-table>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"