一行代码解决element-ui的Table组件中每页的分页索引都从1开始的问题

最新推荐文章于 2024-08-26 09:17:27 发布

怎么改昵称啊

最新推荐文章于 2024-08-26 09:17:27 发布

阅读量771

点赞数 3

分类专栏：前端文章标签： elementui 前端 javascript

本文链接：https://blog.csdn.net/weixin_54590525/article/details/129143107

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在Element-UI的el-table中，通过设置type=index可以显示索引，但与Pagination组件结合时所有页的索引均从1开始。为解决此问题，可以利用index属性绑定自定义方法indexMethod，根据当前页码和每页条目数计算实际索引值。

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

1.table中实现索引的效果：

新增加一列el-table-column，设置type属性为index即可显示从 1 开始的索引号

<el-table-column label="序号"  type="index"  />

在与Pagination分页组件同时使用时会有一些问题：所有的分页索引值都是从1开始的，这就导致这个索引加的毫无意义。

2.自定义索引

在element-ui中，如果设置了 type=index，可以通过传递 index 属性来自定义索引，所以就可以根据这个属性来解决上面的问题。

// 给index属性绑定一个方法
<el-table-column label="序号" type="index" :index="indexMethod" />

.......
.......

// 在method中定义这个方法
 indexMethod(index) {
      return index + 1 + (this.page - 1) * this.size  // page是当前的页码，size是页码容量
    }