Element Plus Table Table Composant Max-Height n'est pas valide? Comment rendre la table très adaptable et afficher les barres de défilement?

Element Plus Table Table MAX-HEIGHT-HEIGHT Attribut défaillance et solution

Pendant le processus de développement en utilisant Element Plus, nous rencontrons souvent le besoin de hauteur du tableau pour changer dynamiquement en fonction du contenu, mais ne peut pas être infiniment allongé. Idéalement, la hauteur de la table devrait croître à mesure que le contenu augmente jusqu'à ce qu'il atteigne 100% de l'élément parent, et une barre de défilement semble afficher le contenu au-delà de la section. Cependant, la définition de l'attribut max-height: 100% directement pour le composant El-Table n'atteint souvent pas l'effet attendu. Bien que la hauteur du tableau atteigne 100% de l'élément parent, la barre de défilement ne peut pas être affichée normalement.

La raison fondamentale de ce problème est que le composant El-Table lui-même est hautement informatisé. La propriété max-height prend effet sur une certaine hauteur initiale, et lorsque le contenu n'est pas entièrement chargé ou que la hauteur du contenu change, le composant El-Table ne peut pas calculer avec précision sa propre hauteur, provoquant l'échec de la propriété max-hauteur.

Pour résoudre ce problème, nous pouvons prendre les deux méthodes suivantes:

La première méthode consiste à s'assurer que le composant El-Table a une valeur de hauteur définie. Ceci peut être réalisé en réglant directement la propriété de hauteur, comme la hauteur: 500px ou la hauteur: calc (100vh - 100px). L'inconvénient de cette méthode est qu'il nécessite que la hauteur idéale de la table soit connue ou calculée à l'avance, et qu'elle n'est pas assez flexible.

La deuxième méthode est plus flexible, elle écoute les changements de hauteur de l'élément parent et attribue dynamiquement la hauteur de l'élément parent au composant El-Table. La méthode d'implémentation spécifique nécessite l'utilisation de JavaScript pour écouter l'événement de redimensionnement de l'élément parent ou l'utilisation d'autres techniques de mise en page réactives. De cette façon, la hauteur de la composante El-Table est toujours cohérente avec la hauteur de l'élément parent, atteignant ainsi l'effet de la hauteur maximale: 100%. Même si la hauteur du contenu dépasse la hauteur de l'élément parent, la barre de défilement peut être affichée normalement. Cette méthode peut ajuster de manière adaptative la hauteur du tableau en fonction de la taille de l'élément parent, ce qui est plus conforme aux exigences des changements de contenu dynamique.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!