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

Question

请告诉我,如果我们可以自定义item-text的v-select？

我想自定义每个项目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有一个复杂的例子

关于V-Select中的Scoped Slot的Vuetify Doc

编辑V1.1.0 +:这些插槽也可用于新组件v-autocomplete并v-combobox继承v-select.

Answer 2

速记：

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

Answer 3

插槽会移除焦点上的自动选择.

item-text tye可以是: string | array | function

然后我们可以做:

:item-text="text"

和

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

Answer 4

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

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

以下是参考：https : //vuetifyjs.com/en/components/autocompletes#advanced-slots