element-UI el-table添加序号列时序号永远都是从1开始?
Part.1 示例
当我们想在 el-table 中添加序号列时,如下:
<el-table-column
label="序号"
type="index"
width="50"
align="center">
</el-table-column>
Part.2 问题
我们会惊奇的发现,我们翻页时,序号永远都是从 1 开始。因为每一次翻页都是根据当前数据的 index 显示,所以我们需要进行自定义
Part.3 解决
关键代码:
(page - 1) * pageSize + scope.$index + 1 // (当前页 - 1) * 当前显示数据条数 + 当前行数据的索引 + 1
改造如下:
<el-table-column
label="序号"
type="index"
width="50"
align="center">
<template scope="scope">
<span>{{(page - 1) * pageSize + scope.$index + 1}}</span>
</template>
</el-table-column>
完美解决!!!
element-UI el-table添加序号列时序号永远都是从1开始?的更多相关文章
- (Element UI 组件 Table)去除单元格底部的横线
Element UI 组件 Table 有一个属性 border,添加它可以增加纵向边框,但是无法控制横线边框,因此即使是最简单的 el-table,也会包含一个底部横线. 这个底部横线其实是一个 b ...
- [转] BootStrap table增加一列显示序号
原文地址:https://blog.csdn.net/aboboo5200/article/details/78839208 最近由于项目需要,使用BootStrap table做数据展示,其中要在第 ...
- 怎么样使element ui 的table某列变色
第一步.在el-table里面加上:row-style="rowClass" <el-table :data="targetCarList" border ...
- Element UI的Table用法
Table 表格 用于展示多条结构类似的数据,可对数据进行排序.筛选.对比或其他自定义操作. ¶基础表格 基 2016-05-02 王小虎 上海市普陀区金沙江路 1518 弄 2016-05-04 王 ...
- sql在添加新列时同时指定default约束名称
alter table tab_testadd col_test NOT NULL CONSTRAINT DFtab_test_col_test DEFAULT 1 引用:http://www.uzz ...
- Element Ui中table实现表格编辑效果
主要以css实现 .tb-edit .el-input, .tb-edit .el-input-number, .tb-edit .el-select { display: none; width: ...
- element ui 合计/table show-summary
在el-table 上面加上show-summary就可以对table的数据进行合计 但是上次出现了合计栏有的为空,有的合计不对的情况,如果出现的是空,那么说明你渲染的数据有undefine(即后台返 ...
- element ui里面table分页,页数从0开始的怎么做?
需求: 后台请求的接口是从0页开始的,但是pagination是从1开始的,就是在点击pagination的第1页是后台转0 1首先在data里面定义为1,其他地方也是定义1 return { for ...
- element ui的table的头部自定义
<el-table-column label="级别" min-width="120" prop="clueLevel" align= ...
随机推荐
- 牛客练习赛13D:幸运数字Ⅳ(康托展开) F:关键字排序
链接:https://www.nowcoder.com/acm/contest/70/D 题目: 定义一个数字为幸运数字当且仅当它的所有数位都是4或者7. 比如说,47.744.4都是幸运数字而5.1 ...
- SimpliciTI协议栈
SimpliciTI组网过程介绍 1.SimpliciTI支持点对点和星形的网络拓扑结构. 下面介绍以AP为中心的SimpliciTI网路协议的星形拓扑结构通信过程 1)当ED节点上电之后就扫描信 ...
- 让padding不影响容器总长度
增加CSS属性: box-sizing:border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;
- bzoj 4813: [Cqoi2017]小Q的棋盘【树形dp】
这么简单的dp我怎么没想到x2 f为从这个点出发后回到这个点最多能走过的点,g为从这个点出发后不回到这个点最多能走过的点,注意g有两种转移:g[u][k]=max(g[u][k],f[u][k-j-1 ...
- 洛谷 P1251 餐巾计划问题【最小费用最大流】
建图细节比较多,对于每个点i,拆成i和i',i表示用的餐巾,i'表示脏餐巾,连接: (s,i,r[i],p)表示在这一天买新餐巾 (i,t,r[i],0)表示这一天用了r[i]的餐巾 (s,i+n,r ...
- springboot(六)自动配置原理和@Conditional
官方参考的配置属性:https://docs.spring.io/spring-boot/docs/current-SNAPSHOT/reference/htmlsingle/#common-appl ...
- 码云 fatal: Authentication failed for
最近push代码到码云时,push失败,提示fatal: Authentication failed for,解决方法就是: 在git命令行中输入 git config --system --unse ...
- 数据结构 - 顺序栈的实行(C语言)
数据结构-顺序栈的实现 1 顺序栈的定义 既然栈是线性表的特例,那么栈的顺序存储其实也是线性表顺序存储的简化,我们简称为顺序栈.线性表是用数组来实现的,对于栈这种只能一头插入删除的线性表来说,用数组哪 ...
- 2017 JUST Programming Contest 3.0 H. Eyad and Math
H. Eyad and Math time limit per test 2.0 s memory limit per test 256 MB input standard input output ...
- That Nice Euler Circuit UVALive - 3263 || 欧拉公式
欧拉定理: 简单多面体的顶点数V.棱数E及面数F间有关系有著名的欧拉公式:V-E+F=2. 设G为任意的连通的平面图,则v-e+f=2,v是G的顶点数,e是G的边数,f是G的面数.(引) 证明(?) ...