element-ui el-tabs组件中el-table列宽度闪屏问题

问题

element-ui框架,当tabs中有table组件的时候,点击tabs的标签时,table组件存在列宽从小变大的有闪屏现象

问题原因

导致这个问题的原因有两个:

  1. el-table组件的子级容器el-table__header、el-table__body有初始的默认宽度,不是100%而是一个具体的像素宽度,导致无法撑满,
  2. 是因为手动设置列宽导致的:如,因为表格默认有个宽度计算,如果手动设置了某个或某几个列宽,并且也没有全部设置,就会导致el-table重新计算其他列的宽度,重绘表格布局。
解决办法
  1. 在外部样式表中给el-table、el-table__header、el-table__body设置样式width: 100% !important; 强制覆盖默认样式
  2. 列宽要么全部手动设置(建议使用百分比),要么全部不设置。
    (注:如果想只部分设置解决这个问题除非去改el-table的实现,但不建议,这种做法破坏性很大,导致框架可移植性变差)

你可能感兴趣的:(elementui,el-tabs,el-table,闪屏,宽度跳变)