web-dev-qa-db-fra.com

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

S'il vous plaît dites-moi si nous pouvons personnaliser item-text pour v-select?

Je veux personnaliser chaque élément dans v-select, quelque chose comme ça :

:item-text="item.name - item.description"
vuetify.js
22
Clark

Oui, vous pouvez, en utilisant scoped slot comme décrit dans la doc et fournissez un template.

Pour v-select Tu as deux scoped slot:

  • selection: pour décrire comment v-select devrait rendre les éléments une fois sélectionnés
  • item: pour décrire comment v-select devrait rendre les éléments à l'ouverture

Cela 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 à propos de Scoped Slot dans V-Select

Éditer pour Vuetify 1.1.0 + : Ces emplacements sont également disponibles avec de nouveaux composants v-autocomplete et v-combobox comme ils héritent de v-select.

Modifier pour Vue 2.6 + , remplacez:

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

Slot remove auto select sur la mise au point.

Le type item-text Peut être: string | array | function

alors nous pouvons faire:

:item-text="text"

et

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

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>

La référence suivante est la suivante: https://vuetifyjs.com/fr/components/autocompletes#advanced-slots

5
Marcelo Vinicius