如何在Vuetify的v-autocomplete指定实例中隐藏禁用项？

方法1：自定义过滤函数（推荐） #

利用v-autocomplete的:filter属性自定义过滤逻辑，在过滤时自动排除禁用项，同时保留已选中的禁用项在输入框中显示：

<v-autocomplete 
  v-model="selectedItem"
  :items="items"
  :item-disabled="isItemDisabled"
  :filter="customFilter">
</v-autocomplete>

// 自定义过滤函数
customFilter(item, queryText, itemText) {
  // 先执行Vuetify默认的文本匹配逻辑
  const isMatch = itemText.toLowerCase().includes(queryText.toLowerCase());
  // 匹配成功且项未禁用时才保留
  return isMatch && !this.isItemDisabled(item);
}

isItemDisabled(item) {
  return item.isDeleted;
}

该方法无需修改样式，逻辑清晰，且不会出现空白占位问题。

方法2：通过自定义Item Slot控制渲染 #

使用v-slot:item自定义下拉项的渲染逻辑，直接跳过禁用项的渲染，避免空白占位：

<v-autocomplete 
  v-model="selectedItem"
  :items="items"
  :item-disabled="isItemDisabled">
  <template v-slot:item="{ item, on, attrs }">
    <!-- 仅渲染未禁用的项 -->
    <v-list-item 
      v-if="!isItemDisabled(item)" 
      v-on="on" 
      v-bind="attrs">
      <v-list-item-title>{{ item.text }}</v-list-item-title>
      <!-- 如有其他内容可继续添加，比如subtitle等 -->
    </v-list-item>
  </template>
</v-autocomplete>

isItemDisabled(item) {
  return item.isDeleted;
}

注意：需确保slot内的v-list-item正确绑定on和attrs，否则下拉项的点击选择等交互会失效。

方法3：修正深度样式（针对样式不生效问题） #

如果坚持用样式隐藏，需调整选择器适配Vuetify的DOM结构：

1. 给v-autocomplete添加attach属性，让下拉列表挂载到组件内部，确保样式能作用到下拉项：

<v-autocomplete 
  v-model="selectedItem"
  class="list-hide-disabled"
  :items="items"
  :item-disabled="isItemDisabled"
  attach=".list-hide-disabled">
</v-autocomplete>

2. 修改样式：

::v-deep .list-hide-disabled .v-list-item--disabled {
  display: none !important;
}

若不需要修改attach，也可通过更精准的选择器定位：

::v-deep .list-hide-disabled + .v-menu .v-list-item--disabled {
  display: none !important;
}

但这种方法可能因Vuetify版本更新导致DOM结构变化而失效，可靠性不如前两种方法。

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