如何动态更改 v-data-table 的标题？

Posted 2023-02-22

【中文标题】如何动态更改 v-data-table 的标题？

【英文标题】：How to dynamically change the header of a v-data-table?

【发布时间】：2019-07-23 12:02:06

【问题描述】：

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

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 等。 有什么办法可以做到这一点？

【参考方案1】：

您可以从将文本作为参数的方法返回标题，例如，您可以在循环中使用当前索引：

<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

【讨论】：

我认为这不会解决我的问题。因为没有输入，我应该使用类似数组的东西：["A","B","C"]

我确定v-data-table 可以使用计算属性。请解释你的其他问题，我不明白你的意思it should be like an array

这是一个工作示例：codepen.io/sf-steve/pen/pYgOze 在文本框中输入一些内容以查看其工作情况

我只有一个运行 7 次的 v-data-table，每个字母 1 个（A、B、C 等）。我需要 v-data-table 能够像运行 v-for (header[i]) 一样获取标题。

数据是静态的，表头是动态的。没有用户输入。