Lors de l'utilisation de el-scrollbar d'element-ui, la barre de défilement n'est pas affichée mais la page peut défiler.

el-scrollbarSi la barre de défilement n'est pas affichée mais que la page peut défiler lors de l'utilisation des composants Element UI , vous pouvez essayer d'appeler sa updateméthode pour mettre à jour la barre de défilement.

À un moment approprié (par exemple, une fois le chargement des données terminé ou la mise à jour d'un composant), la méthode appelée el-scrollbarpeut updaterecalculer la position et la taille de la barre de défilement pour obtenir un affichage correct. La méthode peut être appelée des manières suivantes update:

  1. mounted Appelez la méthode dans la  fonction  hookupdate :
    mounted() {
      this.$nextTick(() => {
        this.$refs.scrollbar.update();
      });
    }
    

    Dans mountedla fonction hook, utilisez $nextTickla méthode pour vous assurer que el-scrollbarle a été rendu avant d'appeler updatela méthode.

  2. Appelez la méthode dans la méthode ou le rappel d'événement d'un composant update :
    methods: {
      handleDataLoaded() {
        this.$nextTick(() => {
          this.$refs.scrollbar.update();
        });
      }
    }
    

    Une fois le chargement des données terminé ou à d'autres moments appropriés, appelez handleDataLoadedla méthode pour déclencher updatela méthode.

    Que vous mountedappeliez la méthode dans la fonction hook ou dans d'autres méthodes ou rappels d'événements update, vous devez vous assurer el-scrollbarque le rendu est terminé avant d'appeler. De cette façon, la barre de défilement sera mise à jour en fonction du changement de contenu et affichée correctement.

おすすめ

転載: blog.csdn.net/qq_45870314/article/details/131708302