vue-element动态渲染表头(el-table-colum

<div class="info-table-item">
  <el-table v-loading="loading" ref="infoTable" :data="growList" height="100%">
    // 产生滚动条fixed时间固定在最左侧
    <el-table-column label="时间" align="center" prop="time" fixed width="130" />
    <template v-for="(item, index) in tableHead">
      // v-for也可以写在el-table-column标签内，:key一定不要用index,否则会因为前后两次渲染的key值一样产生缓存报错，
      取不到值的现象,从而造成表格渲染错位。
      <!-- 一级表头 -->
      <el-table-column :key="item" :label="item" align="center">
        <!-- 二级表头 -->
        <el-table-column :label="tableQuery.moldName" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row[item].number}}</span>
          </template>
        </el-table-column>
        <el-table-column label="增长率" align="center">
          <template slot-scope="scope">
            <!-- 根据正负切换颜色 -->
            <span :class="scope.row[item].rate >= 0 ? red : green">{{ scope.row[item].rate }}%</span>
          </template>
        </el-table-column>
      </el-table-column>
    </template>
  </el-table>
</div>

//js methods
getListData() {
  this.loading = true;
  this.creatTime();
  quickContrast(this.searchQuery).then(response => {
    let dataList = [];
    this.status = false;
    const res = response.data;
    this.tableHead = Object.assign([], this.nameList);
    this.tableQuery = Object.assign({}, this.searchQuery);
    for (let i = 0; i < this.chartTime.length; i++) {
      dataList.push({ time: this.chartTime[i] });
      for (let j = 0; j < this.tableHead.length; j++) {
        let name = this.tableHead[j];
        dataList[i][name] = { number: 0, rate: '0.00' };
      }
    }
    for (let i = 0; i < res.length; i++) {
      for (let j = 0; j < dataList.length; j++) {
        if (res[i].ty === dataList[j].time) {
          let qty = this.convertUnit(Number(res[i].qty.toFixed(2)));
          let compare = res[i].compare;
          dataList[j][res[i].objName].number = qty;
          dataList[j][res[i].objName].rate = compare;
        }
      }
    }
    this.growList = dataList;
    // 时间固定最左侧重新渲染列表，不然会错位
    this.$nextTick(() => {
      this.$refs.infoTable.doLayout();
    });
    this.loading = false;
  });
},

需求：
1、不同类型的表头来回切换需要动态v-for渲染表头，如（[北京、上海、广州、深圳]，[大众、丰田、日产、本田]，[小型车、紧凑型、中型车、中大型]），表头内容全部由后端传递，每组内容不固定；
2、一级表头下还需要嵌套两个二级表头（如销量、增长率）；
3、增长率正为红色，负为绿色；
4、列表产生横向滚动条时，时间一列固定在最左侧。