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

场景

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

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

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

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

注：

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