Vuetify data table - manually display expandable rows

问题

I have a bunch of dynamic columns in a v-data table which I need to loop through and interrogate in order to display the correct info. It looks a bit like this (taken from the answer here: Vuetify format cell based on item type)

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

Since I need the v-if statement, all other types default to the v-else. However, the v-else is not suitable for when a type is an expandable row. It will display a blank value for that column. So I created a v-else-if template to be able to capture the expandable row column and correctly render it to the screen.

The problem is that I don't know what to put in the template to indicate it's a column with expandable rows (https://vuetifyjs.com/en/components/data-tables/#expandable-rows). In other words it does not render the carat icon that shrinks/expands the subtable, nor does it render the clickable actions. How would I modify the v-else-if template to correctly render its contents?

回答1:

I came up with a workaround using computed properties.

Instead of using

v-for="header in headers"

I changed it to a computed headers which is filtered.

<template v-for="header in headersIWant" v-slot:[`item.${header.value}`]="{ item } ">
  <span style="color: red;">{{ item[header.value] }}</span>
</template>
...
computed: {
 headersIWant() {
  return this.headers.filter(x => x.type === 'foo');
 }
}

来源：https://stackoverflow.com/questions/65706435/vuetify-data-table-manually-display-expandable-rows

标签

Vue.js

vuetify.js