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

最新推荐文章于 2022-12-07 15:08:15 发布
最新推荐文章于 2022-12-07 15:08:15 发布
阅读量1.6k 收藏 2
点赞数 4
分类专栏： 前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45542550/article/details/103855530
版权

第一种方法.方法体如下:

(this.listQuery.PageIndex-1) * (this.listQuery.PageSize)+index + 1

=================================================
注释:this.listQuery.PageIndex：当前页码。
this.listQuery.PageSize：每页数量。

=================================================
{{(listQuery.PageIndex-1)*listQuery.PageSize+scope.$index+1}}

第二种方法.写在标签中

{{(listQuery.PageIndex-1)*listQuery.PageSize+scope.$index+1}}

亲测两种方法都好用,建议使用第二种,更方便,后期维护简单

诺德皇家侍卫
关注
  • 4
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue 翻页每次从1开始_element表格翻页第2页从1开始编号(后端从0开始分页)
weixin_36439236的博客
12-29 865
项目中常见的分页显示，第二页从1开始编号，然后在切换分页的过程中，偶现不对，都是小问题，整理记录一下，供参考。template：...type="index"label="编号":index="getIndex"width="80px">...:total="total":pageSize="pageSize":currentPage="currentPage"@sizeChange="si...
vue表格修改后刷新_vue 表格换页时序号和内容刷新不同步
weixin_42469749的博客
12-30 1267
题目描述是一个后台管理页面，用建了个多页表格，在换页时，序号先刷新，之后内容才刷新。。代码如下：<el-table :data="getList" :row-class-name="tableRowClassName" header-row-class-name="header-class" class="tr-hover"><!-- 主体表 --><el-table...
vue 给每行加序号
亦碎流年的博客
02-14 5311
Part.1 示例 当我们想在el-table 中添加序号列时，如下： <el-table-column label="序号" type="index" width="50" align="center"> </el-table-column> Part.2 问题 我们会惊奇的发现，我们翻页时，序...
vue+element 表格翻页，序号仍从1开始，解决为连续序号
九九八拾一的博客
03-27 4673
（1）第一步 （2）第二步 解决！
element plus表格新增序号，该序号根据数据自动从1开始累加
爱的叹息的专栏
09-23 1814
element plus表格新增序号，该序号根据数据自动从1开始累加注意type是index。
element ui实现分页时候如何不从1序号开始
weixin_49065682的博客
12-07 447
举个栗子，加入我们一页table表格是10行，分页到第二页时候我们想从11开始而不是1，这时候我们就可以这样做(如下图片)，里面数字10是根据自己分页器:page-sizes="[10]"而来，这里我是写固定的每页10条数据。
Element-UI的Table组件解决换页后序号重新从1开始的问题
HelloWord176的博客
04-14 1037
问题：使用了el-table，设置indx属性显示数据的行号后，发现第二页的序号还是从1开始排序 解决：设置一个count方法，在换页后重新计算表格行号 <el-table-column label="ID" type="index" :index="count" /> 在method方法中添加以下方法： count(index) { return (this.currentPage - 1) * this.pageSize + index
Vue2.0+ElementUI实现表格翻页的实例
08-29
该实例提供了一个完整的 Vue2.0 和 ElementUI 实现表格翻页的解决方案，涵盖了数据存储、分页、表格渲染等多个方面的内容，对于学习 Vue2.0 和 ElementUI 的开发者具有很高的参考价值。 知识点： 1. ElementUI 的...
解决vue+elementui项目打包后样式变化问题
10-15
通过以上这些方法，我们可以有效地解决Vue+ElementUI项目打包后样式变化的问题，确保打包版本与开发版本保持一致，从而提供稳定的用户体验。在开发过程中，定期进行打包检查和调试，有助于及时发现和修复这些问题，...
对vue + elementUI的表格常规增删改查优化封装
03-29
对vue + elementUI的表格常规增删改查优化封装
vue+elementUI实现表格关键字筛选高亮
12-29
本文实例为大家分享了vue elementUI表格关键字筛选高亮的具体代码，供大家参考，具体内容如下 代码： <!-- 筛选 --> 筛选： 请输入关键字> <!--
vue+elementUI实现动态表格合并单元格.zip
09-26
vue+elementUI实现动态表格，表格可编辑，动态增删行，自动合并单元格。
解决element-ui 表格分页序号不递增问题。
喝水高手
11-03 1287
问题描述： element-ui table表格中，序号列，进行分页，如翻到第二页序号仍然从1开始，并没有递增。 <el-table-column label="序号" type="index" width="120" /> 解决办法： <el-table-column label="序号" type="index" width="120" :index="count" /> methods: { // 解决序号第二页从1开始的问题 // ..
ElementUI表格序号翻页后重置的解决办法
qq_44945983的博客
04-09 825
ElementUI表格序号翻页后重置的解决办法 在使用element的时候表格上面加个序号栏，但是选择下一页的时候序号会被重置 解决办法如下： <el-table-column type="index" :index="count" label="序号" align="center" width="80"/> 给index价格count方法 在methods方法写入 // 计算表格序号 count(
解决elementUI中使用翻页器组件列表序号又从1开始的问题
ju__ju的博客
08-08 1145
这是之前写的代码 当翻到第二页时,序列号又从1开始 于是使用了这样的代码 打印了一下item后发现新增了一个index字段 然后直接使用index字段做序号就行了 ...
el-table翻页序号不从1开始（已解决）
weixin_30565327的博客
07-03 511
法一：赋值方式（亲测有效） <el-table-column type="index" fixed="left" align="center" :index="table_index" //这里绑定一个方法，将返回值赋给index,即表格每行数据的下标></el-table-column> 然后再在methods内写页码的返回值 ： methods:...
vue分页表格添加序号（每页连续排序）
热门推荐
qq_27474555的博客
02-21 1万+
vue分页表格添加序号（每页连续排序） 1、解决思路           获取到数据，使用forEach为每一项动态添加index属性。 2、具体实现 2.1、页面显示 &lt;el-table :data = "tableData" border&gt; &lt;el-table-column prop="index" label="序号" align="center"&gt;&l
Element-ui中table表格组件如何让上一页序号延续
数组喜欢打对象的博客
10-21 278
最近做项目时使用table表格的时候发现: 在序号中定义了属性type="index" 如图所示: 序号是显示出来了,但是翻页之后序号又从1开始排列了,按正常逻辑来说翻页之后的序号应该是上一页末尾的序号加1递增显示的.所以又去翻了翻Element的文档. 终于发现:设置了type="index"属性之后 可以通过传递index属性自定义索引. 代码如下 : data() { return { // 页码数据 pageparams: { page: 1...
SecondactivityMainActivity.java
最新发布
06-24
SecondactivityMainActivity.java
vue+elementui表格搜索
05-15
要在 Vue 中使用 ElementUI 表格进行搜索，你可以使用两种方法： 1. 使用 ElementUI 的 el-input 组件来实现搜索功能 在表格上方添加一个输入框，用户可以在其中输入搜索关键字，然后使用 JavaScript 过滤表格数据并更新表格。 HTML： ``` <template> <div> <el-input v-model="searchText" placeholder="请输入搜索关键字"></el-input> <el-table :data="tableData.filter(item => item.name.includes(searchText))"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> </el-table> </div> </template> ``` JavaScript： ``` export default { data() { return { tableData: [ { name: '张三', age: 18 }, { name: '李四', age: 20 }, { name: '王五', age: 22 } ], searchText: '' }; } }; ``` 2. 使用 ElementUI 的 el-form 组件来实现搜索功能 这种方法可以将搜索关键字与其他筛选条件一起提交到后端进行处理，然后根据后端返回的数据来更新表格。 HTML： ``` <template> <div> <el-form :inline="true" :model="form"> <el-form-item label="姓名"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="年龄"> <el-input v-model="form.age"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">搜索</el-button> </el-form-item> </el-form> <el-table :data="tableData"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> </el-table> </div> </template> ``` JavaScript： ``` export default { data() { return { tableData: [], form: { name: '', age: '' } }; }, methods: { submitForm() { // 向后端提交搜索条件，并获取返回数据更新表格 } } }; ``` 以上是两种使用 ElementUI 表格进行搜索的方法，你可以根据自己的需求选择适合自己的方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值