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

Question

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

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

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

原文由 Clark 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

是的，您可以使用 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 Doc 关于 V-Select 中的 Scoped Slot

---

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"

原文由 Toodoo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

速记：

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

原文由 Mohsen 发布，翻译遵循 CC BY-SA 4.0 许可协议