Angular 13中如何获取表格的多行选中行索引

你当前使用findIndex()方法只能返回第一个匹配条件的行索引，因此无法获取多个选中行的索引。要实现多行选中的索引获取，需要遍历数据集合，筛选出所有isSelected为true的行，并收集它们的索引或数据。

修改 addSelectedRow 方法（支持多行选中添加） #

替换原方法为以下代码，实现获取所有选中行的索引并批量添加到目标数据集合：

addSelectedRow() {
  // 遍历data1，筛选出所有选中的行及其索引
  const selectedItems = this.data1.map((row, index) => ({ row, index }))
    .filter(item => item.row.isSelected);

  // 批量添加选中行到data2，并取消原行的选中状态
  selectedItems.forEach(item => {
    this.data2.push({
      ...item.row,
      isSelected: false
    });
    item.row.isSelected = false;
  });

  // 提取所有选中行的索引数组
  const selectedIndices = selectedItems.map(item => item.index);
  alert('选中的行索引：' + selectedIndices.join(', '));
}

修改 removeSelectedRow 方法（支持多行选中删除） #

如果需要支持批量删除选中行，修改方法如下（从后往前遍历避免索引错乱）：

removeSelectedRow() {
  // 从末尾开始遍历，删除所有选中的行
  for (let i = this.data2.length - 1; i >= 0; i--) {
    if (this.data2[i].isSelected) {
      this.data2.splice(i, 1);
    }
  }
}

说明 #

• HTML部分无需修改，[(ngModel)]绑定的row.isSelected已经可以正确记录每一行的选中状态
• map((row, index) => ({ row, index })) 用于同时保留行数据和对应的索引
• 批量删除时从后往前遍历，是为了避免删除元素后后续行的索引偏移，导致漏删或误删

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