Elment UI 隐藏 tab 里表格宽度错乱的解决
在 el-tabs 的非激活面板里渲染 el-table,切换过去后列宽错位、操作列跑偏。
原因
表格在 display:none 的容器里渲染,获取不到真实宽度。
解决
- 给每个
el-tab-pane加lazy,首次激活才渲染。 - 表格加 ref,在 tab 切换回调里
$nextTick调doLayout()。
同样的处理也适用于 el-dialog 内表格与窗口缩放场景。
在 el-tabs 的非激活面板里渲染 el-table,切换过去后列宽错位、操作列跑偏。
表格在 display:none 的容器里渲染,获取不到真实宽度。
el-tab-pane 加 lazy,首次激活才渲染。$nextTick 调 doLayout()。同样的处理也适用于 el-dialog 内表格与窗口缩放场景。