场景

ElementUI中的el-table中实现动态添加一行、删除一行、清空所有行：

https://mp.csdn.net/console/editor/html/107815187

在上面中能实现动态添加一行并实现序号递增的效果。

这里记录下递增序号是怎样实现的。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

首先新增一个el-table，并添加一列序号

       <el-tablev-loading="loading":data="bcglXiangXiList":row-class-name="rowClassName"@selection-change="handleDetailSelectionChange"ref="tb"><el-table-column type="selection" width="30" align="center" /><el-table-column label="序号" align="center" prop="xh" width="50"></el-table-column></el-table>

这里绑定的数据源是bcglXiangXiList是一个对象数组。

怎样实现在新增一行时能获取行号跟序号相对应那。

通过设置el-table的:row-class-name="rowClassName"

其中rowClassName是回调函数，所以需要实现此函数

    rowClassName({ row, rowIndex }) {row.xh = rowIndex + 1;},

其中此函数传递了两个参数，其中row是行对象，通过row.xh就可以获取或者设置此行的xh属性。

第二个参数时rowIndex是行的索引，不过此索引是从0开始的。

而所需要的序号要从1开始，所以这里设置了序号为索引加一。

ElementUI中的el-table实现递增的序号列相关推荐

element-UI中手动调用table排序
<el-table:data="tableData"style="width: 100%"height="600"ref=" ...
ElementUI中el-table在表格最下方添加一列汇总小计行
场景 el-table中的每列显示的是数字,需要在表格的最下面一行添加汇总行,计算每列的总和. el-table自带是否显示汇总行这个属性. 注: 博客: https://blog.csdn.net/ ...
使用RStudio中的read.table导入Txt文件出现列的数目比列的名字要多的问题
将.txt文件导入到Rstudio中,出现如下错误: 解决方式: 先用JMP软件采用最佳推荐打开.txt文件,接着将JMP中的.txt文件另存为.csv文件. 再在RStudio中导入.csv文件,顺 ...
mysql查询递增列_mysql在查询结果列表前添加一列递增的序号列（最简）
SELECT @rownum:=@rownum+1 AS 序号, t_user.* FROM t_user ,(SELECT @rownum:=0) r -- 最简写法1 更多写法供参考: ① ...
Element-UI中关于table表格的那些骚操作
最近的项目中使用到element-ui组件库,由于做的是后台管理系统,所以经常需要操作表格,编辑样式的过程中遇到一些问题,官网针对table给出了很多的api,自己可以自定义,基本能满足产品需求,但是 ...
elementui 表格英文加数字排序_解决vue elementUI中table里数字、字母、中文混合排序问题...
1.使用场景使用elementUI中的table时,给包含数字字母中文的名称等字段排序例如:数字(0->9)->大写字母(A->Z)->小写字母(a->z)-> ...
1.ElementUI中table的sortable使用
ElementUI中table的sortable使用 ElementUI-table 1.业务分析将相对应的字段进行升序或者降序,在后台管理系统中,后端返回的指定的页面的数据,所有后端将排序做好,前 ...
elementUI中table中自定义修改时间格式2020-10-26T10:00:00
问题描述: 前端使用el-table查询到后台的数据的某一列时间列默认是标准UTC格式,如果想按照自己想显示的格式获取年月日和时分秒进行显示怎么办 ? 方法一: elementUI中的table提供了 ...
ElementUI中为table增加小计/合计
ElementUI中只有为表格增加一个合计的功能,但是有些时候可能会遇到同时增加小计/合计的功能,可以利用slot='append'去实现多个合计功能. 文章地址: ElementUI中为table增 ...

ElementUI中的el-table实现递增的序号列

场景

实现

ElementUI中的el-table实现递增的序号列相关推荐

最新文章

热门文章