美文网首页
解决ElementUI的table组件在flex布局下宽度不能自

解决ElementUI的table组件在flex布局下宽度不能自

作者: 易冷zzz | 来源:发表于2020-08-25 16:42 被阅读0次

    问题描述:
    如下图:在左侧菜单栏折叠/展开的时候右侧设置flex:1;自适应布局的区域由于table表格宽度已经渲染,会出现横向滚动条不能自适应。


    image.png image.png

    解决方案:给table外面嵌套一层div.page-right-wrapper,并设置绝对定位,给.page-right设置flex:1同时并设置相对定位

    <div class="container">
        <div class="page-left">
        </div>
        <div class="page-center">
        </div>
        <div class="page-right">
            <div class="page-right-wrapper">
                  <el-table :data="appTableData">           
                  <el-table-column prop="appName" label="应用名称" min-width="150"></el-table-column>
                  <el-table-column prop="version" label="应用版本" min-width="150"></el-table-column>
                                                    
            </el-table>
            </div>
        </div>
    </div>
    
    
    .container{
      display: flex;
    }
    .page-left{
        width: 200px;
    }
    .page-center{
        width: 150px;
    }
    .page-right{
        flex: 1;
        position: relative;
    }
    .page-right-wrapper{
        position: absolution;
        width: 100%;
    }
    

    相关文章

      网友评论

          本文标题:解决ElementUI的table组件在flex布局下宽度不能自

          本文链接:https://www.haomeiwen.com/subject/zkszjktx.html