element 动态设置el-table 高度

海上彼尚

于 2024-08-12 10:45:55 发布

阅读量348

点赞数 1

分类专栏：前端开发插件文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/weixin_63443072/article/details/141125279

版权

前端开发插件专栏收录该内容

13 篇文章 0 订阅

订阅专栏

首先不管你的element ui 还是element plus，这个都是通用的。

这里使用vue2来演示，如果你使用的是vue3,那么也相信你也可以转化成你熟练的vue3代码吧。

el-table 组件是自带一个属性 height 可以传值的，那么就好办了。

<template>
    <el-table :height="height" ref="elTableRef"></el-table>
</template>

<script>
export default {
    data(){
        return {
            height:0
        }
    },
    method:{
        getHeight(){
              this.height = window.innerHeight - 220;// 220 可以自己调整
        }
    },
    created() {
        window.addEventListener("resize", this.getHeight);
    }
}
<script/>