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

忘是亡心i 2023-10-06 14:16 9阅读 0赞

## 场景 ##

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

[https://mp.csdn.net/console/editor/html/107815187][https_mp.csdn.net_console_editor_html_107815187]

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

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

注：

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

## 实现 ##

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

<el-table
              v-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开始，所以这里设置了序号为索引加一。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

[https_mp.csdn.net_console_editor_html_107815187]: https://mp.csdn.net/console/editor/html/107815187
[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020080515034675.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70