如何动态改变v-data-table的header？

Question

我正在尝试制作一个 v-data-table，其中填充了 json 数据（Vue + Vuetify + Vue-Resource）。我可以毫无问题地显示数据，但我需要更改 header 的第一列以显示用户实际查看的数据。目前我使用的是静态 header，但没有我想要的标签：

headers: [
    {
      text: "",
      align: "left",
      sortable: false,
      value: "name",
      id: "primeiraColunaColuna"
    },

    { text: "total QTD", value: "total QTD" },
    { text: "total", value: "Total" },
    { text: "Date", value: "Date" },
    { text: "Time", value: "Time" }
  ],

我想将文本字段更改为 A、B、C、D 等。有办法做到这一点吗？

Answer 1

您可以 return headers 来自将文本作为参数的方法，例如您可以在循环中使用当前索引：

<v-layout>
  <v-flex v-for="i in 3" xs4>
    <v-data-table
    :headers="getHeaders(i)"
    :items="desserts"
    class="elevation-1"
    >
      <template v-slot:items="props">
        <td>{{ props.item.name }}</td>
        <td class="text-xs-right">{{ props.item.calories }}</td>
        <td class="text-xs-right">{{ props.item.fat }}</td>

      </template>
    </v-data-table>
  </v-flex>
</v-layout>

methods:{
  getHeaders(headingText){
    return [
    {
      text: 'Dynamic heading no. ' +headingText,
      align: 'left',
      sortable: false,
      value: 'name'
    },
    { text: 'Calories', value: 'calories' },
    { text: 'Fat (g)', value: 'fat' }
  ];
}

}

实例：https://codepen.io/sf-steve/pen/pYgOze

如何动态改变v-data-table的header？

How to dynamically change the header of a v-data-table?

datatable

vue.js

vue-resource

vuejs2

vuetify.js