v-data-table 헤더를 동적으로 변경하는 방법

v-data-table 헤더를 동적으로 변경하는 방법

json 데이터(Vue + Vuetify + Vue-Resource)로 채워진 v-data 테이블을 만들려고 한다.데이터를 문제없이 보여줄 수 있지만 사용자가 실제로 보고 있는 데이터가 보이도록 헤더 첫 번째 컬럼을 바꿔야 한다.현재 나는 내가 원하는 라벨이 없는 정적 헤더를 사용하고 있다.

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 등으로 변경하고 싶다.이 일을 성사시킬 방법이 있을까?

텍스트를 매개 변수로 사용하는 방법에서 헤더를 반환할 수 있으며, 예를 들어 현재 인덱스를 루프로 사용할 수 있다.

<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

참조URL: https://stackoverflow.com/questions/54944886/how-to-dynamically-change-the-header-of-a-v-data-table