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.

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>

回答1:

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>

回答2:

hope the following example can help you:

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

and the header array should look like this:

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

来源：https://stackoverflow.com/questions/65705012/vuetify-format-cell-based-on-item-type