66 votes

Personnalisation du texte de l'élément dans v-select

Veuillez me dire si nous pouvons personnaliser item-text pour v-select ?

Je veux personnaliser chaque élément en v-select , quelque chose comme ceci:

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

137voto

Toodoo Points 2423

Oui, vous pouvez, à l'aide de scoped slot comme décrit dans la doc et de fournir un template.

Pour v-select vous avez deux scoped slot :

  • selection : pour décrire la façon dont v-select doit rendre des objets lorsqu'il est sélectionné
  • item : pour décrire la façon dont v-select doit rendre des éléments lors de l'ouverture

Il ressemble à ceci :

<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 avec un exemple complexe

Vuetify Doc sur l'Étendue de Fente en V-Sélectionnez


Edit pour Vuetify 1.1.0+ : les machines à sous sont également disponibles avec de nouveaux composants, v-autocomplete et v-combobox , comme ils héritent d' v-select.


Edit pour Vue 2.6+, remplacer :

  • slot="selection" slot-scope="data" par v-slot:selection="data"
  • slot="item" slot-scope="data" par v-slot:item="data"

44voto

Mohsen Points 143

Sténographie:

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

42voto

br. Points 709

La fente supprime la sélection automatique sur la mise au point.

item-text colorant peut être: string | array | function

alors on peut faire:

 :item-text="text"
 

et

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

24voto

Marcelo Vinicius Points 159

Voici un exemple dans le code suivant simple:

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

Ce qui suit est la référence: https://vuetifyjs.com/en/components/autocompletes#advanced-slots

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X