element plus 表各组件怎样和分页组件配合使用

最新推荐文章于 2024-05-28 13:52:35 发布

Z_B_L

最新推荐文章于 2024-05-28 13:52:35 发布

阅读量997

点赞数 27

文章标签： vue.js javascript 前端 elementui

本文链接：https://blog.csdn.net/Z_B_L/article/details/135448771

版权

本文详细介绍了ElementPlus框架中表格组件如何与分页组件协同工作，通过实例展示了如何在表格数据上实现分页功能，适合初学者快速上手。

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

element plus 网址：点击跳转

初次使用element plus 组件库时不理解表格组件如何与分页组件配合使用，本文傻瓜式教学，简单好抄。

表格

随便找一段表格代码：

<el-table
    :data="tableData"
    :default-sort="{ prop: 'date', order: 'descending' }"
    style="width: 100%"
  >
    <el-table-column prop="date" label="Date" sortable width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" :formatter="formatter" />
  </el-table>

讲上面的 :data='' '' 里的代码换成下方红线的代码

<el-table
    :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" stripe
    :default-sort="{ prop: 'date', order: 'descending' }"
    style="width: 100%"
  >
    <el-table-column prop="date" label="Date" sortable width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" :formatter="formatter" />
  </el-table>

到这里，表格配置完成