elemenu ui table 设自适应高度

萧大侠jdeps

于 2022-05-04 15:47:57 发布

阅读量1.9k

点赞数

文章标签： javascript vue.js css3

本文链接：https://blog.csdn.net/m0_37588079/article/details/124571944

版权

本文介绍了如何在Vue中动态设置表格的高度，以适应浏览器窗口的变化。通过监听`mounted`和`onresize`事件，计算表格高度为窗口内高度减去表格顶部偏移量和固定值，确保表格内容始终可见。当高度小于300px时，设置最小高度为300px，保证界面的可读性。

摘要由CSDN通过智能技术生成

1、绑定动态高度 :height="tableHeight"

 <el-table ref="refsTable" v-loading="loading" :data="typeList" @selection-change="handleSelectionChange" @row-click="handleEdit" :height="tableHeight">
    
</el-table>

2、获取当前高度

mounted(){
	    this.$nextTick(() =>{
	      // 根据浏览器高度设置初始高度
	      this.tableHeight= window.innerHeight - this.$refs.refsTable.$el.offsetTop - 170
	      // 监听浏览器高度变化，修改表格高度
	      window.onresize = () =>{
	        this.tableHeight= window.innerHeight - this.$refs.refsTable.$el.offsetTop - 170
	      }
        if(this.heights<300){
          this.tableHeight=300;
        }
	    })
 	 },