[英]Vuetify - How do I customize styles of option in <v-select>?
I'm trying to find a way to customize the style of <v-select>
options.我试图找到一种方法来自定义
<v-select>
选项的样式。 I want to provide different backgroundColor
depending on options' value.我想根据选项的值提供不同的
backgroundColor
。 All of provided :items
will be fixed (always the same), so I need to find a way to either detect options via its specific text value or by declaring unique class/id.所有提供的
:items
都将被修复(始终相同),因此我需要找到一种方法来通过其特定的文本值或声明唯一的类/ID 来检测选项。 What would be the best approach for this?什么是最好的方法? Thank you.
谢谢你。
Current Code:当前代码:
<v-select
:items="[
'This is yellow option', // Yellow background.
'This is blue option', // Blue background.
'This is grey option' // Grey background.
]"
>
</v-select>
HERE is a link to my desired outcome example.这里是我想要的结果示例的链接。
.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>
You could use slot item
as follows :您可以按如下方式使用插槽
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.,
]
}),
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.