element ui table 表格高度自适应

学习过程中将笔记整理跟大家分享，希望对大家也有所帮助，共同成长进步💪~\
如果大家喜欢，可以点赞或留言💕 ~~，谢谢大家⭐️⭐️⭐️~

第一种方法动态设置表格高度

1.动态绑定table的高度值

:height

    <el-table :data="tableData" id="table" :height='tableH'></el-table>

        

          
        
        
        

          

          AI 代码解读
        
      
      

2.获取浏览器高度并监听浏览器resize变化

getTableHeight函数里根据元素做了一些计算处理，获取浏览器高度并计算得到表格所用高度。

data: function () {
    return {
        tableH："",
    }
}
mounted () {
    this.getTableHeight();
    window.addEventListener('resize',this.getTableHeight,false)
},
methods:{
    getTableHeight() {
        let rect = document.getElementById('table').getBoundingClientRect();
        let h = window.innerHeight;
        let FooterHeight = 48;
        var tableHeight = h - rect.top - FooterHeight;
        this.tableH = tableHeight;
    },
}

        

          
        
        
        

          

          AI 代码解读
        
      
      

第二种方法动态设置表格高度

1.动态绑定table的高度值

:height

    <el-table :data="tableData" id="table" :height='tableH'></el-table>

        

          
        
        
        

          

          AI 代码解读
        
      
      

2.获取浏览器高度并监听浏览器resize变化

data: function () {
    return {
        tableH: `${window.innerHeight}` - 118,
    }
},
mounted: function () {
    // 表格高度
    window.addEventListener('resize', () => {
        this.tableH = `${window.innerHeight}` - `${document.getElementById('table').getBoundingClientRect().top}` - 48;
    })
}

        

          
        
        
        

          

          AI 代码解读
        
      
      

注：
通过window.innerHeight获取窗口的高度，
再获取表格上方的高度document.getElementById('table').getBoundingClientRect().top，
有兴趣的大家可以去打印document.getElementById('table').getBoundingClientRect() 看看哦，
具体实际情况需根据自己页面定然去设置高度

感谢大家阅读⭐️⭐️⭐️，如果喜欢，可以点赞或留言哟💕💕💕