element-ui配合分页自定义表格序号

先介绍下currentPage代表当前页数,limit代表每页显示条目个数,count代表总条目数。
要实现表格生成序号其实element官网已经帮我们实现了type=index,效果就是不管当前页数是几,序号永远从1开始。
举个栗子:
currentPage为1,limit为10,第一页的序号就是1-10,第二页也是1-10,以此类推。

// 表格
<el-table :data="tableData" border>
  <el-table-column
    type="index" 
    label="序号"
    header-align="center" 
    align="center">
  </el-table-column>
</el-table>
// 分页
<el-pagination
    @current-change="handleCurrentChange"
    :current-page.sync="currentPage"
    :page-size="limit"
    layout="total, prev, pager, next"
    :total="count">
</el-pagination>

现在假设我们count为99,我们需要的序号也是1-99,那么type=index就满足不了我们的需求了,怎么办呢,看官网,index似乎可以自定义函数:

Table-column Attributes.png

于是我们就有办法了,分页不变,表格添加动态生成index的方法:

<el-table :data="tableData" border>
  <el-table-column
    type="index" 
    :index="indexMethod"
    label="序号"
    header-align="center" 
    align="center">
  </el-table-column>
</el-table>

表格生成对应条数的序号,用到分页的currentPagelimit

indexMethod (index) {
  return (index + 1) + (this.currentPage - 1) * (this.limit)
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言 在学习mybatis等持久层框架的时候,会经常对数据进行增删改查操作,使用最多的是对数据库进行查询操作,如果...
    高级java架构师阅读 14,795评论 1 3
  • ORA-00001: 违反唯一约束条件 (.) 错误说明:当在唯一索引所对应的列上键入重复值时,会触发此异常。 O...
    我想起个好名字阅读 10,794评论 0 9
  • ORACLE自学教程 --create tabletestone ( id number, --序号usernam...
    落叶寂聊阅读 4,821评论 0 0
  • 1我怎么如此幸运,开始能够注意自己说话,还是有很多担心、不安全感 2我怎么如此幸运,一直觉得自己还是挺大方的,听了...
    罗幸运星阅读 1,033评论 0 0
  • 新闻需要发现,需要思考,需要事实转化为文字呈现给大众。随着技术的不断发展,有声新闻越来越受到读者们的青睐,有声新闻...
    小犀智能阅读 2,750评论 0 1