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

  
    // 产生滚动条fixed时间固定在最左侧
    
    
  


//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、列表产生横向滚动条时，时间一列固定在最左侧。