L'inspiration pour cet article vient d'une implémentation récente que j'ai réalisée pour créer des mises en page dynamiques sur le front-end basé sur Vue.

Supposons que votre point de terminaison d'API renvoie une présentation YAML comme ci-dessous.

---
row:
  - col: 12
    row:
      - col: 12
        component_id: 1
  - col: 12
    row:
      - col: 6
        component_id: 2
      - col: 6
        row:
          - col: 12
            component_id: 3
          - col: 12
            component_id: 4

Nous nous attendrions à une mise en page comme celle ci-dessous de cette expression YAML.

Ainsi, cela facilite le travail, nous analyserons cette structure YAML et générerons un objet JSON. J'ai utilisé le package yaml.

npm install yaml

Ensuite, nous pourrions l'importer et exécuter l'analyseur.

import YAML from 'yaml'
const jsonObject = YAML.parse(yaml_struct)

Pour que cela fonctionne, nous devons créer un modèle Vue récursif et un composant qui peut s'appeler de manière récursive lorsqu'il rencontre des lignes imbriquées. De cette façon, la structure gérera dynamiquement les mises en page profondément imbriquées comme celle que j'ai fournie.

Maintenant, nous pouvons utiliser ce composant RecursiveRow dans votre composant parent pour gérer la mise en page de niveau supérieur.

C'est ça. Si vous avez des questions, veuillez laisser un commentaire ci-dessous.