如何从PrimeNG的p-multiselect分组下拉框中每组选单个选项

要实现分组下拉框中每个分组只能选一个选项，你可以通过监听选择事件+自定义逻辑来限制，具体步骤如下：

1. 准备分组格式的数据源 #

确保你的数据是标准的分组结构，每个分组包含label（分组名）和items（分组内选项）：

// 示例分组数据
groupedOptions = [
  {
    label: '分组1',
    items: [
      { label: '选项1-1', value: 'opt1-1' },
      { label: '选项1-2', value: 'opt1-2' }
    ]
  },
  {
    label: '分组2',
    items: [
      { label: '选项2-1', value: 'opt2-1' },
      { label: '选项2-2', value: 'opt2-2' }
    ]
  }
];
selectedValues: any[] = [];

2. 绑定组件并监听选择变化 #

在模板中使用p-multiselect，绑定分组数据，并监听onChange事件：

<p-multiselect 
  [options]="groupedOptions" 
  [(ngModel)]="selectedValues" 
  [group]="true"
  (onChange)="handleSelectionChange($event)">
</p-multiselect>

3. 编写选择限制逻辑 #

在组件的handleSelectionChange方法中，处理选中项，确保每个分组仅保留最后选中的选项：

handleSelectionChange(event: any) {
  const selectedItems = event.value;
  // 按分组归类选中项，记录每个分组最后选中的选项
  const groupSelectedMap = new Map();
  
  selectedItems.forEach(item => {
    // 找到当前选项所属的分组
    const group = this.groupedOptions.find(g => g.items.includes(item));
    if (group) {
      // 覆盖分组的选中项，只留最后一个
      groupSelectedMap.set(group.label, item);
    }
  });
  
  // 将map中的值转为数组，更新选中值
  this.selectedValues = Array.from(groupSelectedMap.values());
}

4. 可选：禁用已选分组的其他选项（优化体验） #

如果想要更直观的限制，可以给已选分组的其他选项添加禁用状态，使用optionDisabled属性：

<p-multiselect 
  [options]="groupedOptions" 
  [(ngModel)]="selectedValues" 
  [group]="true"
  (onChange)="handleSelectionChange($event)"
  [optionDisabled]="isOptionDisabled">
</p-multiselect>

对应的方法：

isOptionDisabled(option: any) {
  // 检查当前选项所属分组是否已有选中项，且选中项不是自己
  const group = this.groupedOptions.find(g => g.items.includes(option));
  if (!group) return false;
  
  const groupSelectedItem = this.selectedValues.find(item => group.items.includes(item));
  return groupSelectedItem && groupSelectedItem.value !== option.value;
}

这样就能保证每个分组只能选中一个选项，同时如果启用了禁用逻辑，用户也无法重复选择同一分组的其他选项。

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