element ui 表格el-table宽度不能自适应

问题描述

用了flex布局，左侧固定宽度，右侧flex：1；（表格在右侧区域），且中间容器都有width：100%，当将屏幕变大，表格随着变宽，当屏幕变小时，表格不会随着屏幕变小，宽度无法自适应。

（一） 解决方法1

在右侧区域，即flex：1；区域overflow：hidden即可解决。（给表格的父元素加）

.body {
    display: flex;
    width: 100%;
    height: 100%;
    //左侧
    .left-menu {
      width: 150px;
      height: 100%;
    }
    //右侧（含有表格）
    .content {
      flex: 1;
      height: 100%;
      padding: 16px 24px;
      overflow: hidden;
    }
  }

（二） 解决方法2（参考别人，亲测好用）

由于element 内部的table宽度计算是根据父级元素来的。当时flex布局时，嵌套的子元素有一个是固定宽度且大于外层父级元素的伸缩宽度时，那么素有的嵌套元素都不会继续缩放了。
因此，通过给目标元素添加绝对定位，让其从原来的flex布局下的嵌套关系中脱离出来，在根据需要给他添加一个相对定位的父元素，将其布局在需要的位置。

.item-body {
	display: flex;
	height: 100%; // 此高度必须，否则table-father的高度为0，border无效
	.table-father {
	  flex: 1;
	  border-right: 1px solid #eee;
	  position: relative; // table的直接父元素加position属性
	  .el-table { // table 加position属性
	    position: absolute;
	  }
	}
}

参考1：https://www.cnblogs.com/codebook/p/14340592.html

参考2：https://juejin.cn/post/6884498721690943501