element ui 表格el-table宽度不能自适应
问题描述用了flex布局,左侧固定宽度,右侧flex:1;表格在右侧区域,将屏幕变大,表格随着变宽,当屏幕变小时,表格不会随着屏幕变小,宽度无法自适应解决在右侧区域,及flex:1;区域overflow:hidden即可解决。.body {display: flex;width: 100%;height: 100%;//左侧.left-menu {width: 150px;height: 100%
·
问题描述
用了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
更多推荐
已为社区贡献10条内容
所有评论(0)