Vuetify - 如何自定义 <v-select> 中的选项样式？答案

【问题标题】：Vuetify - How do I customize styles of option in <v-select>?Vuetify - 如何自定义 <v-select> 中的选项样式？
【发布时间】：2021-03-02 03:56:31
【问题描述】：

我正在尝试找到一种方法来自定义<v-select> 选项的样式。我想根据选项的值提供不同的backgroundColor。所有提供的:items 都将被修复（始终相同），因此我需要找到一种方法来通过其特定的文本值或通过声明唯一的类/ID 来检测选项。最好的方法是什么？谢谢。

当前代码：

<v-select
   :items="[
      'This is yellow option', // Yellow background.
      'This is blue option', // Blue background.
      'This is grey option' // Grey background.
   ]"
>
</v-select>

HERE 是我想要的结果示例的链接。

.yellow {
  background-color: yellow;
}

.blue {
  background-color: blue;
}

.grey {
  background-color: grey;
}

<select>
  <option>Choose</option>
  <option class="yellow">Yellow Backgrond</option>
  <option class="blue">Blue Background</option>
  <option class="grey">Grey Background</option>
</select>

【问题讨论】：

标签： javascript css vue.js material-design vuetify.js

【解决方案1】：

您可以使用插槽item，如下所示：

  <v-select :items="items" label="Standard">
            <template #item="{item}">
              <span :class="[{'yellow':item.includes('yellow')},
                    {'blue':item.includes('blue')},{'grey':item.includes('grey')}]"> 
                      {{item}}</span>
           </template>

  </v-select>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    items:[ 'This is yellow option', // Yellow background.
      'This is blue option', // Blue background.
      'This is grey option' // Grey background.,
    ]
  }),
})

LIVE DEMO

【讨论】：

你太棒了！