element-ui表格翻页的序号递增

最新推荐文章于 2025-07-14 16:41:14 发布

门前小小小树

最新推荐文章于 2025-07-14 16:41:14 发布

阅读量6.7k

点赞数 4

CC 4.0 BY-SA版权

文章标签： element-ui vue 表格翻页序号递增

本文链接：https://blog.youkuaiyun.com/weixin_44263646/article/details/88399521

本文详细介绍了在Vue项目中使用Element UI的ElTable组件时，如何通过两种方式实现自定义索引显示，包括在方法体里编写计算逻辑和直接在DOM中使用箭头函数进行计算。这两种方法都能实现在表格中正确显示当前页面的行索引。

1、写方法体里

<el-table>
<el-table-column type='index' :index='indexMethod' ></el-table-column>
</el-table>

js：

method:{
indexMethod (index) {
  let curpage = this.page.pagination.pageData.page   //单前页码，具体看组件取值
  let limitpage = this.page.pagination.pageData.limit    //每页条数，具体是组件取值
  return (index+1) + (curpage-1)*limitpage
}
}

2、直接写dom里

<el-table>
<el-table-column type='index' 
:index='(index)=>{return (index+1) + (page.pagination.pageData.page-1)*page.pagination.pageData.limit  }' >
</el-table-column>
</el-table>