recherche

Maison  >  Questions et réponses  >  le corps du texte

Comment définir les attributs de plusieurs sous-éléments de v-treeview

<p>Supposons que j'ai les éléments variables avec la structure suivante :</p> <pre class="brush:php;toolbar:false;">[ { identifiant : 1, nom : 'valeur1', item_nested : [ { identifiant : 2, nom : 'valeur2', }, { identifiant : 3, nom : 'valeur3', élément_imbriqué : [ { ID : 4, nom : 'valeur4' } ] } ] } ]≪/pré> <p>Dans v-treeview, nous avons un accessoire appelé item-children qui accepte une chaîne qui permet de définir quelle propriété sera référencée en tant qu'enfant. Au premier niveau, je souhaite avoir l'attribut <code>item_nested</code> en tant qu'enfant et au deuxième niveau, je souhaite avoir l'attribut <code>nested_item</code> Plusieurs valeurs pour les enfants-éléments ? </p>
P粉852578075P粉852578075462 Il y a quelques jours574

répondre à tous(1)je répondrai

  • P粉850680329

    P粉8506803292023-08-29 00:50:29

    VTreeView使用一个string comme clé de l'enfant, donc - sans étendre/écraser le composant d'origine - je ne vois pas de moyen de fournir une clé alternative à l'enfant.

    Cependant, vous pouvez toujours "retaper" l'objet dans lequel vous souhaitez être affiché VTreeview (cet extrait de code ne s'applique qu'à ce cas précis, mais peut être généralisé à d'autres cas) :

    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
      computed: {
        // "re-keying" items:
        modifiedTreeviewItems() {
          const updateItemKeys = (items) => {
            if (!items.length) return []
    
            const mapped = items.map((item) => {
              const {
                item_nested = [], nested_item = [], ...rest
              } = item
              const children = item_nested.length ? item_nested : nested_item.length ? nested_item : []
              return {
                ...rest,
                children: updateItemKeys(children),
              }
            })
            return mapped
          }
          return updateItemKeys(this.treeviewItems)
        },
      },
      data() {
        return {
          treeviewItems: [{
            id: 1,
            name: 'value1',
            item_nested: [{
                id: 2,
                name: 'value2',
              },
              {
                id: 3,
                name: 'value3',
                nested_item: [{
                  id: 4,
                  name: 'value4'
                }]
              }
            ]
          }]
        }
      },
    })
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
    <div id="app">
      <v-app>
        <v-main>
          <v-container>
            <v-treeview :items="modifiedTreeviewItems" />
          </v-container>
        </v-main>
      </v-app>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

    répondre
    0
  • Annulerrépondre