element ui中table动态列切换时，表格样式变形或错乱

现象：

多个tab下切换显示不用的表格数据，且表头是动态渲染的，当操作栏浮动时， 表格显示的位置不对

代码示例：

<template>

	<el-table

  :data="data"

  :key="toggleIndex"

  :row-class-name="rowClassName"

  :cell-class-name="cellClassName"

  :header-cell-style="{'text-align': 'center'}"

  @row-click="rowClick"

  border

  class="common-table-app"

  ref="table">

  <el-table-column

  	v-for="(column, index) in columnList" :key="index"

  	:label="column.label"

  	:prop="column.prop"

  	:align="column.align"

  	:width="column.width"

  	:min-width="column.minWidth"

  	:sortable="column.sortable">

  	<el-table-column

    v-if="column.children && column.children.length > 0"

    v-for="(columnChildren, indexChildren) in column.children" :key="`children-${index}-${indexChildren}`"

    :label="columnChildren.label"

    :prop="columnChildren.prop"

    :align="columnChildren.align"

    :width="columnChildren.width"

    :min-width="columnChildren.minWidth">

  	</el-table-column>

  </el-table-column>

	</el-table>

</template>

解决办法：

1.给每个el-table-column设置不同的key，一般利用循环里的index，也可以:key="Math.random()"

2.解决表格闪烁问题 

this.$nextTick(() => {

this.$refs.table.doLayout(); // 解决表格错位

});