element ui 实现表单序号翻页累加

电玩女神 2023-10-07 10:52 31阅读 0赞

### 一、需求描述 ###

需要序号根据数据的条数累加显示，且翻页后仍然保持正常的序号，如下图所示。  
这是第一页，

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzc4NTk3_size_16_color_FFFFFF_t_70]  
这是第二页，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzc4NTk3_size_16_color_FFFFFF_t_70 1]

### 二、解决方案 ###

在el-table-column中标注，type=“index”, 然后使用:index绑定计算方法。  
![在这里插入图片描述][20200309215638834.png]  
计算方法代码如下，补充完即可正常显示序号。

如果你发现你的序号显示仍然是错误的，请千万要仔细检查你的**currentPageNumber 和 currentPageSize**即**当前所在页数 和 当前页面显示多少条数据**，是否传入的是正确的，这两个参数很容易在复杂的情况下搞错而导致序号错误。  
![在这里插入图片描述][20200309215744743.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzc4NTk3_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200309215434449.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzc4NTk3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzc4NTk3_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200309215540501.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzc4NTk3,size_16,color_FFFFFF,t_70
[20200309215638834.png]: https://img-blog.csdnimg.cn/20200309215638834.png
[20200309215744743.png]: https://img-blog.csdnimg.cn/20200309215744743.png