Javascript 自定义v-select中的项目文本

请告诉我是否可以为

v-select

自定义

项目文本

我想在

v-select

中自定义每个项目，如下所示：

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

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

---

是的，您可以使用文档中描述的

范围插槽

，并提供

模板

对于

v-select

，您有两个

作用域插槽

：

• selection

  ：描述选择时

  v-select

  应如何呈现项目

• item

  ：描述打开时

  v-select

  应如何呈现项目

看起来是这样的：

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

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

//别忘了你的道具
{{data.item.name}-{{data.item.description}
{{data.item.name}-{{data.item.description}

---

编辑Vuetify 1.1.0+：这些插槽还可以使用新组件

v-autocomplete

和

v-combobox

，因为它们继承自

v-select

---

编辑Vue 2.6+，替换：

• v-slot:selection=“data”

• v-slot:item=“data”

---

插槽将自动选择焦点

item text

tye可以是：

string|array|function

然后我们可以：

:item-text="text"

及

---

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

<template>
<v-select
  label='Names'
  v-model='name'
  :items='names'
  item-value='id'
  item-text='name'
  return-object
>
  <template slot='selection' slot-scope='{ item }'>
    {{ item.name }} - {{ item.age }}
  </template>
  <template slot='item' slot-scope='{ item }'>
    {{ item.name }} - {{ item.age }}
  </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},
    ]
  })
}   
</script>

{{item.name}-{{item.age}
{{item.name}-{{item.age}
导出默认值{
数据：（）=>({
姓名：[
{id:1，姓名：'Paul'，年龄：23}，
{id:2，姓名：'Marcelo'，年龄：15}，
{id:3，姓名：'Any'，年龄：30}，
]
})
}   

以下为参考资料： 速记：

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

---

以防您不想处理插槽或其他方法来操纵项目文本。这里有另一种不同的方法来实现相同的结果

只需使用计算方法将新的“displayname”key:value对动态添加到v-model集合中，并将其用作select的v-model，将新的key用作项文本

计算：{
addDisplayname（）{
返回names.map（v=>（{…v，
显示名称：v.name+'-'+v.description
}))
}
}

saved my day:）saved my day（2）必须同时具有

slot

和

slot scope

属性，用于

模板

标记。这对我来说并不明显。从vue 2.6开始，应该是

您可以这样做：``复选框check\u box\u outline\u blank{{data.item.text}-{{data.item.description}``问题是：数组类型是什么意思？@P.Scheit，

.join（'，'）

alias<代码>:item value也可用于设置所选值。谢谢，我们还可以将其写成

:item text=“item=>`${item.name}-${item.description}`“

唯一对我有效的解决方案，由于我想将其用于“多重”选择-是否有可能根据自定义项目文本对Tiem进行排序？@Inigo实际上这是另一个问题，请检查v-select

filter

props，它接受带有

itemText

的函数，而接受的答案已经适用于我，我更喜欢这个，谢谢一个很好的例子。谢谢你。他的作品很棒