博客

问题描述

使用flex布局，使用

flex: 1

后

el-table

只能自适应扩大，不能自适应缩小

问题原因


el-table

组件的宽度是动态计算的，源码中resize事件绑定在

this.$el

上，flex容器下的width:100%会一直向上继承，直到flex容器下第一级子元素，但是当某个子元素的宽度出现固定值并且大于flex伸展的宽度的时候，那么容器就不会收缩，也就触发不了resize事件了。

解决方法1

在右侧区域，即

flex：1；区域

添加

overflow-x：hidden

即可解决。（给表格的父元素加）

<div class="flex-wrapper">
  <div class="left-box">左侧信息</div>
  <div class="right-box">
    <el-table>...</el-table>
  </div>
</div>

.flex-wrapper {
    display: flex;
    justify-content: space-between;
    .left-box {
    	flex-shrink: 0;
    	margin-right: 16px;
    }
    .right-box {
      flex: 1;
      overflow-x: hidden;
    }
}

解决方法2

flex属性的容器设置相对定位

el-table外多包裹一层div，包裹的容器设置绝对定位及宽度，继承父级宽度

注意：这样会影响下面的元素

<div class="flex-wrapper">
  <div class="left-box">左侧信息</div>
  <div class="right-box">
    <div class="table-inner">
      <el-table>...</el-table>
     </div>
  </div>
</div>

.flex-wrapper {
    display: flex;
    justify-content: space-between;
    .left-box {
    	flex-shrink: 0;
    	margin-right: 16px;
    }
    .right-box {
      flex: 1;
      position: relative; 
      
      .table-inner{
        position: absolute; 
        width: 100%; 
      }
    }
}