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

请告诉我,我们是否可以为 v-select定制 item-text

我想定制每个项目在 v-select,这样的东西:

:item-text="item.name - item.description"
109210 次浏览

是的,你可以,使用文档中描述的 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-autocompletev-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
}))
}
}