Angular 14带下拉菜单的表格展开面板实现方案问询

方案一：Angular Material 实现（自定义程度高） #

利用 MatTable 配合 MatExpansionPanel 实现，表头保持单行结构，每行的展开区域嵌入表格扩展行中，下拉菜单使用 MatSelect 组件。

模板代码 #

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <!-- 定义表头列 -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> 名称 </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> 位置 </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>
  <!-- 展开触发列 -->
  <ng-container matColumnDef="expand">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell *matCellDef="let element">
      <button mat-icon-button (click)="element.expanded = !element.expanded">
        <mat-icon>{{element.expanded ? 'expand_less' : 'expand_more'}}</mat-icon>
      </button>
    </td>
  </ng-container>

  <!-- 主数据行 -->
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let element; columns: displayedColumns;" 
      [class.expanded-row]="element.expanded"></tr>

  <!-- 展开详情行 -->
  <tr mat-row *matRowDef="let element; columns: ['expandedDetail']" 
      [@detailExpand]="element.expanded ? 'expanded' : 'collapsed'">
    <td colspan="3">
      <mat-expansion-panel [expanded]="element.expanded" (opened)="element.expanded=true" (closed)="element.expanded=false">
        <mat-expansion-panel-header>
          <mat-panel-title>操作选项</mat-panel-title>
        </mat-expansion-panel-header>
        <!-- 下拉菜单 -->
        <mat-form-field appearance="fill">
          <mat-label>选择操作</mat-label>
          <mat-select>
            <mat-option value="option1">选项1</mat-option>
            <mat-option value="option2">选项2</mat-option>
            <mat-option value="option3">选项3</mat-option>
          </mat-select>
        </mat-form-field>
        <p>更多详情内容...</p>
      </mat-expansion-panel>
    </td>
  </tr>
</table>

组件类代码 #

import { Component } from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';

export interface PeriodicElement {
  name: string;
  position: number;
  expanded: boolean;
}

const ELEMENT_DATA: PeriodicElement[] = [
  {position: 1, name: 'Hydrogen', expanded: false},
  {position: 2, name: 'Helium', expanded: false},
  {position: 3, name: 'Lithium', expanded: false},
];

@Component({
  selector: 'table-expandable-rows-example',
  templateUrl: 'table-expandable-rows-example.html',
  styleUrls: ['table-expandable-rows-example.css'],
  animations: [
    trigger('detailExpand', [
      state('collapsed', style({height: '0px', minHeight: '0'})),
      state('expanded', style({height: '*'})),
      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
    ]),
  ],
})
export class TableExpandableRowsExample {
  displayedColumns: string[] = ['position', 'name', 'expand'];
  dataSource = ELEMENT_DATA;
}

方案二：DevExpress DxDataGrid 实现（快速简便） #

DevExpress 的 DxDataGrid 内置行展开功能，可直接通过配置启用，并自定义展开模板嵌入下拉菜单（DxSelectBox），无需手动管理状态和动画。

模板代码 #

<dx-data-grid
  [dataSource]="dataSource"
  [rowExpansionEnabled]="true"
>
  <dxo-columns>
    <dxi-column dataField="position" caption="位置"></dxi-column>
    <dxi-column dataField="name" caption="名称"></dxi-column>
    <dxi-column type="expand"></dxi-column>
  </dxo-columns>

  <div *dxTemplate="let data of 'expandedRow'">
    <dx-select-box
      [items]="operationOptions"
      displayExpr="text"
      valueExpr="value"
      placeholder="选择操作"
    ></dx-select-box>
    <p>更多详情内容：{{data.data.name}} 的额外信息</p>
  </div>
</dx-data-grid>

组件类代码 #

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

export interface DataItem {
  position: number;
  name: string;
}

export interface OptionItem {
  text: string;
  value: string;
}

@Component({
  selector: 'app-dx-grid-expand',
  templateUrl: './dx-grid-expand.component.html',
})
export class DxGridExpandComponent {
  dataSource: DataItem[] = [
    {position: 1, name: 'Hydrogen'},
    {position: 2, name: 'Helium'},
    {position: 3, name: 'Lithium'},
  ];

  operationOptions: OptionItem[] = [
    {text: '选项1', value: 'option1'},
    {text: '选项2', value: 'option2'},
    {text: '选项3', value: 'option3'},
  ];
}

方案选择 #

• 若需要高度自定义布局和交互逻辑，优先选 Angular Material 方案；
• 若追求开发效率、无需复杂自定义，DevExpress DxDataGrid 是更简便的选择。

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