如何用Vuetify Data Table实现表格转置，将时间轴改为X轴？

Vuetify的v-data-table-virtual本身没有原生转置属性，但可以通过转置数据源结构实现需求——把原纵向时间的行数据，转换成以指标为行、时间为列的新结构，配合自定义表头完成渲染。

实现步骤 #

1. 明确原数据结构

假设你的formattedData是类似这样的对象数组（时间作为每行的一个字段，其他为数据指标）：

formattedData = [
  { time: '2024-01-01', temp: 21, humidity: 59 },
  { time: '2024-01-02', temp: 23, humidity: 57 },
  { time: '2024-01-03', temp: 20, humidity: 62 },
  // ...更多时间点数据
]

2. 编写数据转置逻辑

通过计算属性将原数据转置为适合横向展示的结构：

export default {
  data() {
    return {
      formattedData: [] // 你的原始数据
    }
  },
  computed: {
    // 转置后的表格数据：每行对应一个指标，列对应各个时间点的值
    transposedData() {
      if (!this.formattedData.length) return [];
      
      // 提取所有非时间的指标字段
      const metrics = Object.keys(this.formattedData[0]).filter(key => key !== 'time');
      
      // 生成转置后的行
      return metrics.map(metric => {
        const row = { metricName: metric }; // 第一列显示指标名称
        this.formattedData.forEach(item => {
          row[item.time] = item[metric]; // 为每个时间点赋值
        });
        return row;
      });
    },
    // 转置后的表头：第一列是"指标"，后续列是各个时间点
    transposedHeaders() {
      const timeHeaders = this.formattedData.map(item => ({
        text: item.time,
        value: item.time
      }));
      return [{ text: '指标', value: 'metricName' }, ...timeHeaders];
    }
  }
}

3. 修改模板配置

更新v-data-table-virtual的属性，使用转置后的表头和数据：

<template>
  <v-data-table-virtual
    height="700"
    :headers="transposedHeaders"
    :items="transposedData"
  ></v-data-table-virtual>
</template>

关键注意事项 #

• 重复时间处理：如果原数据中存在重复的时间值，需要先对时间去重，避免表头出现重复列
• 性能优化：若时间点数量极大，横向列数过多可能影响虚拟表格的渲染性能，可添加横向滚动容器，或通过筛选限制显示的时间范围
• 自定义格式化：如果需要对数据值做格式化（如保留小数、添加单位），可通过v-slot:body.cell自定义单元格内容：

  <template v-slot:body.cell="{ item, column }">
    <span v-if="column.value === 'metricName'">{{ item[column.value] }}</span>
    <span v-else>{{ item[column.value] }}°C</span> <!-- 示例：给温度加单位 -->
  </template>
  

内容的提问来源于stack exchange，提问作者Wesley Cheek