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開始，所以這里設置了序號為索引加一。