我正在尝试找到一种方法来自定义 <v-select>
的样式选项。我想提供不同的 backgroundColor
取决于期权的值(value)。全部提供: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>
最佳答案
你可以使用插槽 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.,
]
}),
})
关于javascript - Vuetify - 如何自定义 <v-select> 中的选项样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64900585/