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

Question

请告诉我我们是否可以为 v-select 自定义 item-text ？

我想自定义v-select中的每个项目，如下所示:

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

Answer 1

是的，您可以，按照文档中的描述使用作用域槽并提供模板。

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

• 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 with a complex example

Vuetify Doc about Scoped Slot in V-Select

<小时/>

针对 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"