解决使用flex布局后页面抖动问题；css样式抖动

方案1

抖动效果：
原因：一般flex布局或者动态的calc计算高度，会导致抖动

原代码：

  <div class="page-view wbg pt">
    <el-space wrap style="background: #fff" class="pl">
      <el-radio-group v-model="tabLabel" @change="changeRadio">
        <el-radio-button value="1">骨干网带宽</el-radio-button>
        <el-radio-button value="2">接入网带宽</el-radio-button>
      </el-radio-group>
    </el-space>
    <div style="height: calc(100% - 35px);">
      <AllTable v-if="tabLabel === '1'"></AllTable>
      <StateTable v-else></StateTable>
    </div>
  </div>

解决方案：给父级设置好固定高度

方案2

el-table的父元素不能是flex：1的元素，需要在外面再加一层元素，并且父元素设置成absolute，祖父元素设置成relative即可

<div class="table-wrap">
  <div class="table-content">
    <el-table :data="tableData">
      ...
    </el-table>
  </div>
</div>



.table-wrap {
  flex: 1;
  position: relative;
 
  /* 解决表格高度不能适应flex，不断增加的问题 */
  .table-content{
    position: absolute;
    width: 100%;
    height: 100%;
  }
}