随笔 - 315  文章 - 1  评论 - 12  阅读 - 24万

el-pagination在表格中用法(纯前端分页)

1、el-table

<el-table 
 :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
>
  ...
</el-table>

2、el-pagination

复制代码
<div>
  <el-pagination
    background
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-size="pageSize"
    layout="total,prev,pager,next"
    :total="tableData.length" >
  </el-pagination>
</div>
复制代码

 

3、data

data() {
  currentPage: 1,  // 当前页码
  pageSize: 10,  // 每页显示的行数
  tableData: [...],  // 表格数据
}

4、methods:

methods: {
  // 页面切换方法
  handleCurrentChange(val) {
    this.currentPage = val;
  }
}

5、表格序号

<el-table-column label="序号" width="50px" align="center">
  <template slot-scope="scope">
    {{ scope.$index + (currentPage - 1) * pageSize + 1 }}
  </template>
</el-table-column>

 

posted on   小虾米吖~  阅读(677)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
历史上的今天:
2019-11-08 vue用法父组件调用子组件方法--->$refs

点击右上角即可分享
微信分享提示