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开始?的更多相关文章

  1. (Element UI 组件 Table)去除单元格底部的横线

    Element UI 组件 Table 有一个属性 border,添加它可以增加纵向边框,但是无法控制横线边框,因此即使是最简单的 el-table,也会包含一个底部横线. 这个底部横线其实是一个 b ...

  2. [转] BootStrap table增加一列显示序号

    原文地址:https://blog.csdn.net/aboboo5200/article/details/78839208 最近由于项目需要,使用BootStrap table做数据展示,其中要在第 ...

  3. 怎么样使element ui 的table某列变色

    第一步.在el-table里面加上:row-style="rowClass" <el-table :data="targetCarList" border ...

  4. Element UI的Table用法

    Table 表格 用于展示多条结构类似的数据,可对数据进行排序.筛选.对比或其他自定义操作. ¶基础表格 基 2016-05-02 王小虎 上海市普陀区金沙江路 1518 弄 2016-05-04 王 ...

  5. sql在添加新列时同时指定default约束名称

    alter table tab_testadd col_test NOT NULL CONSTRAINT DFtab_test_col_test DEFAULT 1 引用:http://www.uzz ...

  6. Element Ui中table实现表格编辑效果

    主要以css实现 .tb-edit .el-input, .tb-edit .el-input-number, .tb-edit .el-select { display: none; width: ...

  7. element ui 合计/table show-summary

    在el-table 上面加上show-summary就可以对table的数据进行合计 但是上次出现了合计栏有的为空,有的合计不对的情况,如果出现的是空,那么说明你渲染的数据有undefine(即后台返 ...

  8. element ui里面table分页,页数从0开始的怎么做?

    需求: 后台请求的接口是从0页开始的,但是pagination是从1开始的,就是在点击pagination的第1页是后台转0 1首先在data里面定义为1,其他地方也是定义1 return { for ...

  9. element ui的table的头部自定义

    <el-table-column label="级别" min-width="120" prop="clueLevel" align= ...

随机推荐

  1. es的forcemerge——按照天分割

    归并线程配置 segment 归并的过程,需要先读取 segment,归并计算,再写一遍 segment,最后还要保证刷到磁盘.可以说,这是一个非常消耗磁盘 IO 和 CPU 的任务.所以,ES 提供 ...

  2. 一.C语言:关键字、标识符和注释

      一.关键字 C语言提供的有特殊含义的符号,共32个. 在Xcode中关键字全部高亮显示,关键字全部都为小写.如return.int等. 二.标识符 定义:标识符是程序员在程序中自定义的一些符号和名 ...

  3. 性能-发挥ORACLE分区表

    ORACLE分区表发挥性能 http://www.cnblogs.com/zwl715/p/3962837.html 1.1 分区表PARTITION table 在ORACLE里如果遇到特别大的表, ...

  4. Git 仓库结构 (二)***

    一.GIT工作流程 了解git,首先要弄清楚对象在被git管理过程中所处的4个阶段,分别是: 工作目录 index(又称为暂存区) 本地仓库 远程仓库. 从时间先后来讲,工作目录的内容是你当前看到的, ...

  5. Asp.net Mvc 数据库上下文初始化器

    在Asp.net Mvc 和Entity FrameWork程序中,如果数据库不存在,EF默认的行为是新建一个数据库.如果模型类与已有的数据库不匹配的时候,会抛出一个异常. 通过指定数据库上下文对象初 ...

  6. tar.xz格式文件的解压方法(转载)

    转自:http://bbs.chinaunix.net/thread-3610738-1-1.html 现在很多找到的软件都是tar.xz的格式的,xz 是一个使用 LZMA压缩算法的无损数据压缩文件 ...

  7. ubuntu安装IDEA和PYCHARM

    IDEA和PYCHAR的下载以及安装步骤一样. 1.下载免费学习版本(Community) 2.解压文件到opt文件夹下面sudo tar -zxvf xxx -C /opt 3.进入解压之后的bin ...

  8. 一步一步学Vue(六)

    本篇继续介绍vue-router,我们需要要完成这样个demo:<分页显示文章列表>:这里我们以博客园首页列表为例简化处理: 按照上图框选所示,简单分为蓝色部分文章组件(ArticleIt ...

  9. bzoj 1068: [SCOI2007]压缩【区间dp】

    神区间dp 设f[l][r][0]为在l到r中压缩的第一个字符为M,并且区间内只有这一个M,f[l][r][0]为在l到r中压缩的第一个字符为M,并且区间内有两个及以上的M 然后显然的转移是f[i][ ...

  10. 11.2NOIP模拟赛

    /* 根右左遍历后最长上升子序列 */ #include<iostream> #include<cstdio> #include<cstring> #include ...