element的table组件在flex布局下宽度自适应解决办法

问题描述

在做数据管理系统的时候，使用了flex布局，element的table组件，但是flex布局下element的table组件宽度为页面一加载时的宽度。浏览器窗口变大，table组件跟着变大，但是当浏览器窗口变小的时候table组件的宽度还是原来的宽度，并没有随窗口自适应，（这点我也搞不懂是怎么回事，窗口变大，它能自适应变大，窗口变小，就不能自适应变小了~~~）

先看一下没有跟随窗口变小宽度自适应的效果

tableNoAtuo.gif

这是解决之后的效果

tableAtuo.gif

解决办法

1. 先看一下我的代码结构

//html

    

        
          
          
      
 

//scss
.module-result-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    .result-content {
     flex: 1;
      .el-table{
        width:100% //不起作用
      }
    }
}

下面是解决代码

//scss
.module-result-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    .result-content {
     flex: 1;
     position:relative;
      .el-table{
        position:absolute;
        width:100% //可以不加
      }
    }
}

看懂了吗？只要多加两行代码，我们常用的定位，就可以解决这个问题，这是在一片文章中看到的，原文链接，有兴趣的可以去看看，重点就是嵌套的层级一定要清晰，继承一定要明确。100%到底继承谁的