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= ...
随机推荐
- centOS安装mysql---glibc方式
写在前面: 首先,centos是自己集成mysql的.但是我要用的服务器人家没给装. 其次,centos是可以yum安装mysql的,我很高兴而且轻松的用yum把mysql安装上了.但是,运行的时候很 ...
- LA 4670 Dominating Patterns (AC自动机)
题意:给定一个一篇文章,然后下面有一些单词,问这些单词在这文章中出现过几次. 析:这是一个AC自动机的裸板,最后在匹配完之后再统计数目就好. 代码如下: #pragma comment(linker, ...
- selenium中关于driver的小记
1: Ubuntu系统将driver放入 /usr/bin 目录下,即可直接启动浏览器. 2: WIN10系统讲Driver放入python安装的根目录下,即可直接启动浏览器. 3: WIN10 ...
- bzoj 1661: [Usaco2006 Nov]Big Square 巨大正方形【枚举】
每句两个顶点确定正方形,取max即可 #include<iostream> #include<cstdio> using namespace std; int n,x,y,s, ...
- 洛谷P2574 XOR的艺术(线段树)——Chemist
当线段树遇上无敌位运算! 还是老套路,线段树维护区间和,一个区间有几个"1"就是这个区间的区间和,同时支持区间修改区间查询,只不过操作从加法变成了异或.主要难点就在更新懒标记那里, ...
- ACboy needs your help HDU - 1712
ACboy needs your help HDU - 1712 ans[i][j]表示前i门课共花j时间最大收益.对于第i门课,可以花k(0<=k<=j)时间,那么之前i-1门课共花j- ...
- 解题报告:hdu 1073 Online Judge
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1073 Problem Description Ignatius is building an Onli ...
- Android Dialogs(1)Dialog简介及Dialog分类
Dialogs A dialog is a small window that prompts the user to make a decision or enter additional info ...
- 比较C#中几种常见的复制字节数组方法的效率[转]
[原文链接] 在日常编程过程中,我们可能经常需要Copy各种数组,一般来说有以下几种常见的方法:Array.Copy,IList<T>.Copy,BinaryReader.ReadByte ...
- windows下Python的安装,以及IDLE的使用
一.Python的下载安装 (1)python的windows安装包可以从https://www.python.org 网址中下载,可以下载3.4版本的或者2.7版本的.(2)下载后直接运行即可.然后 ...