如何将Vuetify Autocomplete下拉选项改为芯片样式并支持自定义颜色

解决方案 #

你可以通过v-autocomplete的插槽自定义下拉选项内容，不需要修改全局CSS，也不会丢失组件原生特性，还可以直接绑定每个标签的自定义颜色：

1. 先确保你的tags数组每个元素包含标签名称、自定义颜色字段，参考结构：

// 示例tags结构
const tags = [
  { label: "前端", color: "blue" },
  { label: "后端", color: "green" },
  { label: "测试", color: "orange" }
]

2. 修改你的v-autocomplete组件代码，新增item插槽自定义下拉选项：

<v-autocomplete
  chips
  deletable-chips
  multiple
  v-model="selectedTags"
  :items="tags"
  item-title="label"
  item-value="label"
>
  <!-- 自定义下拉菜单内的选项为芯片样式 -->
  <template #item="{ item, attrs, on }">
    <v-list-item v-bind="attrs" v-on="on">
      <v-chip :color="item.raw.color" class="w-100">
        {{ item.title }}
      </v-chip>
    </v-list-item>
  </template>
  <!-- 可选：自定义输入框内已选芯片的颜色，和你现有表格效果保持一致 -->
  <template #selection="{ item, index }">
    <v-chip 
      :color="item.raw.color" 
      deletable 
      @click:delete="selectedTags.splice(index, 1)"
    >
      {{ item.title }}
    </v-chip>
  </template>
</v-autocomplete>

要点说明 #

• 插槽传入的item.raw对应你tags数组的原始元素，直接读取你预先定义的颜色字段即可实现每个标签单独配色
• 必须绑定插槽提供的attrs和on参数，才能保留Autocomplete原生的点击选中、键盘导航、高亮匹配等特性
• 如果你的tags字段名不是示例中的label，对应修改item-title和item-value的取值即可
• 该方案不需要额外配置全局CSS，不会出现样式作用域不匹配导致的报错问题

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