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元素超过一定高度加滚动框,高度由浏览器高度决定并随浏览器变化而变化

上一篇:画了一个田径场,可以踢世界杯吗?


下一篇:题解:团伙