在 v-select 中自定义项目文本

是的，你可以，使用文档中描述的 scoped slot并提供一个 template。

对于 v-select，你有两个 scoped slot:

• selection: 描述选中时 v-select应该如何呈现项目
• item: 描述 v-select如何在打开时呈现项目

它看起来像这样:

<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>

CodePen 和一个复杂的示例

Vuetify 文件关于 V-Select 中的作用域插槽

编辑 Vuetify 1.1.0 + : 这些插槽也可用于新组件 v-autocomplete和 v-combobox，因为它们继承自 v-select。

编辑 Vue 2.6 + ，替换:

• slot="selection" slot-scope="data" by v-slot:selection="data"
• slot="item" slot-scope="data" by v-slot:item="data"

插槽移除焦点上的自动选择。

可以是: string | array | function

然后我们就可以:

:item-text="text"

还有

methods: {
text: item => item.name + ' — ' + item.description
}

下面是一个简单的代码示例:

<template>
<v-select
label="Names"
v-model="name"
:items="names"
item-value="id"
item-text="name"
return-object
>
<template v-slot:selection="{ item }">
\{\{ getText(item) }}
</template>
<template v-slot:item="{ item }">
\{\{ getText(item) }}
</template>
</v-select>
</template>


<script>
export default {
data: () => ({
names: [
{ id: 1, name: 'Paul', age: 23 },
{ id: 2, name: 'Marcelo', age: 15 },
{ id: 3, name: 'Any', age: 30 },
],
name: null,
}),
methods: {
getText(item) => `${item.name} - ${item.text}`,
},
}
</script>

参考文献如下: Https://vuetifyjs.com/en/components/autocompletes#advanced-slots

简写:

:item-text="item => item.name +' - '+ item.description"

以防您不想处理插槽或其他方法来操作项文本。这里有另一种不同的方法来达到同样的结果。

简单地添加一个新的‘ displayname’key: value 对到您的 v-model 集合中，使用一个计算方法，并使用它作为 select 的 v-model，使用新键作为 item-text

computed: {
addDisplayname() {
return names.map(v => ({ ...v,
displayname: v.name + ' - ' + v.description
}))
}
}