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

Question

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

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

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

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

Answer 2

插槽删除自动选择焦点。

item-text类型可以是：string | array | function

那么我们可以：

:item-text="text"

和

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

Answer 3

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

<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

Answer 4

Shorthand :

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

Answer 5

以防您不想使用插槽或其他方法来操作项目文本。这是实现相同结果的另一种不同方法。

只需使用计算方法将新的 'displayname' 键：值对添加到您的 v-model 集合中，并将其用作 select 和新键的 v-model作为项目文本

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

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

Customizing item-text in v-select

javascript

vue.js

vuetify.js