vue3 表格行转列

需求希望多行展示的字段变成一行展示

const tableData1 = [
    {
        "metricKey": "PROFIT",
        "metricValue": -1.60,
        "metricType": "SINGLE_KEY",
        "metricNotes": null,
        "zhMetricName": "总利润",
        "enMetricName": "Total Profit",
        "childrenKeys": null,
        "periodNo": null,
        "multiplier": 0.0001,
        "decimalsAccuracy": 2,
        "subscript": "万元"
    },
    {
        "metricKey": "DISSATISFY_PENALTY",
        "metricValue": 0.00,
        "metricType": "SINGLE_KEY",
        "metricNotes": null,
        "zhMetricName": "未履约惩罚",
        "enMetricName": "Total Unserved Demand Penalty",
        "childrenKeys": null,
        "periodNo": null,
        "multiplier": 0.0001,
        "decimalsAccuracy": 2,
        "subscript": "万元"
    }
]
//重点操作，注意写法
const columns1 =  [
  {
    title: '指标名称',
    dataIndex: 'zhMetricName',
    key: 'zhMetricName'
  },
  ...tableData1.map(item => ({
    title: item.zhMetricName,
    dataIndex: item.metricKey,
    key: item.metricKey
  }))
]
const dataSource = ref({})
onMounted(() => {
  transformData();
});

function transformData() {
  dataSource.value = {};
  tableData1.forEach(item => {
    dataSource.value[item.metricKey] = item.metricValue;
  })
}

<a-table :columns="columns1" :dataSource="[dataSource]" bordered :pagination="false"></a-table>```