【JS】element-ui table 动态表头 错位问题

如下代码所示，定义一个 tableKey = Math.random() 轻松解决了，动态列错位的问题。

<el-table v-loading="loading" :data="list" :border="true" @selection-change="selectChange" :key="tableKey">
  <el-table-column type="selection" width="45"></el-table-column>
  <el-table-column prop="rank" label="排名" width="60"></el-table-column>
  <el-table-column prop="username" label="姓名" width="90" :show-overflow-tooltip="true"></el-table-column>
  <el-table-column prop="phone" label="手机" width="110"></el-table-column>
  <el-table-column v-if="departMaxLevel>=1" prop="topDepartName" label="一级部门" width="120" :show-overflow-tooltip="true"></el-table-column>
  <el-table-column v-if="departMaxLevel>=2" prop="secDepartName" label="二级部门" width="120" :show-overflow-tooltip="true"></el-table-column>
  <el-table-column v-if="departMaxLevel>=3" prop="thirdDepartName" label="三级部门" width="120" :show-overflow-tooltip="true"></el-table-column>
  <el-table-column v-if="isCheck==1" prop="status" label="审核操作" width="100" >
    <template slot-scope="scope">
      <span v-if="scope.row.status == 1">
        <el-button size="mini" type="success"  @click="statusPass(scope.row, 2)" icon="el-icon-check" circle title="通过"></el-button>
        <el-button size="mini" type="danger"  @click="statusPass(scope.row, 3)" icon="el-icon-close" circle title="不通过"></el-button>
			</span>
			<span v-else>
  			{{ scope.row.statusname }}
    	</span>
  	</template>
  </el-table-column>
  <el-table-column v-if="isCheck==1" prop="back_remark" label="审核理由" width="150" :show-overflow-tooltip="true"></el-table-column>
  <el-table-column v-if="isCheck==1" prop="statustime" label="审核时间" width="150"></el-table-column>
</el-table>

export default {
  data() {
    return {
      list: [],
      loading: false,
      offset: 0,
      limit: 10,
      limitRange: [10,20,50,100,200,500,1000],
      total: 0,
      currentPage: 1,

      tableKey: Math.random(),
    }
  },
  
  methods: {
    getRankPersonList() {
        this.list = [];
        this.loading = true;
        var self = this;
        xx.ajax({
        op: 'xxxx/xxxxxxxx',
        send: {
          activityId: self.activityId,
          orgid: self.orgid,
          offset: self.offset,
          limit: self.limit,
        },
        callback(data) {
          self.loading = false;
          if (data.status == 1) {
            self.departMaxLevel = data.data.departMaxLevel;
            self.isCheck = data.data.isCheck;
            self.list = data.data.rows;
            self.total = data.data.total;
            self.tableKey = Math.random();
          } else {
            self.list = [];
            self.total = 0;
            self.$message({message: '' + data.msg, type: 'warning'});
          }
        }
      });
    },
  }