flex布局碰到iview的table组件后出现的诡异动效

问题描述

在使用flex布局编写页面的时候，布局如下

//html部分
<div class="administrative">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right">
      <Table :columns="column" :data="tableData"></Table>
    </div>
  </div>
//css部分
<style scoped lang="scss">
.administrative {
  display: flex;
  width: 100%;
  height: 100%;
  &>div{
    height: 100%;
    flex: 1
  }
  .left {
    background-color: red;
  }
  .center {
    background-color: #2A7C7A;
  }
  .right {
    background-color: olive;
  }
}
</style>

// js部分
data() {
    return {
        column: [
            { title: "姓名", key: "name", align: "center" },
            { title: "登录名", key: "loginName", align: "center" },
            { title: "部门", key: "department", align: "center" },
        ],
        tableData: [],
    }
  }

效果如下

20221011_173348

此种情况产生的原因是因为：table这个东西，自动拉伸变宽或者变窄的时候，当祖先的flex没有具体的宽度值的时候就会有缓慢变化的诡异情况
解决办法：给table的容器设置宽度
width: 0;
flex-grow: 1;