Vuetify 数据表转置

Question

我目前有一个标准表，其时间在 y 轴上向下移动。该表有很多行，因为数据点很多，但列很少。

我想转置它，以便时间在 x 轴上移动，并且列变成行，但我不知道如何使用

Vuetify Data Table

来做到这一点（如果可能的话）。以下是我正在寻找的表格类型的示例（在 Excel 中）：

这是我的

Vuetify data table

：

<template>
  <v-data-table-virtual
    height="700"
    :items="formattedData"
  ></v-data-table-virtual>
</template>

formattedData

是一个对象数组，其中键指定标头名称，值指定值。

Answer 1

您也许可以使用计算属性来解决它。

<template>
  <v-data-table-virtual
    :items="formattedData"
  ></v-data-table-virtual>
</template>

<script>
  export default {
    data() {
      return {
        values: [
          {
            time: 1709949617000, //sample
          },
          ...
        ],
      }
    },
    computed: {
      formattedData() {
        return this.values.map((item,i) => {
          item.time = this.getTime(item.time); //methods
          return item;
        })
      },
    },
    //calculate unix time
    methods:{
       getTime:(time)=>{
           time = new Date(time * 1000 );
           return time.toLocaleTimeString([], {timeStyle: 'short'});
       }
    }
  }
</script>

参考文献并检查（可确认为HH:ii类型）

数据表-虚拟表

谢谢你。