<v-select> // Don't forget your props
<template slot="selection" slot-scope="data">
<!-- HTML that describe how select should render selected items -->
{{ data.item.name }} - {{ data.item.description }}
</template>
<template slot="item" slot-scope="data">
<!-- HTML that describe how select should render items when the select is open -->
{{ data.item.name }} - {{ data.item.description }}
</template>
</v-select>
6条答案
按热度按时间2nbm6dog1#
是的,你可以使用
scoped slot
,如文档中所述,并提供一个template
。对于
v-select
,您有两个scoped slot
:selection
:描述v-select
在选中时应如何呈现项item
:描述v-select
在打开时应如何呈现项它看起来像这样:
CodePen with a complex example
关于V-Select中的作用域插槽的Vuetify文档
编辑Vuetify 1.1.0+:这些插槽也可用于新组件
v-autocomplete
和v-combobox
,因为它们继承自v-select
。Vue 2.6+版本编辑,替换:
slot="selection" slot-scope="data"
通过v-slot:selection="data"
slot="item" slot-scope="data"
通过v-slot:item="data"
8ftvxx2r2#
速记:
fnatzsnv3#
插槽删除对焦时的自动选择。
item-text
类型可以是:string | array | function
那么我们就可以:
和
ua4mk5z44#
下面是一个简单的代码示例:
以下为参考文献:https://vuetifyjs.com/en/components/autocompletes#advanced-slots
11dmarpk5#
如果你不想处理槽或其他方法来操作item-text。这里有另一种不同的方法来实现相同的结果。
只需添加一个新的“displayname”键:使用computed方法动态地将值对添加到v-model集合中,并将其用作select的v-model,将new键用作item-text
uwopmtnx6#
最简单的方式,没有插槽和最小的逻辑。您可能希望使用
item-title
。