Angular 6实现可展开行表格（禁用第三方库）

我来帮你搞定这个可展开行的表格需求，基于你用的Angular 6，咱们分两种方案来实现，都不用Angular Material、jQuery这类第三方工具：

方案一：Angular原生方案（推荐） #

这个方案贴合Angular的开发模式，用模板指令和组件状态来控制展开/收起，逻辑清晰易维护。

步骤1：给数据添加展开状态管理 #

在你的组件.ts文件里，我们可以给每个数据项初始化一个展开状态（也可以用单独的状态对象，避免修改原数据）：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  // 假设你的数据结构示例
  data: any[] = [
    { id: 1, firstName: 'John', lastName: 'Doe', email: 'john@example.com' },
    { id: 2, firstName: 'Jane', lastName: 'Smith', email: 'jane@example.com' }
  ];

  ngOnInit(): void {
    // 给每个数据项添加展开状态，初始为收起
    this.data.forEach(item => {
      item.isExpanded = false;
    });
  }

  // 如果你不想修改原数据，可以用这个方式维护状态
  // expandedStates: { [key: number]: boolean } = {};
  // toggleExpand(id: number) {
  //   this.expandedStates[id] = !this.expandedStates[id];
  // }
}

步骤2：修改HTML模板 #

更新你的表格代码，添加点击事件和展开行（注意你原来的{{item.od}}应该是笔误，改成{{item.id}}）：

<table class="ex-table p3">
  <thead class="ex-table__head">
    <tr class="ex-table__row">
      <th class="ex-table__cell">id</th>
      <th class="ex-table__cell">First Name</th>
    </tr>
  </thead>
  <tbody>
    <!-- 主数据行：点击切换展开状态 -->
    <tr class="ex-table__row" *ngFor="let item of data" (click)="item.isExpanded = !item.isExpanded">
      <td class="ex-table__cell">{{item.id}}</td>
      <td class="ex-table__cell">{{item.firstName}}</td>
    </tr>
    <!-- 展开行：根据状态显示/隐藏，用colspan跨满所有列 -->
    <tr *ngFor="let item of data" class="expanded-row" *ngIf="item.isExpanded">
      <td colspan="2" class="ex-table__cell expanded-cell">
        <!-- 这里放展开后的详细内容，支持任意HTML -->
        <div class="expanded-content">
          <h4>用户详细信息</h4>
          <p>姓氏：{{item.lastName}}</p>
          <p>邮箱：{{item.email}}</p>
          <!-- 也可以嵌套表格展示更多内容 -->
          <table class="inner-table">
            <tr>
              <td>注册时间</td>
              <td>2024-01-01</td>
            </tr>
          </table>
        </div>
      </td>
    </tr>
  </tbody>
</table>

步骤3：添加CSS样式 #

给表格和展开行加些样式，提升视觉体验：

.ex-table {
  width: 100%;
  border-collapse: collapse;
}

.ex-table__cell {
  border: 1px solid #ddd;
  padding: 8px;
}

.ex-table__head .ex-table__cell {
  background-color: #f2f2f2;
  font-weight: bold;
}

.ex-table__row:hover {
  background-color: #f5f5f5;
  cursor: pointer;
}

.expanded-row .expanded-cell {
  background-color: #fafafa;
  padding: 16px;
}

.expanded-content {
  margin-top: 8px;
}

.inner-table {
  margin-top: 10px;
  width: 100%;
  border-collapse: collapse;
}

.inner-table td {
  border: 1px solid #eee;
  padding: 6px;
}

方案二：纯HTML/JavaScript方案 #

如果你想完全脱离Angular指令，用原生JS实现，也可以这样做：

HTML代码 #

<table class="ex-table p3">
  <thead class="ex-table__head">
    <tr class="ex-table__row">
      <th class="ex-table__cell">id</th>
      <th class="ex-table__cell">First Name</th>
    </tr>
  </thead>
  <tbody>
    <tr class="ex-table__row data-row">
      <td class="ex-table__cell">1</td>
      <td class="ex-table__cell">John</td>
    </tr>
    <tr class="expanded-row hidden">
      <td colspan="2" class="ex-table__cell expanded-cell">
        <div class="expanded-content">
          <p>姓氏：Doe</p>
          <p>邮箱：john@example.com</p>
        </div>
      </td>
    </tr>
    <tr class="ex-table__row data-row">
      <td class="ex-table__cell">2</td>
      <td class="ex-table__cell">Jane</td>
    </tr>
    <tr class="expanded-row hidden">
      <td colspan="2" class="ex-table__cell expanded-cell">
        <div class="expanded-content">
          <p>姓氏：Smith</p>
          <p>邮箱：jane@example.com</p>
        </div>
      </td>
    </tr>
  </tbody>
</table>

JavaScript代码 #

document.addEventListener('DOMContentLoaded', function() {
  const dataRows = document.querySelectorAll('.data-row');
  
  dataRows.forEach(row => {
    row.addEventListener('click', function() {
      // 找到当前行后面的展开行，切换隐藏/显示状态
      const expandedRow = this.nextElementSibling;
      if (expandedRow.classList.contains('expanded-row')) {
        expandedRow.classList.toggle('hidden');
      }
    });
  });
});

CSS样式 #

在方案一的CSS基础上，加上隐藏类：

.hidden {
  display: none;
}

关键注意点 #

• 展开行必须用colspan跨满所有列，否则内容会只占一列宽度，视觉效果混乱
• Angular方案里如果不想修改原数据，建议用单独的状态对象来记录每个id的展开状态（代码里注释的方式）
• 纯JS方案要保证数据行和对应的展开行是紧挨着的，这样nextElementSibling才能正确找到目标行

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