vue-virtual-scroller
vue-virtual-scroller copied to clipboard
Composite `keyField`
Clear and concise description of the problem
Currently the scroller components use the attribute defined in the keyField configuration (which defaults to id) as the field to identify the items to display, like this:
<DynamicScroller
id="sample-List"
:items="myItems"
key-field="entity_id"
min-item-size="80"
>
In my use-case the items are semi-dynamic records that are generated in the backend from an EAV like datasource. This means that - in my case - the records don't have a singular primary ID, they have an entity_class and a entity_id. The entity-ID is only guaranteed to be unique within the same entity-class, which means that if only the entity-ID is used as the keyField, multiple records (with different entity-classes) can have the same entity-ID, leading to conflicts in the scroller.
Suggested solution
It would be helpful for my use-case if I could specify this as a compound keyField in the configuration that spans multiple fields:
<DynamicScroller key-field="entity_class,entity_id" ...>
Alternative
For now I just use the entity_id as the ID and hope that I won't get any ID conflicts. I guess that if this quick-fix does not hold up then I will have to generate some kind of meta-ID either in the backend or in the javascript side, which won't be completely trivial because the classes are all auto-generated from openapi and cannot easily be extended with additional getters.
There are other ways around this, but it would be so much simpler if I could just specify a compound keyField in the configuration.
Additional context
No response
Validations
- [x] Read the docs.
- [x] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.