实现效果:

表格区域：

 <!-- 表格区域  :loading="loading"-->
        <el-table
          height="calc(100% - 60px)"
          :data="transData"
          border
          :header-cell-style="{
            'text-align': 'center',
            background: '#F5F6FA',
            color: '#646E92',
          }"
          style="
            width: 96%;
            margin-top: 30px;
            margin-left: 25px;
            color: #666e92;
            font-size: 14px;
          "
          :cell-style="{ 'text-align': 'center' }"
        >
          <el-table-column
            v-for="(item, index) in transTitle"
            :label="item"
            :key="index"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row[index] }}
            </template>
          </el-table-column>
        </el-table>

data 属性定义：

      // originData 为表头展示数据 保证数组里每一个对象中的字段顺序, 从上到下 一次对应显示表格中的从左到右
     originTitle: ['月份', '名称', '站点', '月总销售额', '亚马逊物流赔偿金额', '买家支付的运费', '邮费积分', '买家支付礼品卡金额', '退款中的亚马逊物流交易费返款'
        , '退款中的平台费返款', '退货后的促销返款', '销售退款总额', '退款中的运费', '促销折扣额/促销回报', '退款管理费', '退款中的积分费用', '广告费用'
        , '尾程配送费', '平台佣金扣点', '秒杀费用', 'Coupon费用', '店租', 'FBA库存仓储费', '其他', 'VAT消费税'
        , '汇率', '推广费', '商品成本', '商品头程', '利润（人民币）', '利润率', '店铺压货成本', '下单商品成本'],
      transTitle: [], // transTitle 该标题为转化后的标题, 注意多一列,  因为原来的标题变成了竖着显示了, 所以多一列标题, 第一个为空即可
      transData: [] //表格数据

js 获取后台数据 转化成展示数据

 // 查询数据
  query() {
      this.transData = []
      this.transTitle = []
      //条件筛选 XXX
      // 接口获取数据
      this.axios
        .get("/api/XXXXlist", {
          // , sku: this.$data.formInline.sku, type: this.$data.formInline.type
          params: { ...o }
        })
        .then(this.putdata, err => {
          console.log("err", err);
        });
    },
    //数据转化方法
    putdata(resp) {
      console.log(resp.data, 'resp.data')
      this.$data.tableData =
        resp.data.data && resp.data.data
          ? resp.data.data : [];

      // 数组按矩阵思路, 变成转置矩阵
      if (this.$data.tableData.length > 0) {
        let matrixData = this.$data.tableData.map((row) => {
          let arr = []
          for (let key in row) {
          // 按表头的顺序 一个一个加入进去 我的表格展示有顺序要求 不能改变位置 所以取到数据一一对应
          // 如果没有顺序要求 或者后端返回的数据没问题 直接push 不需要判断  arr.push(row[key])
            if (key == 'belongMonthly') {
              arr[0] = moment(row[key]).format("YYYY-MM")
            } else if (key == 'shopName') {
              arr[1] = row[key]
            } else if (key == 'site') {
              arr[2] = row[key]
            } else if (key == 'yzxse') {
              arr[3] = row[key]
            } else if (key == 'ymxwlpcje') {
              arr[4] = row[key]
            } else if (key == 'mjzfyf') {
              arr[5] = row[key]
            } 

          }
          return arr
        })
        console.log(matrixData)
        // 加入标题拼接最终的数据
        if (matrixData.length > 0) {
          this.transData = matrixData[0].map((col, i) => {
            return [
              this.originTitle[i],
              ...matrixData.map(row => {
                return row[i];  //因为数据多出一行，需要从索引1开始
              })
            ];
          });
         // 横向展示序号 
          this.transTitle = matrixData.map((col, i) => {
            return [i + 1];
          }); 
          this.transTitle.unshift('')
        }

        console.log(this.transData)
      }
    },

借鉴文章：学生题型demo链接