基于项目类型的 Vuetify 格式单元格 [英] Vuetify format cell based on item type

问题描述

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

I'm not sure if this can be done, but I would like to format some dynamically created columns based on a property. If the item does not have that property, I would like it to fall back to the default behavior.

下面是我正在尝试做的一个例子(虽然语法不正确，因为你不能在模板中做 item.type === foo

Below is an example of what I'm trying to do (though the syntax is incorrect since you can't do item.type === foo in the template

<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>

推荐答案

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

The tricky part here is that your headers are being dynamically generated. So you would have to use the dynamic slot name functionalities. This is not tested code but you could try something like this:

<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>

这篇关于基于项目类型的 Vuetify 格式单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！