如何为Vuetify的v-select/v-autocomplete选项添加自定义data属性或类名

有成熟的实现方案，以下是两种最常用的实现方式：

方案1：使用item插槽自定义选项（最灵活） #

如果需要自定义选项内部结构，同时添加类名或自定义属性，可以直接使用组件内置的item插槽实现：

<v-autocomplete
  v-model="selectedItem"
  :items="items"
>
  <!-- 自定义选项插槽 -->
  <template v-slot:item="{ item, props }">
    <v-list-item
      v-bind="props"
      :class="`option-status-${item.status}`"
      :data-status="item.status"
    >
      <v-list-item-title>{{ item.text }}</v-list-item-title>
    </v-list-item>
  </template>
</v-autocomplete>

配套样式参考：

.option-status-finished {
  color: #2e7d32;
  background-color: #e8f5e9;
}
.option-status-running {
  color: #f57c00;
  background-color: #fff3e0;
}
.option-status-scheduled {
  color: #1976d2;
  background-color: #e3f2fd;
}

方案2：使用item-props动态注入属性（更简洁） #

如果不需要修改选项内部结构，只需要新增类名或data属性，可以直接用内置的item-props属性实现，无需重写插槽：

<template>
  <v-autocomplete
    v-model="selectedItem"
    :items="items"
    :item-props="getItemProps"
  />
</template>

<script>
export default {
  data() {
    return {
      selectedItem: null,
      items: [
        {value:1,text:"Option 1",status:"finished"},
        {value:2,text:"Option 2",status:"running"},
        {value:3,text:"Option 3",status:"scheduled"}
      ]
    }
  },
  methods: {
    getItemProps(item) {
      return {
        // 自定义类名
        class: `option-status-${item.status}`,
        // 自定义data属性
        'data-status': item.status
      }
    }
  }
}
</script>

两种方案均同时兼容v-select和v-autocomplete组件，方案1适合需要定制选项内容的复杂场景，方案2适合仅需添加属性的轻量化场景。

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