本人在用element开发时，使用table组件，如下图，在每个tab栏下面都有一个table，现遇到的问题是切换tab时各表格的表头会受前一个tab下的表格影响，切换到当前table时表头显示的是上一个table的表头样式

image.png

网上找了一些资料，试了很多方法，最后选择了以下方法，在每个el-table-column添加一个key，解决！

         <el-table :data="totalRevenuetableData"
            style="width: 100%" ref="one">
            <el-table-column prop="collectTime" :key='Math.random()'
              label="时间">
            </el-table-column>
            <el-table-column :key='Math.random()'
              label="昵称"
              prop="accountName">
            </el-table-column>
            <el-table-column prop="totalAmount" :key='Math.random()'
              label="总收益（元）">
            </el-table-column>
            <el-table-column prop="totalPlatformAmount" :key='Math.random()'
              label="平台补贴（元）">
            </el-table-column>
            <el-table-column prop="totalContentAmount" :key='Math.random()'
              label="内容分成（元）">
            </el-table-column>
          </el-table>

另外还有一种情况就是：在切换到另外一个页面（该页面也有table），再切换到当前页面时，会出现table的整体宽度变窄了的情况，在这里的解决办法就是使用table的doLayout方法，代码如下：

    let ref=(name=='totalRevenue'?'one':name=='platformSubsidy'?'tow':name=='contentSharing'?'three':'four')
              setTimeout(()=>{
            this.$nextTick(()=>{
              this.$refs[ref] && this.$refs[ref].doLayout()
            })
          },100