The el-scrollbar of element plus does not display the scroll bar after the asynchronous request, but it can scroll normally

Present the code scene:

// An highlighted block
<div class="down-box">
	<el-scrollbar noresize always ref="scroll">
      <div class="fileBox" v-for="item in MyDownfileList" :key="item.id">
      </div>
  </el-scrollbar>
 </div>

The above is for normal use, which is to render the requested data. My parent has a height, so the el-scrollbar does not have a height, and it will be defined according to the height of the parent.

At this time, a weird phenomenon occurs, the scroll bar is not displayed, but the normal scrolling
solution is to call the update() method in the el-scrollbar, and it can be solved
. Code:

// An highlighted block
<script lang="ts"  setup>
const scroll = ref();
//模仿异步请求
 setTimeout(() => {
    
    
       scroll.value.update()
     }, 100);
</script>

Guess you like

Origin blog.csdn.net/qq_48850466/article/details/127711488