在Vue中创建数据透视表

Question

我想制作一个像this这样的数据透视表，我已经设置了后端，可以根据用户在前面选择的内容来创建查询，问题是我不知道如何转换像这样显示的数据。

这是我将获得的数据的示例。如您所见，有些信息是重复的，例如'emails' in channels and 'Detenido' in status。

我需要的

要在数组中转换数据，其中字段从左到右进行分组以将其显示在html表中。

channel | status       | agency  | total
--------------------------------------
'email' | 'Detenido'   | 'text'| '66'
'email' | 'Detenido'   | 'text'| '15'
'email' | 'Detenido'   | 'text'| '698'
'email' | 'Detenido'   | 'text'| '854'
'email' | 'Detenido'   | 'text'| '432'
'email' | 'Detenido'   | 'text'| '6'
'email' | 'Detenido'   | 'text'| '133'
'sms'   | 'Detenido'   | 'text'| '4'
'sms'   | 'Detenido'   | 'text'| '57'
'sms'   | 'Detenido'   | 'text'| '59'
'sms'   | 'Detenido'   | 'text'| '41'
'sms'   | 'Detenido'   | 'text'| '3'
'ivr'   | 'Detenido'   | 'text'| '106'
'ivr'   | 'Detenido'   | 'text'| '133'
'ivr'   | 'Detenido'   | 'text'| '1109'
'ivr'   | 'Detenido'   | 'text'| '968'
'ivr'   | 'Detenido'   | 'text'| '504'
'ivr'   | 'Detenido'   | 'text'| '281'
'ivr'   | 'Invalido'   | 'text'| '1'
'ivr'   | 'Invalido'   | 'text'| '3'
'bot'   | 'Detenido'   | 'text'| '580'
'human' | 'Programado' | 'text'| '20'

这就是我转换数据的方式。

pivotData() {
      if (this.data.length) {
        return this.data.reduce((rows, row) => {
          this.internal.fields
            .reduce((columns, column) => {
              let temp = columns.find(item => item[column.value] === row[column.value]);
              if (!temp) {
                temp = {
                  [column.value]: row[column.value],
                  data: [],
                };
                columns.push(temp);
              }
              return temp.data;
            }, rows)
            .push(Object.assign({}, ...this.internal.columns
              .map(column => ({ [column.value]: row[column.value] }))));
          return rows;
        }, []);
      }
      return [];
    },

但是它将它转换成这样的树。

[
  {
    "channel": "email",
    "data": [
      {
        "status": "Detenido",
        "data": [
          {
            "agency": "Text",
            "data": [
              {
                "total": 66
              }
            ]
          },
          {
            "agency": "Text",
            "data": [
              {
                "total": 15
              }
            ]
          },
          {
            "agency": "Text",
            "data": [
              {
                "total": 698
              }
            ]
          },
          {
            "agency": "Text",
            "data": [
              {
                "total": 854
              }
            ]
          },
          {
            "agency": "Text",
            "data": [
              {
                "total": 432
              }
            ]
          },
          {
            "agency": "Text",
            "data": [
              {
                "total": 6
              }
            ]
          },
          {
            "agency": "Text",
            "data": [
              {
                "total": 133
              }
            ]
          }
        ]
      }
    ]
  },
  {
    "channel": "sms",
    "data": [
      {
        "status": "Detenido",
        "data": [
          {
            "agency": "Text",
            "data": [
              {
                "total": 4
              }
            ]
          },
          {
            "agency": "Text",
            "data": [
              {
                "total": 57
              }
            ]
          },
          {
            "agency": "Text",
            "data": [
              {
                "total": 59
              }
            ]
          },
          {
            "agency": "Text",
            "data": [
              {
                "total": 41
              }
            ]
          },
          {
            "agency": "Text",
            "data": [
              {
                "total": 3
              }
            ]
          }
        ]
      }
    ]
  },
  {
    "channel": "ivr",
    "data": [
      {
        "status": "Detenido",
        "data": [
          {
            "agency": "Text",
            "data": [
              {
                "total": 106
              }
            ]
          },
          {
            "agency": "Text",
            "data": [
              {
                "total": 133
              }
            ]
          },
          {
            "agency": "Text",
            "data": [
              {
                "total": 1109
              }
            ]
          },
          {
            "agency": "Text",
            "data": [
              {
                "total": 968
              }
            ]
          },
          {
            "agency": "Text",
            "data": [
              {
                "total": 504
              }
            ]
          },
          {
            "agency": "Text",
            "data": [
              {
                "total": 281
              }
            ]
          }
        ]
      },
      {
        "status": "Invalido",
        "data": [
          {
            "agency": "Text",
            "data": [
              {
                "total": 1
              }
            ]
          },
          {
            "agency": "Text",
            "data": [
              {
                "total": 3
              }
            ]
          }
        ]
      }
    ]
  },
  {
    "channel": "bot",
    "data": [
      {
        "status": "Detenido",
        "data": [
          {
            "agency": "Text",
            "data": [
              {
                "total": 580
              }
            ]
          }
        ]
      }
    ]
  },
  {
    "channel": "human",
    "data": [
      {
        "status": "Programado",
        "data": [
          {
            "agency": "Text",
            "data": [
              {
                "total": 20
              }
            ]
          }
        ]
      }
    ]
  }
]

下一张图片是我如何显示它（以肮脏的方式）

如何将其转换为显示简单html表的更好方法？

已编辑

标头来自生成查询的数组：

const fields = [
    {
        label: 'Canal',
        value: 'channel,
    },
    {
        label: 'Estatus',
        value: 'status',
    },
    {
        label: 'Agencias',
        value: 'agency',
    },
]