如何使用swimlane/ngx-datatable在表格末尾新增行？解决插入位置异常

原有新增逻辑的位置判断出现了偏差：

• 代码中使用splice(rowIndex, 0, rowData)方法插入新行时，传入的rowIndex是当前点击触发新增按钮所在的行索引。
• splice方法的参数逻辑是“在指定索引位置插入元素”，因此新行自然会被插入到点击按钮的那一行旁边，而非数组末尾。

核心逻辑调整 #

不再依赖点击行传入的行索引定位插入位置，直接将新行追加到行数组的最末端，搭配数组引用变更触发ngx-datatable的重渲染即可。

修正后的组件代码 #

addNewRow() {
  // 新行数据结构和表格现有行字段保持一致即可
  let rowData = {
    name: "Beryl Rice New",
    gender: "Male",
    company: "Velity",
    actions: ""
  };
  // 直接将新行追加到数组末尾
  this.rows.push(rowData);
  // 生成新的数组引用，触发ngx-datatable的变更检测，避免渲染不更新
  this.rows = [...this.rows];
}

对应模板调整 #

因为插入位置不再需要用到当前行的上下文参数，模板中的点击绑定可以简化：

<!-- 表格行内的操作按钮模板 -->
<ng-template #buttonsTemplate>
  <div class="actions"> 
    <a href="javascript:void(0)" (click)='addNewRow()'> AddNewRow </a>  
  </div>
</ng-template>

外部触发按钮的适配 #

如果新增触发控件放置在表格组件外部，不需要额外传参，直接绑定同一个addNewRow方法即可：

<!-- 表格外部的新增按钮 -->
<button (click)="addNewRow()">末尾新增行</button>
<!-- 表格组件本体 -->
<ngx-datatable [rows]="rows">
  <!-- 列配置项 -->
</ngx-datatable>

• 末尾插入不需要写splice(this.rows.length, 0, rowData)的冗余逻辑，直接调用数组的push方法效果完全一致，可读性更高。
• 如果后续需要对新增行做自动选中、进入编辑态的操作，可以在行数据中增加唯一标识字段，插入完成后通过标识匹配对应行，再更新表格的选中状态即可，不需要修改插入位置的逻辑。

内容的提问来源于stack exchange，提问作者Sansara