Vue：结合ElementUI元素超过一定高度加滚动框,高度由浏览器高度决定并随浏览器变化而变化

本文主要是介绍Vue：结合ElementUI元素超过一定高度加滚动框,高度由浏览器高度决定并随浏览器变化而变化，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1. 首先利用ElementUI中的el-scrollbar增加滚动条, 并将生效高度绑定数据

   <el-scrollbar :height="scrollbarHeight">
     <div class="classShowInfoMainOfVulnerability"
          v-for="(item,index) in infoList"
          :key="index"
          @click="toVulnerabilityDetail"
     >
       ······
     </div>
   </el-scrollbar>
   

2. 界面加载完成后, 设置生效高度为浏览器高度的70%, 并监听浏览器变化事件, 实时更新高度

   mounted() {
     this.scrollbarHeight = document.documentElement.clientHeight * 0.7 + "px"
     window.onresize = () => {
       if (this.scrollbarHeight) this.scrollbarHeight = document.documentElement.clientHeight * 0.7 + "px"
     };
   }
   

效果

这篇关于Vue：结合ElementUI元素超过一定高度加滚动框,高度由浏览器高度决定并随浏览器变化而变化的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！