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"
     };
   }
   

效果