随便记一下el-table奇怪宽度问题

背景

接入子应用的页面，忽然宽度就1900，其他页面没设置什么，却都在1300左右

原因

el-table太长，某些封装问题，影响到了
之前某次看到el-table 无限期增长，反正删掉table就ok

解决

方法1

解决方案：
在table外层包一层div元素，设置css宽度继承自父级宽度，添加代码：position:absolute; width:100%;一般上级元素就设置这flex布局flex:1;加入一行代码：position:relative;

示例截图：

注意： 如果遇到flex布局中使用 el-table 时高度也出现撑开的问题时，解决思路同上，重点在于表格 el-table 外面父元素不能直接是设置有 flex:1;属性的元素，必须在表格外面在套一层父级元素，并设置绝对定位position:absolute;属性，然后在具有flex:1;属性的元素里设置相对定位属性position:relative;即可。
————————————————
原文链接：https://blog.csdn.net/DLGDark/article/details/107785197

问题就是需要额外设置高度

方法2

不用额外设置宽度
container
header
table-fa
table
footer
最外层

.container {
   display: flex;
  flex-direction: column;
  padding: 20px;
  min-height: 86vh;
}

table这里

.table-fa{
    flex: 1;
    padding-top: 20px;
    box-sizing: border-box;
    position: relative;
}
  /deep/ .el-table {
    position: absolute;
    top: 20px;
    right: 0;
    bottom: 0;
  }

table额外设置个height =‘100%’

这个必须设置100%！ 不然table的高度是固定的，多的只能溢出，可以尝试看看push tabledata[0]强制几次
footer这里随便了

.footer {
padding-top: 30px;
position:relative;
width:100%;
}

还有个参考网站 是 https://blog.csdn.net/fujiayang126/article/details/104797164