[英]Vuetify - How do I customize styles of option in <v-select>?
我试图找到一种方法来自定义<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>
这里是我想要的结果示例的链接。
.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>
您可以按如下方式使用插槽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.