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

你可能感兴趣的:(项目问题小记,javascript,css3,html5,vue.js)