vue中element-ui表格高度适应窗口动态变化

LuvCube

已于 2022-09-05 16:56:36 修改

阅读量719

点赞数 1

分类专栏： vue 文章标签： vue.js elementui javascript

于 2022-09-05 16:55:26 首次发布

本文链接：https://blog.youkuaiyun.com/m0_56726855/article/details/126708764

版权

vue 专栏收录该内容

1 篇文章

订阅专栏

该博客介绍了如何利用Vue组件的activated生命周期钩子函数，配合window.resize事件监听，实现表格高度随窗口大小变化自适应的效果。代码示例中展示了在keep-alive组件内，如何保持表格高度动态调整，确保页面在切换后仍能正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用了vue生命周期中的activated函数，响应窗口变化，在keep-alive中返回页面依旧有用。

代码如下：

<template>
    <el-table :max-height="maxheight">
    </el-table>
</template>

<script>

export default {
  data() {
    return {
      //表格最大高度
      maxheight: window.innerHeight - 270,
    };
  },

  activated() {
    //表格高度自适应窗口
    this.maxheight = window.innerHeight - 270;
    window.onresize = () => {
      return (() => {
        this.maxheight = window.innerHeight - 270;
      })()
    }
  }
};

</script>