Vue-实现自适应屏幕高度的方法

最新推荐文章于 2024-04-01 14:19:59 发布

原创

最新推荐文章于 2024-04-01 14:19:59 发布 · 6.7k 阅读

收录于

当前文章被以下社区和专栏收录：

本文介绍了如何在Vue项目中，结合element-ui的table组件，通过HTML、JavaScript和Vuex的store.js来实现表格高度自适应屏幕高度。通过设置相关代码，使得table组件能够根据屏幕尺寸动态调整其高度。

在这里插入图片描述
项目中使用的element-ui的table组件，让它的高度自适应屏幕的高度，代码如下：

html:

 <div
        class="tablebox"
        v-bind:style="'height:' + (bodyHeight - 170) + 'px'">
        <el-table
          :data="tableData"
          style="width: 100%;"
          :height="bodyHeight - 210"
          v-loading="loading"
        >
        </el-table>
 </div>