elementui的table与自适应高度

最新推荐文章于 2024-05-10 10:03:10 发布

xkai007

最新推荐文章于 2024-05-10 10:03:10 发布

阅读量1.4k

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/xkai007/article/details/112989785

版权

html vue elementui tablet

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

创建高度变量

data(){
	return {
		tableHeight : 400
	}
}

给table应用变量

<div id="top">表格上方的其他布局</div>
<el-table 
    :height="tableHei" > 
</el-table>

计算获取最新高度并改变高度变量

用 窗口高度 - 上边其他布局高度 - 最上面的导航栏高度和其他边距高度(225) = 表格高度（也就是剩下的高度）  

225是我项目中当前界面的一个导航栏，如果你的项目没有可以去掉，而且这个高度我自己是知道具体值

mounted() {
      this.$nextTick(() => {
        // 窗口高度 - 上边其他布局高度 - 最上面的导航栏高度和其他边距高度(225) = 表格高度（也就是剩下的高度）
        this.tableHeight = (window.innerHeight - (document.getElementById("top").offsetHeight + 225));
      })
      
    },