Angular表格实现行列选中高亮并收集高亮数据到数组的方案求助

以下是完整的实现步骤，直接替换对应文件的代码即可生效： #

1. 修改组件模板（sheet.component.html） #

给表格添加事件监听和动态类绑定，记录行列索引：

<table class="sjs-table" (mouseleave)="clearHover()">
  <tbody>
    <tr 
      *ngFor="let row of test; let rowIdx = index"
      [class.highlight-row]="rowIdx === hoveredRow || rowIdx === selectedRow"
    >
      <td 
        *ngFor="let val of row; let colIdx = index"
        (mouseenter)="onCellHover(rowIdx, colIdx)"
        (click)="onCellClick(rowIdx, colIdx, row)"
        [class.highlight-col]="colIdx === hoveredCol || colIdx === selectedCol"
      >
        {{val}}
      </td>
    </tr>
  </tbody>
</table>

2. 修改组件逻辑（sheet.component.ts） #

添加状态变量和事件处理方法，自动存储高亮的行列数据：

export class SheetJSComponent {
  // 注意修改数组类型为any[][]避免类型报错
  test: any[][] = [
    ["Year","Month","Facebook","Reddit","LinkedIn","Instagram"],
    [2019,1,"50","20","25","20"],
    [2019,2,"80","20","25","20"],
    [2019,3,"120","20","25","20"],
    [2019,4,"75","20","25","20"],
    [2019,5,"60","20","25","20"],
    [2019,6,"80","20","25","20"],
    [2019,7,"95","20","25","20"],
    [2019,8,"55","20","25","20"],
    [2019,9,"45","20","25","20"],
    [2019,10,"80","20","25","20"],
    [2019,11,"90","20","25","20"],
    [2019,12,"110","20","25","20"],
    [],
    ["This is system generated excel sheet."]
  ];

  // 悬停状态的行列索引
  hoveredRow: number | null = null;
  hoveredCol: number | null = null;
  // 点击固定高亮的行列索引
  selectedRow: number | null = null;
  selectedCol: number | null = null;
  // 存储高亮行列数据的数组
  highlightedRowData: any[] = [];
  highlightedColData: any[] = [];

  // 处理单元格悬停
  onCellHover(rowIdx: number, colIdx: number) {
    this.hoveredRow = rowIdx;
    this.hoveredCol = colIdx;
  }

  // 离开表格清空悬停状态
  clearHover() {
    this.hoveredRow = null;
    this.hoveredCol = null;
  }

  // 处理单元格点击
  onCellClick(rowIdx: number, colIdx: number, currentRow: any[]) {
    // 重复点击同一个单元格取消高亮
    if (this.selectedRow === rowIdx && this.selectedCol === colIdx) {
      this.selectedRow = null;
      this.selectedCol = null;
      this.highlightedRowData = [];
      this.highlightedColData = [];
      return;
    }
    this.selectedRow = rowIdx;
    this.selectedCol = colIdx;
    // 存储当前行数据
    this.highlightedRowData = [...currentRow];
    // 收集当前列所有行的有效数据
    this.highlightedColData = this.test.map(row => row[colIdx]).filter(val => val !== undefined);
  }
}

3. 添加CSS样式 #

在组件对应的css文件中添加以下样式，可自行调整颜色值匹配设计需求：

.sjs-table {
  border-collapse: collapse;
  width: 100%;
}
.sjs-table td {
  border: 1px solid #e0e0e0;
  padding: 8px 12px;
}
/* 行高亮样式 */
.highlight-row {
  background-color: #f5faff !important;
}
/* 列高亮样式 */
.highlight-col {
  background-color: #f5faff !important;
}
/* 高亮交叉的单元格颜色更深，方便识别 */
.highlight-row .highlight-col {
  background-color: #d7ecff !important;
}

实现后效果：

• 鼠标悬停到任意单元格时，对应整行、整列临时高亮，移开鼠标后高亮消失
• 点击任意单元格时，对应整行、整列固定高亮，再次点击同一单元格可取消固定高亮
• 固定高亮的行数据会自动存入highlightedRowData数组，列数据会自动存入highlightedColData数组

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