如何在Angular Material中创建带表格结构的多选下拉选择器

要实现多列表格样式的多选下拉，Angular Material原生组件没有直接支持，需通过自定义模板和CSS实现，以下是完整方案：

1. 组件TS代码 #

定义城市数据结构与表单控件：

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

// 城市数据类型
interface City {
  id: number;
  name: string;
  peopleCount: number;
}

@Component({
  selector: 'app-city-select',
  templateUrl: './city-select.component.html',
  styleUrls: ['./city-select.component.css']
})
export class CitySelectComponent {
  // 多选表单控件，绑定选中的城市ID数组
  citiesControl = new FormControl<number[]>([]);
  // 模拟城市数据
  cities: City[] = [
    { id: 1, name: 'Bangalore', peopleCount: 8425970 },
    { id: 2, name: 'Mumbai', peopleCount: 12442373 },
    { id: 3, name: 'Delhi', peopleCount: 11034555 },
    { id: 4, name: 'Hyderabad', peopleCount: 6809970 }
  ];
}

2. 模板HTML代码 #

自定义下拉面板的表头与选项布局：

<mat-form-field appearance="fill">
  <mat-label>选择城市</mat-label>
  <mat-select [formControl]="citiesControl" multiple>
    <!-- 表格表头 -->
    <div class="select-table-header">
      <div class="table-col col-id">ID</div>
      <div class="table-col col-name">城市名称</div>
      <div class="table-col col-count">人口数</div>
    </div>
    <!-- 表格选项行 -->
    <mat-option *ngFor="let city of cities" [value]="city.id">
      <div class="select-table-row">
        <div class="table-col col-id">{{ city.id }}</div>
        <div class="table-col col-name">{{ city.name }}</div>
        <div class="table-col col-count">{{ city.peopleCount.toLocaleString() }}</div>
      </div>
    </mat-option>
  </mat-select>
</mat-form-field>

3. CSS样式代码 #

通过Grid布局实现列对齐，重写原生组件样式消除干扰：

/* 调整下拉面板最小宽度 */
.mat-select-panel {
  min-width: 450px !important;
}

/* 表头布局 */
.select-table-header {
  display: grid;
  grid-template-columns: 80px 200px 150px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  font-weight: 600;
  background-color: #f5f5f5;
}

/* 选项行布局 */
.select-table-row {
  display: grid;
  grid-template-columns: 80px 200px 150px;
  width: 100%;
}

/* 列通用样式 */
.table-col {
  padding: 8px 0;
  display: flex;
  align-items: center;
}

/* 各列对齐方式 */
.col-id {
  justify-content: center;
}

.col-name, .col-count {
  justify-content: flex-start;
}

/* 移除原生选项的默认内边距，避免布局偏移 */
.mat-option {
  padding: 0 16px !important;
}

/* 选项 hover 效果优化 */
.mat-option:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

关键说明 #

• 用CSS Grid实现固定列宽的表格布局，保证表头与每行选项的列严格对齐
• 表头直接放在mat-select内部，作为下拉面板的顶部固定元素
• 重写mat-select-panel和mat-option的默认样式，消除原生内边距对布局的干扰
• 表单控件绑定城市ID数组，符合Angular Material多选下拉的使用规范

注意事项 #

• 确保项目已导入ReactiveFormsModule、MatFormFieldModule、MatSelectModule等必要模块
• 可根据需求调整grid-template-columns的宽度数值，适配不同场景
• 若需支持数据排序、过滤，可结合MatSelect的filterPredicate或第三方管道实现

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