如何在Vuetify v-select中使用带自定义图标的v-chip

核心是通过v-select提供的selection具名插槽自定义选中项的chip渲染，不需要修改原有数据源和v-model绑定逻辑，直接替换原有v-select代码即可。

修改后的完整组件代码 #

<v-select v-model="myModel"
   :items="users"
   chips
   :item-disabled="user => !user.IS_ACTIVE"
   label="Required users to finalize"
   item-text="NAME"
   item-value="ID"
   multiple
   filled
   return-object
>
  <!-- 自定义选中项chip -->
  <template #selection="{ item }">
    <v-chip
      class="ma-2"
      :color="item.IS_ACTIVE ? 'teal' : 'grey lighten-1'"
      text-color="white"
      close
      @click:close="deleteSelected(item)"
    >
      <!-- 仅激活状态的用户显示对勾图标 -->
      <v-avatar left v-if="item.IS_ACTIVE">
        <v-icon>mdi-checkbox-marked-circle</v-icon>
      </v-avatar>
      {{ item.NAME }}
    </v-chip>
  </template>
</v-select>

配套方法 #

自定义chip后默认的删除选中项逻辑会失效，需要在组件methods里添加对应删除方法：

methods: {
  deleteSelected(target) {
    // 因开启了return-object，myModel存储的是选中的完整用户对象数组，按ID过滤即可
    this.myModel = this.myModel.filter(user => user.ID !== target.ID)
  }
}

逻辑说明 #

• 动态绑定chip颜色：激活用户用你指定的teal底色，未激活用户用浅灰色做视觉区分
• 图标渲染加v-if="item.IS_ACTIVE"判断，仅激活用户的chip左侧显示要求的对勾图标，结构和你提供的参考v-chip完全一致
• 修正了原代码里无效的readonly绑定：原写法:readonly="!item.Active"没有对应作用域不会生效，换成:item-disabled属性后，未激活的用户选项会直接处于禁用状态无法选中，符合业务逻辑
• 给自定义chip加了close属性和对应点击事件，保持和默认chips一致的删除选中项交互

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