element-ui el-tabs组件中el-table的宽度问题

Question

当tabs中有table组件的时候,点击tabs的分类第一次会有闪屏现象
好像table组建的宽度从小变大一样

Answer 1

大家有没有遇到这个问题啊

Answer 2

使用v-if控制el-tab-pane里的内容是可以的，亲测有效
例如v-if="activeName === 'second'"
例子详见
https://jsfiddle.net/athena03...

Answer 3

问题原因

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

1. el-table组件的子级容器el-table__header、el-table__body有初始的默认宽度，不是100%而是一个具体的像素宽度，导致无法撑满，
2. 是因为手动设置列宽导致的：如<el-table-column label="操作" width="120">，因为表格默认有个宽度计算，如果手动设置了某个或某几个列宽，并且也没有全部设置，就会导致el-table重新计算其他列的宽度，重绘表格布局。

解决办法

1. 在外部样式表中给el-table、el-table__header、el-table__body设置样式width: 100% !important; 强制覆盖默认样式
2. 列宽要么全部手动设置（建议使用百分比），要么全部不设置。
   （注：如果想只部分设置解决这个问题除非去改el-table的实现，但不建议，这种做法破坏性很大，导致框架可移植性变差）