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= ...
随机推荐
- bzoj1090 [SCOI2003]字符串折叠——区间DP
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1090 区间DP... 代码如下: #include<iostream> #inc ...
- DoDataExchange的作用
void CDlgSelectCS::DoDataExchange(CDataExchange* pDX) { CDialog::DoDataExchange(pDX); DDX_Te ...
- UVa 11440 Help Tomisu (数论欧拉函数)
题意:给一个 n,m,统计 2 和 n!之间有多少个整数x,使得x的所有素因子都大于M. 析:首先我们能知道的是 所有素数因子都大于 m 造价于 和m!互质,然后能得到 gcd(k mod m!, m ...
- Android buffer_handle_t的定义(转载)
转自:http://www.cnblogs.com/eustoma/archive/2012/06/08/2541416.html 1. buffer_handle_t 文件位置:system\cor ...
- 【WIP】Swift4 异常处理, JSON处理
创建: 2018/03/24 更新: 2018/06/05 补充catch可以只带where不带模式 [任务表]TODO 异常处理语法 异常的发生 抛出例外 thorw 式 ● 抛出的值的类型必须采 ...
- JSP中传递数据出现的乱码问题
1. <%@ page language="java" import="java.util.*" contentType="text/html; ...
- HDU6012:Lotus and Horticulture(扫描线)(前缀和)
传送门 题意 给出n种植物的适宜培育温度区间[l,r],低于下限获值c,高于上限获值b,其他获值a 分析 首先考虑应该尝试选择哪些点:区间的左右端点.与区间左右端点距离0.50.5的点,这样就一定可以 ...
- 洛谷P2082 区间覆盖(加强版)(珂朵莉树)
传送门 虽然是黄题而且还是一波离散就能解决的东西 然而珂朵莉树还是很好用 相当于一开始区间全为0,然后每一次区间赋值,问最后总权值 珂朵莉树搞一搞就好了 //minamoto #include< ...
- js 调试方法两种
JS的错误捕获一般有下面两种方式: 1. 异常捕获常用方法是 try/catch/ throw /finally 2. 全局捕获window.onerror 1. try/catch/throw/fi ...
- EditextText输入类型
android:inputType="none"--输入普通字符 android:inputType="text"--输入普通字符 android:inputT ...