ElementUI表格序号翻页后重置的解决办法

最新推荐文章于 2024-02-28 15:58:19 发布

原创最新推荐文章于 2024-02-28 15:58:19 发布 · 1k 阅读

3 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种在ElementUI框架中实现表格序号连续显示的方法，解决了翻页后序号重置的问题。通过在表格列定义中使用自定义序号生成函数，确保了无论翻到哪一页，序号始终能正确显示。

ElementUI表格序号翻页后重置的解决办法
在使用element的时候表格上面加个序号栏，但是选择下一页的时候序号会被重置
切换页数的时候序号会被重置
解决办法如下：

<el-table-column 
        type="index"
        :index="count"
        label="序号" 
        align="center" 
        width="80"/>

给index价格count方法
在methods方法写入

// 计算表格序号
    count(index) {
      return (this.listQuery.pageNum - 1) * this.listQuery.pageSize + index + 1
    },

这样就搞定啦！！！
效果图：

在这里插入图片描述 ## 标题

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

悠然见南山8

关注关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

elementUI 表格循环生成列导致表头顺序错位

AillenRen的博客

06-15

2515

用elementUI比较多了。但这个坑是第一次遇到。以前都是将列直接写在template里的固定报表，但是在遇到表头需要动态变化，且属于层级不定的复合表头时，会出现，本来写在前面的列会跑到后面去，跟数据的顺序不一致的问题。如下为封装的动态迭代生成树形复合表头的组件看起来是没问题，但是表格生成后，第一列的序号列会错位到最后一列去。网上没有找到一个遇到同样的问题（-_-||）。排查后发现问题出在外面的上，只要在外部嵌套任何一个标签，就会导致渲染后的表头列顺序出现问题。但是如大家所见，不可能只有

Vue2.0+ElementUI实现表格翻页

zhouyifeng98的博客

10-21

914

ElementUI的表格要求的数据类型为字典数组。我使用了python3写后端，那么从数据库取数据时添加一行cursorclass=pymysql.cursors.DictCursor即可。取出后我将其存入redis数据库方便之后取用。取用时使用eval()函数再传到前端即可。前端放置Pagination 分页器，我这里直接采用了完整功能的分页器。<el-pagination @size-c

参与评论您还未登录，请先登录后发表或查看评论

Element-UI的Table组件解决换页后序号重新从1开始的问题

HelloWord176的博客

04-14

1202

问题：使用了el-table，设置indx属性显示数据的行号后，发现第二页的序号还是从1开始排序解决：设置一个count方法，在换页后重新计算表格行号 <el-table-column label="ID" type="index" :index="count" /> 在method方法中添加以下方法： count(index) { return (this.currentPage - 1) * this.pageSize + index

el-table勾选后页码跳转再返回，勾选状态消失的解决办法

weixin_42234899的博客

10-18

920

要求el-table表格在第一页勾选数据后，在其他页再勾选一些数据后，再返回第一页，勾选的数据不丢失。就这两个api即可解决。

Naive UI之数据表格 Data Table 分页

aliceyang2012的专栏

11-11

4603

数据表格 Data Table 分页

【记录】关于分页显示el-table数据时，每次翻页数据序号都会重置的问题

小阿瑾的瑾的博客

11-10

1658

问题描述： (标题起的真烂，he tui~) 【vue el-table】今天在写分页方法的时候碰到这样一个问题，如下：问题就是翻页的时候数据刷新了，顺带着重置下序号；一共有12条数据，每页显示五条，第一页数据编号是1-5；但是翻到第二页的时候，并没有接上一页继续从6开始，到10。解决方案一般情况下，序号不随数据的刷新重新从1开始编号；解决如下：  <el-table-column type="index" :index="index

elment-ui table表格排序后清除排序箭头/恢复默认排序的高亮样式

weixin_44799030的博客

02-28

2379

3.当我点击清空按钮后，类型清空了，并且传给后端的排序方式是名称/升序，可是箭头高亮仍旧保持了之前点击共享方式的样子（图三）2.在选择了筛选项以及其他排序方式之后，箭头高亮是这样的（图二）结果是去除了所有的高亮，不是我想要的结果。1.默认排序是按照名称升序排列（图一）

Vue2.0+ElementUI实现表格翻页的实例

11-28

在本文中，我们将探讨如何使用Vue2.0和ElementUI框架来实现表格的翻页功能。ElementUI是一个基于Vue.js的组件库，提供了丰富的UI组件，包括表格（Table）和分页器（Pagination）。以下是对实现这个功能的详细步骤和...

Elementui表格组件+sortablejs实现行拖拽排序的示例代码

12-29

运营小姐姐说想要可以直接拖拽排序的功能，原来在序号六的广告可能会因为金主爸爸加钱换到序号一的位置，拖拽操作就很方便效果实现方式 template部分 default-sort={prop: data=list align=left > <el-...

解决elementUI 切换tab后 el_table 固定列下方多了一条线问题

10-15

本文将深入探讨如何解决在切换ElementUI的tab页后，`el_table`的固定列下方出现多余线条的问题，以及与之相关的固定列显示不全的场景。首先，让我们分析问题的现象：在切换ElementUI的tab组件时，`el_table`的固定...

vue + elementUI 表格翻页后，序号仍然从1开始的问题解决

weixin_45542550的博客

01-06

1868

(this.listQuery.PageIndex-1) * (this.listQuery.PageSize)+index + 1 this.listQuery.PageIndex：当前页码。 this.listQuery.PageSize：每页数量。

elementui 列表页进入详情再返回分页被重置

jun的博客

08-05

421

elementui列表进详情再返回分页被初始化；keep-alive列表页缓存

element-ui，vue实现分页后表格序列不重置

l1830473688的博客

09-08

668

<el-table-column label="序列" width="70"> <template slot-scope="scope"> {{(currentPage-1)*pagesize+scope.$index+1}} </template> </el-table-column> currentPage：当前页面 pagesize：每页显示几条 ...

el-element分页器页码重置为1

weixin_44436543的博客

12-19

1117

但是，再打开，列表内容是对的（第1页），分页器显示却还是2或3...停留在上次。起初，我想在切换页码，调接口之后，重置为1就好了，这样下次打开就是第一页。解决：current-page加.sync就ok了。

解决element-ui 表格分页序号不递增问题。

喝水高手

11-03

1532

问题描述： element-ui table表格中，序号列，进行分页，如翻到第二页序号仍然从1开始，并没有递增。 <el-table-column label="序号" type="index" width="120" /> 解决办法： <el-table-column label="序号" type="index" width="120" :index="count" /> methods: { // 解决序号第二页从1开始的问题 // ..

Element—UI 表格中换页后序号不变的问题

Rouehang的博客

10-14

743

【代码】Element—UI 表格中换页后序号不变的问题。

解决elementUI中使用翻页器组件列表序号又从1开始的问题

ju__ju的博客

08-08

1217

这是之前写的代码当翻到第二页时,序列号又从1开始于是使用了这样的代码打印了一下item后发现新增了一个index字段然后直接使用index字段做序号就行了 ...

element-plus分页项目中列表页页码总是回到1~

Yjx的博客

10-07

741

原因就是我列表页用了v-if重新渲染导致页码总是回到1，采用v-show方式即可。

elementui表格序号列翻页

最新发布

07-11

在使用 Element UI 的 `el-table` 组件时，如果希望实现表格序号列在分页时连续显示（即不是每页都从 1 开始），可以通过自定义索引值的方式来实现。 ### 使用 `type="index"` 并自定义 `index` 方法在 `<el-table-column>` 中设置 `type="index"` 可以自动为每一行生成一个递增的序号。默认情况下，该序号会在每一页重新开始计数。为了实现跨页连续计数，可以使用 `:index` 属性并绑定一个自定义方法： ```html <el-table :data="tableData" border style="width: 100%"> <el-table-column type="index" width="90" :index="indexMethod" label="序号"></el-table-column> </el-table> ``` 对应的 `indexMethod` 方法如下： ```javascript methods: { indexMethod(index) { return (this.currentPage - 1) * this.pageSize + index + 1; } } ``` 其中： - `currentPage` 表示当前页码； - `pageSize` 表示每页展示的数据条数； - `index` 是当前页中行的索引（从 0 开始）； - `(this.currentPage - 1) * this.pageSize` 计算出前面所有页的数据总数； - 最后加上 `index + 1` 得到全局唯一的序号 [^1]。 ### 使用作用域插槽手动计算序号另一种方式是不使用 `type="index"`，而是通过 `<template slot-scope="scope">` 手动渲染序号列内容： ```html <el-table :data="tableData" border style="width: 100%"> <el-table-column label="序号" width="80"> <template slot-scope="scope"> {{ scope.$index + (pageNum - 1) * pageSize + 1 }} </template> </el-table-column> </el-table> ``` 在这个方案中： - `scope.$index` 表示当前页内的行索引； - `(pageNum - 1) * pageSize` 表示前几页已经展示的数据总数； - 整体公式实现了全局序号的连续性 [^2]。 ### 分页组件配置为了支持上述逻辑，通常还需要配合 `el-pagination` 实现分页控制，并在数据请求或本地分页处理中维护 `pageNum` 和 `pageSize`： ```html <el-pagination layout="prev, pager, next" :total="total" :page-size="pageSize" @current-change="handleCurrentChange"> </el-pagination> ``` 对应的 JS 方法： ```javascript methods: { handleCurrentChange(val) { this.pageNum = val; // 根据新的 pageNum 获取对应页码的数据 } } ``` ### 前端分页实现参考如果数据量较小且适合前端处理，可以一次性获取全部数据并在前端进行分页： ```javascript computed: { tableData() { const start = (this.pageNum - 1) * this.pageSize; const end = start + this.pageSize; return this.allData.slice(start, end); } } ``` 这样可以在不依赖后端接口的情况下实现完整的分页和序号连续功能 [^3]。 ---