<div class="info-table-item">
  <el-table v-loading="loading" ref="infoTable" :data="growList" height="100%">
    // 產(chǎn)生滾動(dòng)條fixed時(shí)間固定在最左側(cè)
    <el-table-column label="時(shí)間" align="center" prop="time" fixed width="130" />
    <template v-for="(item, index) in tableHead">
      // v-for也可以寫在el-table-column標(biāo)簽內(nèi)，:key一定不要用index,否則會(huì)因?yàn)榍昂髢纱武秩镜膋ey值一樣產(chǎn)生緩存報(bào)錯(cuò)，
      取不到值的現(xiàn)象,從而造成表格渲染錯(cuò)位。
      <!-- 一級(jí)表頭 -->
      <el-table-column :key="item" :label="item" align="center">
        <!-- 二級(jí)表頭 -->
        <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="增長(zhǎng)率" align="center">
          <template slot-scope="scope">
            <!-- 根據(jù)正負(fù)切換顏色 -->
            <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;
    // 時(shí)間固定最左側(cè)重新渲染列表，不然會(huì)錯(cuò)位
    this.$nextTick(() => {
      this.$refs.infoTable.doLayout();
    });
    this.loading = false;
  });
},

需求：
1、不同類型的表頭來(lái)回切換需要?jiǎng)討B(tài)v-for渲染表頭，如（[北京、上海、廣州、深圳]，[大眾、豐田、日產(chǎn)、本田]，[小型車、緊湊型、中型車、中大型]），表頭內(nèi)容全部由后端傳遞，每組內(nèi)容不固定；
2、一級(jí)表頭下還需要嵌套兩個(gè)二級(jí)表頭（如銷量、增長(zhǎng)率）；
3、增長(zhǎng)率正為紅色，負(fù)為綠色；
4、列表產(chǎn)生橫向滾動(dòng)條時(shí)，時(shí)間一列固定在最左側(cè)。