element-ui中el-table表格自适应

问题描述：在使用flex布局后，折叠导航后，页面窗口变大，el-table会跟着自适应，但是导航打开，页面窗口变小，el-table就不会跟着自适应。

解决方法：在element-ui table标签上加css属性absolute,并在其父级添加relative

html代码结构：

//html
<div class="main">
    <div class="main-content" ref="tableContainer">
        <el-table>
           //表格内容
        </el-table>
 </div>

css代码：

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