Vuetify: [Feature Request] dynamic item height support for v-virtual-scroll

[aleksey-hoffman]

Problem to solve

Right now v-virtual-scroll doesn't support items of different / dynamic height, which makes it very limited.
You cannot set different heights for different types of items.

Proposed solution

<v-virtual-scroll>
  <template v-slot="{ item }">   
    <v-virtual-scroll-item
      height="dynamic"
      :min-item-height="32"
      :item-height="itemHeight(item)"
    >
      <custom-header-item
        v-if="item.isHeader"
        :item="item"
      >
        {{item.title}}
      </custom-header-item>

      <custom-item 
        v-if="!item.isHeader"
        :item="item"
      ></custom-item>
    </v-virtual-scroll-item>
  </template>   
</v-virtual-scroll>

methods: {
  itemHeight (item) {
    if (item.type === 'header') { return 32 }
    else if (item.type === 'image') { return 128 }
    else { return 56 }
  }
}

[aleksey-hoffman]

@albertodeago could you please look into this? Would it be difficult to implement this?
I mean, if it receives the height of each item via props, as shown in the example above, couldn't it just add them all up to calculate the container height? And when the height of any item changes, it could just recalculate everything to make sure the container height stays in sync with the items height.

[albertodeago]

I'll look into it 👍

[iranagame]

@albertodeago any deadline for this? since it's very needed!

[albertodeago]

Sorry can't give a deadline, I'd pretty much 0 free time to work on this lately, I try to handle this for august

[saschamander]

+1