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

LuvCube

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

阅读量641

点赞数 1

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

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

本文链接：https://blog.csdn.net/m0_56726855/article/details/126708764

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用了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>