You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
-`items` is the list of items you want to display in the scroller. There can be several types of item.
111
-
-`renderers` is a map of component definitions objects or names for each item type. If you don't define `renderers`, the scroller will use *scoped slots* ([see below](#scoped-slots)).
112
111
-`itemHeight` is the display height of the items in pixels used to calculate the scroll height and position.
112
+
-`renderers` is a map of component definitions objects or names for each item type ([more details](#renderers)). If you don't define `renderers`, the scroller will use *scoped slots* ([see below](#scoped-slots)).
113
113
114
-
The `renderers` map is an object containing a component definition for each possible value of the item type. **The component definition must have an `item` prop, that will get the item object to render in the scroller.**
114
+
You need to set the size of the virtual-scroller element and the items elements (for example, with CSS). All items should have the same height to prevent display glitches.
115
115
116
-
Also, you need to set the size of the virtual-scroller element and the items elements (for example, with CSS). All items should have the same height to prevent display glitches.
116
+
> The browsers have a height limitation on DOM elements, it means that currently the virtual scroller can't display more than ~500k items depending on the browser.
117
+
118
+
## Renderers
119
+
120
+
The optional `renderers` prop is an object containing a component definition for each possible value of the item type. If you don't set this prop, [scoped slots](#scoped-slots) will be used instead. **The component definition must have an `item` prop, that will get the item object to render in the scroller.**
117
121
118
122
There are additional props you can use:
119
123
120
124
-`typeField` to customize which field is used on the items to get their type and use the corresponding definition in the `renderers` map. The default is `'type'`.
121
125
-`keyField` to customize which field is used on the items to set their `key` special attribute (see [the documation](https://vuejs.org/v2/api/#key)). The default is `'id'`.
126
+
127
+
## Scoped slots
128
+
129
+
Alternatively, you can use [scoped slots](https://vuejs.org/v2/guide/components.html#Scoped-Slots) instead of `renderers`. This is active when you don't define the `renderers` prop on the virtual scroller.
130
+
131
+
The scope will contain the row's item in the `item` attribute, so you can write `scope="props"` and then use `props.item`.
These are optional props you can use to change the DOM tags used in the virtual scroller:
156
+
122
157
-`mainTag` to change the DOM tag of the component root element. The default is `'div'`.
123
158
-`containerTag` to change the DOM tag of the element simulating the height. The default is `'div'`.
124
159
-`contentTag` to change the DOM tag of the element containing the items. The default is `'div'`. For example, you can change this to `'table'`.
@@ -147,34 +182,6 @@ If you set `contentTag` to `'table'`, the actual result in the DOM will look lik
147
182
</div>
148
183
```
149
184
150
-
> The browsers have a height limitation on DOM elements, it means that currently the virtual scroller can't display more than ~500k items depending on the browser.
151
-
152
-
## Scoped slots
153
-
154
-
Alternatively, you can use [scoped slots](https://vuejs.org/v2/guide/components.html#Scoped-Slots) instead of `renderers`. This is active when you don't define the `renderers` prop on the virtual scroller.
155
-
156
-
The scope will contain the row's item in the `item` attribute, so you can write `scope="props"` and then use `props.item`.
0 commit comments