如何在Vuetify多选Autocomplete菜单的item插槽中显示复选框？

当你自定义item插槽时，Vuetify默认的选项内容（包括复选框）会被完全覆盖，所以需要手动在插槽中添加复选框组件，并同步选中状态。以下是具体实现方案：

核心思路 #

1. 在自定义item插槽内手动引入v-checkbox组件，绑定当前选项的选中状态
2. 结合v-tooltip实现选项的提示框功能
3. 确保复选框的选中/取消操作与Autocomplete的v-model同步

完整代码示例 #

模板部分 #

<v-autocomplete
  v-model="selectedItems"
  :items="options"
  multiple
  chips
  label="选择选项"
>
  <template v-slot:item="{ item, on }">
    <div class="d-flex align-center">
      <!-- 手动添加复选框，复用组件原生事件 -->
      <v-checkbox
        :value="selectedItems.includes(item)"
        v-on="on"
        hide-details
        class="mr-2"
      />
      <!-- 带提示框的选项文本 -->
      <v-tooltip bottom>
        <template v-slot:activator="{ on: tooltipEvents }">
          <span v-on="tooltipEvents">{{ item.label }}</span>
        </template>
        <span>{{ item.tooltip }}</span>
      </v-tooltip>
    </div>
  </template>
</v-autocomplete>

脚本部分 #

export default {
  data() {
    return {
      selectedItems: [],
      options: [
        { label: "选项A", value: "a", tooltip: "这是选项A的提示信息" },
        { label: "选项B", value: "b", tooltip: "这是选项B的提示信息" },
        { label: "选项C", value: "c", tooltip: "这是选项C的提示信息" }
      ]
    };
  }
};

关键细节说明 #

• 利用插槽提供的on参数绑定复选框的事件，无需手动编写选中逻辑，直接复用Autocomplete原生的选中状态同步逻辑
• 通过selectedItems.includes(item)判断当前选项是否已被选中，绑定到复选框的value属性
• 使用v-tooltip的activator插槽绑定鼠标事件，实现hover显示提示框的效果
• 给v-checkbox添加hide-details和mr-2类，保持与默认样式一致的视觉效果

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