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. iOS7 push/pop转场动画

    前言 iOS 7之后,苹果提供了自定义转场动画的API,我们可以自己去定义任意动画效果.本篇为笔者学习push.pop自定义转场效果的笔记,如何有任何不正确或者有指导意见的,请在评论中留下您的宝贵意见 ...

  2. 苹果Instruments/Shark性能调试工具概述

    在Mac OS X上你可以使用Gprof这样的UNIX工具用于测试程序性能.当然,Apple也有自己的Profiling Tools,用得比较多的是Shark.10.5里还引入了一个基于DTrace的 ...

  3. AutoIT: 如何设置GUICtrlCreateCombo选项为不可修改状态

    GUICtrlCreateCombo中选中的选项是可修改的,也可设置为不可修改状态. #include<ComboConstants.au3> GUICtrlCreateLabel(, , ...

  4. yum和apt-get 安装方式

    rpm包和deb包是两种Linux系统下最常见的安装包格式,在安装一些软件或服务的时候免不了要和它们打交道.rpm包主要应用在RedHat系列包括 Fedora等发行版的Linux系统上,deb包主要 ...

  5. mysqlnd cannot connect to MySQL 4.1+ using old authentication

    报这个错误主要是因为mysql使用了老的密码格式,而程序要求使用新的格式导致的,解决办法: SET old_passwords = 0; UPDATE mysql.user SET Password ...

  6. javascript 中==与===

    1.==相等运算符 1.1如果操作数具有相同的类型,则判断其等同性,如果两个数的值相等,则返回true(相等),否则返回 false (不相等) 1.2如果两个操作数类型不同,则按如下规则: null ...

  7. 立体渲染 Volumetric Rendering

    基础概念 在3D游戏引擎中,球体.立方体以及所有其它复杂的集合体都是由三角面片组成的.引擎只会渲染物体的表面,比如球体,半透明物体等.整个世界由各种空壳构成. 立体渲染(Volumetric Rend ...

  8. javascript---DOM大编程2

    编程挑战 现在利用之前我们学过的JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居    200万内购五环三居 140万安家东三环 ...

  9. DFS(深度) hihoCoder挑战赛14 B 赛车

    题目传送门 题意:中文题面 分析:放官方题解,就是从1为根节点深搜记录节点的深度,选出最大的深度的点,将该到达该点的节点都vis掉,然后再重新计算没有vis的点的深度,找最大的相加就是答案.放张图好理 ...

  10. Saas物联网共享平台实战

    什么是SaaS系统: 越来越多的软件,开始采用云服务. 云服务只是一个统称,可以分成三大类. IaaS:基础设施服务,Infrastructure-as-a-service PaaS:平台服务,Pla ...