实现带单个互斥选项的ion-select多选组件功能

核心思路 #

Ionic官方没有原生提供互斥选项配置，你可以通过监听ion-select的ionChange值变更事件，手动处理选中数组的内容实现互斥逻辑。

实现示例（Angular框架） #

组件模板代码 #

<ion-select 
  multiple="true" 
  [(ngModel)]="selectedValues" 
  (ionChange)="onSelectChange()"
  placeholder="请选择选项"
>
  <ion-select-option value="nowhere">Nowhere</ion-select-option>
  <ion-select-option value="head-front">Head-front</ion-select-option>
  <ion-select-option value="eyes">Eyes</ion-select-option>
  <!-- 其余自定义选项 -->
</ion-select>

组件逻辑代码 #

// 绑定ion-select的选中值数组
selectedValues: string[] = [];

onSelectChange() {
  const nowhereIdx = this.selectedValues.findIndex(val => val === 'nowhere');
  // 存在Nowhere选项且同时选了其他选项
  if (nowhereIdx !== -1 && this.selectedValues.length > 1) {
    // 最后一次选中的是Nowhere：清空其他选项，仅保留Nowhere
    if (this.selectedValues.at(-1) === 'nowhere') {
      this.selectedValues = ['nowhere'];
    } 
    // 最后一次选中的是其他选项：移除Nowhere
    else {
      this.selectedValues.splice(nowhereIdx, 1);
    }
  }
}

其他框架适配说明 #

React、Vue等框架下核心逻辑完全一致，仅需替换对应框架的绑定语法：

• 给多选ion-select绑定选中值数组状态
• 监听值变更事件触发逻辑函数
• 按上述规则修改选中值数组，组件会自动同步视图状态

兼容提示 #

如果你的选项值是对象类型，只需将判断逻辑替换为用对象的唯一标识字段（如id、value属性）判断是否为Nowhere选项即可。

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