526互联

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

发布时间 2024-01-02 10:12:22作者: 鼓舞飞扬

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

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

<el-scrollbar ref="scrollbarRef">
    <div class="box-inner"></div>
</el-scrollbar>
const addRuleClick = async () => {
  addForm.value.infoList.push({
    id: addForm.value.infoList.length,
    programName: '',
    playbackTime: [],
    playTime: null,
    programBrightAdjust: null
  })
  await nextTick()
  scrollbarRef.value.update()
}