使用elementui分页和表格时，表格展示的数据是全部，不受分页控制

最新推荐文章于 2024-06-20 15:40:46 发布

沏欢

最新推荐文章于 2024-06-20 15:40:46 发布

阅读量3.1k

点赞数 5

分类专栏：前端开发中遇到的问题文章标签： elementui

本文链接：https://blog.csdn.net/yhl_nsd/article/details/120549474

版权

前端开发中遇到的问题专栏收录该内容

8 篇文章 1 订阅

订阅专栏

在学习前端开发过程中，遇到一个关于ElementUI的问题，即使用分页组件时，表格数据显示的是所有数据，不受分页控制。通过在`<el-table>`中正确设置`data`属性为`lists.slice((currentPage-1)*pageSize, currentPage*pageSize)`，成功解决了这个问题。现在表格数据能够根据分页组件进行动态展示了。

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

自己刚学前端，记录日常问题
使用elementui分页和表格时，表格展示的数据是全部，不受分页控制。因为是按老师写的来的，但是自己的就是不受控制，于是在表格引入数据的地方加了句:data="lists.slice((currentPage-1)pageSize,currentPagepageSize)"就好了

 - <el-table>：显示表格
 - <el-pagination>：分页

<template>
  <div>
    <el-table :data="lists.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%">
      <el-table-column prop="id" label="序号" width="90"> </el-table-column>
      <el-table-column prop="listDate" label="日期" width="360">
      </el-table-column>
      <el-table-column prop="listName" label="名称" width="360">
      </el-table-column>
      <el-table-column prop="author" label="生成人" width="180">
      </el-table-column>
      <el-table-column prop="state" label="状态"> </el-table-column>
      <el-table-column prop="operate" label="操作"> </el-table-column>
    </el-table>

    <!-- 分页 
    total:总条目数
    page-size:每页显示条目个数，支持 .sync 修饰符
    current-page:当前页数，支持 .sync 修饰符
    -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total='total'           
      :page-size='pageSize'
      :current-page='currentPage'
      @current-change="changeCurPage" 
    >
    </el-pagination>
  </div>
</template>