vue中el-table翻页序号连续

一.需求：
需要在el-table中有一列是序号，且翻页时，序号要连续，且删除当前行时，序号需要从后往前递补；且这个序号不是通过后端返回的数组中取到的对应字段，需要纯前端处理

二.解决方案
方案一：
这个方法有个弊端，就是自定义这一列的宽度会失效

 <el-table-columntype="index"  //e-table有这个属性，可以获取到当前行的下标label="序号" :index="table_index"//可以自定义下标，接受table_index这个方法></el-table-column>

函数内的逻辑：（当前页-1）* 一页多少条数据+当前行的下标+1

 table_index(index){return (this.query.currentPage-1) * this.query.pageSize + index + 1},

方案二：
这个方案可以自定义这一列的宽度

 <el-table-columnlabel="序号"min-width="4%"><template slot-scope="scope"> {{(query.currentPage-1) * query.pageSize+scope.$index+1}}//scope.$index ：获取当前行的下标</template></el-table-column>

删除当前行时，序号需要从后往前递补，直接再删除后再调用下列表接口即可

vue中el-table翻页序号连续相关推荐

vue上下全屏翻页_全屏翻页布局
vue上下全屏翻页 View demo 查看演示Download Source 下载源 We have received a couple of requests on how to use the ...
vue实现上下滑动翻页_vue 实现滚动到底部翻页效果(pc端)
pc端vue 滚动到底部翻页效果,具体内容如下所示: html: [{{item.code||item.name}}] {{item.name}} js: 先写滚动事件 handleScroll() ...
layui 滚动数据_layui 实现table翻页滚动条位置保持不变的例子
最近使用了layui table但是发现了一系列问题,由于被封装过不好自己修改,比如翻页后滑动条每次都会复位,导致体验不好,通过调试,我发现layui table并没有给div加id标签,我通过cla ...
Vue中对Table表格中的输入项进行校验
项目开发中,经常会遇到的场景:对table表格的输入项字段进行校验,同时提交时整体校验. 这个坑真的爬了好久,几个需求做完了,校验也没实现,挫败!后来看到一个博主Element UI from实现校验 ...
在Struts2中使用DisplayTag翻页时的ognl.InappropriateExpressionException解决方案
在Struts2中使用DisplayTag翻页时的ognl.InappropriateExpressionException解决方案在struts2中使用displayTag组件进行翻页时出会出下面的 ...
vue实现上下滑动翻页_基于vue实现上下滑动翻页效果
18年年底的时候,一直在做年度报告的H5页面,因为项目需要,需要实现上下滑动翻页,并且上滑的页面比正常页面的比例要缩小一定比例. 效果类似于http://www.17sucai.com/pins/de ...
vue实现上下滑动翻页_如何通过vue实现一款简单通用的翻页组件
预览先上一波效果图: 基本元素首先,翻页组件(以下称"pager组件")一般拥有的元素有: 上一页第一页中间显示的页码最后一页下一页初始化时需要的配置有: total ...
Android中实现滑动翻页—使用ViewFlipper
有一些场景,我们需要向用户展示一系列的页面.比如我们正在开发一个看漫画的应用,可能就需要向用户展示一张一张的漫画图片,用户使用手指滑动屏幕,可以在前一幅漫画和后一幅漫画之间切换.这个时候ViewFli ...
ubuntu中搜狗输入法怎么翻页
ubuntu中的搜狗输入法不能使用使用win中的[ ] 左右括号键进行翻页. 但是可以使用 - = 两个键翻页,与左右括号效果相同.

vue中el-table翻页序号连续

vue中el-table翻页序号连续相关推荐

最新文章

热门文章