Vuetify 2.0中如何为v-autocomplete内符合条件的芯片设置不同颜色

在Vuetify 2.0中，v-autocomplete提供了chip插槽，允许你完全自定义选中项对应的芯片样式，包括根据特定条件设置不同颜色。具体实现步骤如下：

1. 在v-autocomplete内部添加#chip插槽，该插槽会接收data（当前选中项的数据）和remove（删除该芯片的方法）两个参数。
2. 在插槽内使用v-chip组件，根据data.item的属性判断条件，动态绑定color属性。
3. 保留原芯片的特性（如small、deletable），并绑定删除事件到remove方法。

修改后的完整代码示例：

<v-autocomplete
  :value="value"
  :items="usersItems"
  :loading="isLoadingData"
  :search-input.sync="searchUsers"
  outlined
  chips
  small-chips
  deletable-chips
  clearable
  item-text="full_name"
  :item-value="getValueWrapper"
  label="Użytkownicy"
  placeholder="Wpisz by wyszukać"
  multiple
  @input="handleInput"
  @change="$emit('change', value)"
>
  <!-- 原有prepend-item插槽 -->
  <template #prepend-item>
    <v-list-item @click="addAllUsers">
      <v-list-item-action>
        <v-icon color="primary">mdi-plus</v-icon>
      </v-list-item-action>
      <v-list-item-content>
        <v-list-item-title>{{ $t('users_picker.add_all') }}</v-list-item-title>
      </v-list-item-content>
    </v-list-item>
    <v-divider class="mt-2" />
  </template>

  <!-- 原有item插槽 -->
  <template #item="data">
    <template v-if="typeof data.item !== 'object'">
      <v-list-item-content v-text="data.item" />
    </template>
    <template v-else>
      <v-list-item-avatar>
        <img v-if="data.item.avatar_public_path" :src="data.item.avatar_public_path">
        <v-icon v-else>mdi-account-circle</v-icon>
      </v-list-item-avatar>
      <v-list-item-content>
        <v-list-item-title v-html="data.item.full_name" />
        <v-list-item-subtitle>{{ data.item.email }}</v-list-item-subtitle>
      </v-list-item-content>
    </template>
  </template>

  <!-- 新增chip插槽，自定义芯片样式 -->
  <template #chip="{ data, remove }">
    <!-- 替换成你的实际判断条件，比如data.item.role、data.item.isAdmin等 -->
    <v-chip
      :color="data.item.isAdmin ? 'red darken-2' : 'primary'"
      small
      deletable
      @click:close="remove"
    >
      {{ data.item.full_name }}
    </v-chip>
  </template>
</v-autocomplete>

说明：

• 将data.item.isAdmin替换为你业务中的实际判断条件（比如用户角色、权限标识等）。
• 颜色值可使用Vuetify内置色类（如primary、secondary、orange）或自定义十六进制颜色。
• 修正了原代码中v-t4ext的拼写错误，改为v-text。

v-autocomplete是Vuetify中处理多选、搜索、芯片展示场景的最优组件之一，完全匹配你的需求，无需更换。只有当你需要以下特殊功能时，才考虑其他组件：

• 需要对芯片进行拖拽排序：可结合v-chip-group和拖拽库实现，但会增加复杂度。
• 需要更复杂的批量选择逻辑：可考虑v-select配合自定义模板，但v-autocomplete的搜索功能更适合用户选择场景。

内容的提问来源于stack exchange，提问作者Robert Juszczyński