基于项目类型的 Vuetify 格式单元格答案

【问题标题】：Vuetify format cell based on item type基于项目类型的 Vuetify 格式单元格
【发布时间】：2021-04-18 15:32:49
【问题描述】：

我不确定这是否可以做到，但我想根据属性格式化一些动态创建的列。如果该项目没有该属性，我希望它回退到默认行为。

下面是我正在尝试做的一个示例（尽管语法不正确，因为您不能在模板中执行 item.type === foo

<v-data-table :item="items" ... >
 <template #[`item.type === 'foo'`]="{ item } ">
   // Do a special format for any items that have a type of foo
 </template>
</v-data-table>

【问题讨论】：

你想格式化一个完整的行还是一个单元格？
如果该行有 item.type，我想格式化整列
这是在特定列中吗？
我不确定我是否理解您的问题。这些列是动态生成的，因此我无法通过名称显式引用它们
您在表上使用了headers 属性来引用您的列，对吗？你是说这个headers prop是动态生成的？

标签： vue.js vuetify.js

【解决方案1】：

这里的棘手部分是您的标题是动态生成的。因此，您必须使用动态插槽名称功能。这不是经过测试的代码，但您可以尝试以下方法：

<v-data-table :item="items" ... >
 <template v-for="header in headers" v-slot:[`item.${header.value}`]="{ item } ">
   <template v-if="item.type === 'foo'">
     <span style="color: red;">{{ item[header.value] }}</span>
   </template>
   <template v-else>
     {{ item[header.value] }}
   </template>
 </template>
</v-data-table>

【讨论】：

是的，虽然我使用的是 header.type 而不是 item.type，但这非常有效。谢谢！！
我有一个后续问题：stackoverflow.com/questions/65706435/…

【解决方案2】：

希望下面的例子可以帮助到你：

<v-data-table :headers="headers" :item="items" ... >
    <template v-slot:item.type="{ item }">
        <div v-show="item.type == 'foo'">
        </div>
    </template>
</v-data-table>

头数组应该是这样的：

data() {
    return {
        headers: [
        ...
        {
            text: '',
            sortable: false,
            value: 'type',
        },
        ...
        ]
    }
 }

【讨论】：