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

Question

Supposons que j'ai des éléments variables avec la structure suivante : [{id:1,name:'value1',item_nested:[{id:2,name:'value2',},{id:3,name:'value3',nested_item : [{id:4,name:'value4'}]}]}] 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. d'abord

P粉850680329 · Answer

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'
            }]
          }
        ]
      }]
    }
  },
})

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket