使用element-ui的el-scrollbar时滚动条没有显示出来但是页面可以滚动的解决办法

如果使用 Element UI 的 el-scrollbar 组件时,滚动条没有显示出来但页面可以滚动,可以尝试调用其 update 方法来更新滚动条。

在适当的时机(例如在数据加载完成后或组件更新后),调用 el-scrollbarupdate 方法可以重新计算滚动条的位置和尺寸,从而实现正确的显示。可以通过以下方式来调用 update 方法:

  1. 在 mounted 钩子函数中调用 update 方法:
    mounted() {
      this.$nextTick(() => {
        this.$refs.scrollbar.update();
      });
    }
    

    mounted 钩子函数中,使用 $nextTick 方法来确保 el-scrollbar 已经渲染完成之后再调用 update 方法。

  2. 在组件的方法或事件回调中调用 update 方法:
    methods: {
      handleDataLoaded() {
        this.$nextTick(() => {
          this.$refs.scrollbar.update();
        });
      }
    }
    

    在数据加载完成后或其他合适的时机,调用 handleDataLoaded 方法来触发 update 方法。

    无论是在 mounted 钩子函数中还是在其他方法或事件回调中调用 update 方法,都需要确保 el-scrollbar 已经渲染完成之后再调用。这样,滚动条就会根据内容的变化进行更新,并正确显示出来。

你可能感兴趣的:(vue.js,javascript,elementui)