element 解决table高度自适应

心已赠人 2023-10-05 18:54 24阅读 0赞

#### 表格高度自适应 ####

常见使用场景：table 区域需要表格撑满并且当表格内容超出时在table区域显示滚动条

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5WGllRGFpTWE_size_16_color_FFFFFF_t_70][]

#### 解决方式1：纯css解决 使用flex布局结合table 组件的height=“100%” ####

黄色区域对应布局如下：注意： 表格组件内容tableContainer 需要设置height: 0

.content{
      height: 100%;
      width: 100%;
      display: flex;
      padding: 10px;
      flex-direction: column;
    }
    .form{
      height: 60px
    }
    .tableContainer{
      flex: 2;
      height: 0;
      padding: 0 20px;
    }

#### 解决方式二： 使用原生jq动态计算表格高度 ####

监听窗口改变事件， 计算值并绑定给table组件

new Vue({
        data:function(){
            return{
                tableHeight:null,
    　　　　　　  tableData:[]
    　　　　　}
        },
        mounted () {
            // 当窗口大小改变时
            window.onresize = function() { this.tableHeight = `计算后的表格高度` }
        } 
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5WGllRGFpTWE_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210201101149483.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5WGllRGFpTWE=,size_16,color_FFFFFF,t_70