Vuetify 3中如何让两个v-combobox不显示彼此已选数据？

开发者阿泽

2026-6-13

实现Vuetify 3双多选Combobox互斥选项的方案

核心思路

给第二个v-combobox的数据源做实时过滤，排除第一个v-combobox已经选中的所有选项，通过模板内的数组过滤逻辑即可实现。

具体实现步骤

假设你的全局选项数据源为options（结构为包含id和name的对象数组），表格每行数据item需要新增两个绑定字段：selectedFirst（绑定第一个多选框的选中值）、selectedSecond（绑定第二个多选框的选中值），且初始值设为空数组。

1. 调整模板代码

<!-- 第一个多选Combobox -->
<v-combobox 
  v-model="item.selectedFirst"
  multiple 
  chips
  item-value="id"
  item-title="name"
  :items="options"
/>

<!-- 第二个多选Combobox - 自动过滤第一个已选选项 -->
<v-combobox 
  v-model="item.selectedSecond"
  multiple 
  chips
  item-value="id"
  item-title="name"
  :items="options.filter(opt => !item.selectedFirst?.some(selected => selected.id === opt.id))"
/>

2. 特殊场景适配

如果你的v-model绑定的是选项名称而非整个对象（比如item.name是选中名称的数组），过滤逻辑改为：
```
:items="options.filter(opt => !item.name.includes(opt.name))"
```
若需要双向互斥（第二个选中的选项也不在第一个显示），给第一个v-combobox也加上过滤逻辑：
```
:items="options.filter(opt => !item.selectedSecond?.some(selected => selected.id === opt.id))"
```