我正在尝试制作一个填充有 json 数据的 v-data-table (Vue + Vuetify + Vue-Resource)。我可以毫无问题地显示数据,但我需要更改标题的第一列以显示用户实际查看的数据。 此时我正在使用没有我想要的标签的静态 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 等。 有什么办法可以做到这一点?
最佳答案
您可以从将文本作为参数的方法返回 header ,例如,您可以在循环中使用当前索引:
<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' }
];
}
关于vue.js - 如何动态更改 v-data-table 的表头?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54944886/