在v-select中自定义项目文本 [英] Customizing item-text in v-select

问题描述

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

Please tell me if we can customize item-text for v-select ?

我想自定义 v-select 中的每个项目，就像这样:

I want customize each item in v-select, something like this :

:item-text="item.name - item.description"

推荐答案

是的，您可以使用文档中所述的作用域插槽并提供模板.

Yes you can, using scoped slot as described in the doc and provide a template.

对于 v-select ，您有两个作用域插槽:

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

• selection : to describe how v-select should render items when selected
• item : to describe how v-select should render items when opened

它看起来像这样:

<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

在V-Select中对作用域插槽的文档进行审核

编辑Vuetify 1.1.0 + :这些插槽在继承时也随新组件 v-autocomplete 和 v-combobox 一起提供来自 v-select .

Edit for Vuetify 1.1.0+ : Those slots are also available with new components v-autocomplete and v-combobox as they inherit from v-select.

为Vue 2.6+编辑，替换:

• slot ="selection" slot-scope ="data" 通过 v-slot:selection ="data"
• slot ="item" slot-scope ="data" 通过 v-slot:item ="data"

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

这篇关于在v-select中自定义项目文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！