Element UI表格组件样式错乱解决

1. 我的场景

        element表格组件被二次封装为A组件，根据业务需求又将A组件二次封装为B组件。此时有一个场景：根据tab栏切换展示不同表格，其中表格仅仅只是表头不一致。所以直接使用B组件，仅传入表头属性值不同。当表头列数不一致时，会出现样式错位现象。

错乱样式

2. 其他可能出现场景

        element表格组件被二次封装为A组件，一个.vue文件多次使用A组件，如果表头列数不一致可能就会出现样式错乱问题。

3. 出现原因

        在二次封装表格组件时，通常会将表格的结构和行为定义在一个组件中，并通过属性和方法来控制其表现。这种封装方式允许开发者复用组件，而不是每次都创建新的实例。这样减少创建和销毁组件的开销，从而提升性能。每次重新渲染都会触发 DOM 更新，这对浏览器的渲染性能提出了较高的要求。

4. 解决方法

4.1 使用唯一key值

        在el-table-column循环创建时，定义唯一key值，最好不使用index，当组件重复使用时，key值重复，此时可以使用`${item.prop}_${index}`来作为key值，prop为列名，保证了唯一性。

这是我的B组件

4.2 使用doLayout方法

element官方解释：对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法。

使用方法：在.vue文件中切换表格显示的地方写上此方法（因为我是页面中调用组件B，组件B调用组件A，所以有3个ref）

我的场景使用