当el-table表格中数据内容过多时,el-menu侧边栏就会收缩,与其他页面的效果不一致,整体就不美观。 这其实是el-table表格在flex布局下出现表格宽度一直增大的问题。
图片展示:
el-mune菜单明显回缩,原因是el-table表格若数据过多,则在flex布局下表格宽度会一直增大。
//页面结构:
<div class="wrapper">
<div class="table_Content">
<el-table :data="tableData">
//.....
<el-table>
<div>
<div>
解决办法:
在table外层包一层div元素,设置css宽度继承自父元素宽度,父元素添加代码:position:absolute,祖父元素设置为:position:relative即可
注意: 如果遇到flex布局中使用 el-table 时高度也出现撑开的问题时,解决思路同上,重点在于表格 el-table 外面父元素不能直接是设置有 flex:1;属性的元素,必须在表格外面在套一层父级元素,并设置绝对定位position:absolute;属性,然后在具有flex:1;属性的元素里设置相对定位属性position:relative;即可。