Vuetify 3：如何在v-select选项右侧显示头像

你的原有代码问题在于错误嵌套了插槽，item插槽需要你自定义整个选项的结构，而非直接在内部使用append插槽。以下是正确的实现方式：

修改后的代码 #

模板部分 #

<template>
  <v-app>
    <v-main>
      <v-select 
        label="Select" 
        :items="items" 
        item-title="title" 
        item-value="title"
      >
        <template v-slot:item="{ item, props }">
          <v-list-item v-bind="props">
            <v-list-item-title>{{ item.title }}</v-list-item-title>
            <v-list-item-append>
              <v-avatar :image="item.avatar" size="32"></v-avatar>
            </v-list-item-append>
          </v-list-item>
        </template>
      </v-select>
    </v-main>
  </v-app>
</template>

脚本部分 #

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

const items = ref([
  { title: "California", avatar: "https://cdn.vuetifyjs.com/docs/images/logos/vuetify-logo-v3-slim-text-light.svg" },
  { title: "Colorado", avatar: "https://cdn.vuetifyjs.com/docs/images/logos/vuetify-logo-v3-slim-text-light.svg" },
  { title: "Florida", avatar: "https://cdn.vuetifyjs.com/docs/images/logos/vuetify-logo-v3-slim-text-light.svg" },
])
</script>

实现说明 #

• 使用v-list-item作为选项容器，绑定props保留v-select选项的默认交互行为
• 通过v-list-item-title显示选项文本
• 借助v-list-item-append将头像固定在选项右侧，确保布局对齐
• 可通过size属性调整头像大小，适配选项高度

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