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. OpenMediaVault 系统安装问题

    /********************************************************************* * OpenMediaVault 系统安装问题 * 说明: ...

  2. Python下的LibSVM的使用

    突然觉的笔记真的很重要,给自己省去了很多麻烦,之前在Python 3 中装过libsvm 每一步都是自己百度上面搜寻的,花费了很长时间,但是并没有记录方法.这次换了电脑,又开始重新搜寻方法,觉得太浪费 ...

  3. 并不对劲的bzoj3277

    陈年老坑 题意大概是有n个字符串,要求出每一个字符串的所有子串(不包括空串)在所有字符串(包括自身)中出现次数不少于k的有多少个.n,k,字符串总长<=100000. 如果只有一个串的话,非常好 ...

  4. Splay基本操作

    我们以一道题来引入吧! 传送门 题目说的很清楚,我们的数据结构要支持:插入x数,删除x数,查询数的排名和排名为x的数,求一个数前驱后继. 似乎用啥现有的数据结构都很难做到在O(nlogn)的复杂度中把 ...

  5. 类似查询mysql数据库的查询XML的JS类

    一个快捷操作XML数据库的Javascript接口对象,包含select.count.tables.fields等方法,能够像操作mysql等其它数据库一样操作XML数据库. if(document. ...

  6. oracle数据库当前用户下所有表名和表名的注释

    select a.TABLE_NAME,b.COMMENTSfrom user_tables a,user_tab_comments bWHERE a.TABLE_NAME=b.TABLE_NAMEo ...

  7. BZOJ2006 超级钢琴

    Description ​ 给定一个长度为n的区间,询问前k大的区间和,区间长度\(\in [L, R]\). $ n, k <= 500000$ Solution ​ 首先求前缀和.把一个区间 ...

  8. Sgu294He's Circles

    Description 有一个长度为N的环,上面写着'X'和'E',问本质不同的环有多少种.(N不超过200000). Input The input file contains a single i ...

  9. [USACO 2012 Open Gold] Bookshelf【优化dp】

    传送门1:http://www.usaco.org/index.php?page=viewproblem2&cpid=138 传送门2:http://www.lydsy.com/JudgeOn ...

  10. 数据结构RMQ

    RMQ算法介绍 RMQ算法全称为(Range Minimum/Maximum Query)意思是给你一个长度为n的数组A,求出给定区间的最值的下标.当然我们可以采用枚举,但是我们也可以使用线段树来优化 ...