Vuetify：为v-autocomplete选项右侧添加对应颜色圆形标识

要给v-autocomplete的普通选项右侧添加对应颜色的圆形，同时排除"Select All"选项，可以通过自定义item插槽来实现，具体步骤如下：

1. 新增item插槽自定义选项布局，在选项右侧添加颜色圆形元素
2. 编写样式定义圆形的外观
3. 针对非标准颜色（如Metallic）设置对应的颜色值

修改后的完整代码：

<template>
  <v-app>
    <v-main>
      <v-autocomplete 
        v-model="selections" 
        item-title="title" 
        item-value="value" 
        label="Color Options" 
        :items="items" 
        :multiple="true" 
        :clearable="true" 
        density="comfortable" 
        variant="outlined" 
        return-object
      >
        <!-- 选中项展示插槽 -->
        <template v-slot:selection="{ item, index }">
          <v-chip v-if="index < 1" size="small">
            <span>{{ item.title }}</span>
          </v-chip>
          <span v-if="index === 1" class="text-grey text-caption align-self-center">
            (+{{ selections.length - 1 }} more)
          </span>
        </template>

        <!-- 顶部全选选项 -->
        <template v-slot:prepend-item>
          <v-list-item title="Select All" @click="toggle">
            <template v-slot:prepend>
              <v-checkbox-btn 
                :color="selectedSomething() ? 'indigo-darken-4' : undefined"
                :indeterminate="selectedSomething() && !selectedAllOptions()"
                :model-value="selectedSomething()"
              ></v-checkbox-btn>
            </template>
          </v-list-item>
          <v-divider class="mt-2"></v-divider>
        </template>

        <!-- 自定义普通选项布局，添加颜色圆形 -->
        <template v-slot:item="{ item }">
          <v-list-item :title="item.title">
            <template v-slot:append>
              <div class="color-circle" :style="{ backgroundColor: getColor(item.value) }"></div>
            </template>
          </v-list-item>
        </template>
      </v-autocomplete>
    </v-main>
  </v-app>
</template>

<script setup>
import { ref } from 'vue'

const items = [
  { "title": "Red", "value": "red" },
  { "title": "Metallic", "value": "metallic" },
  { "title": "Green", "value": "green" }
]
const selections = ref(items)

function selectedAllOptions() {
  return selections.value.length === items.length
}

function selectedSomething() {
  return selections.value.length > 0
}

function toggle () {
  if (selectedAllOptions()) {
    selections.value = []
  } else {
    selections.value = items
  }
}

// 映射颜色值，处理非标准颜色
function getColor(value) {
  const colorMap = {
    red: '#ff0000',
    metallic: '#c0c0c0',
    green: '#008000'
  }
  return colorMap[value] || value
}
</script>

<style scoped>
.color-circle {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid #ddd; /* 可选：添加边框增强辨识度 */
}
</style>

关键说明： #

• item插槽只会作用于items数组中的普通选项，不会影响prepend-item里的"Select All"，自然满足排除要求
• 通过getColor函数将选项的value映射为具体的颜色值，处理像"Metallic"这种非CSS标准颜色的情况
• 自定义.color-circle样式，设置圆形的大小、圆角等外观属性

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