diff --git a/src/components/listbox/Listbox.d.ts b/src/components/listbox/Listbox.d.ts
index b0e325774..651f41015 100755
--- a/src/components/listbox/Listbox.d.ts
+++ b/src/components/listbox/Listbox.d.ts
@@ -1,4 +1,5 @@
import { VNode } from 'vue';
+import { VirtualScrollerProps } from '../virtualscroller';
interface ListboxProps {
modelValue?: any;
@@ -20,6 +21,7 @@ interface ListboxProps {
filterFields?: string[];
emptyFilterMessage?: string;
emptyMessage?: string;
+ virtualScrollerOptions?: VirtualScrollerProps;
}
declare class Listbox {
diff --git a/src/components/listbox/Listbox.vue b/src/components/listbox/Listbox.vue
index 429c2fc18..35512fba3 100755
--- a/src/components/listbox/Listbox.vue
+++ b/src/components/listbox/Listbox.vue
@@ -8,31 +8,38 @@
-
-
- -
- {{getOptionLabel(option)}}
-
-
-
-
- -
- {{getOptionGroupLabel(optionGroup)}}
+
+
+
+
+ -
+ {{getOptionLabel(option)}}
+
+
+
+
+ -
+ {{getOptionGroupLabel(optionGroup)}}
+
+ -
+ {{getOptionLabel(option)}}
+
+
+
+ -
+ {{emptyFilterMessageText}}
- -
- {{getOptionLabel(option)}}
+
-
+ {{emptyMessageText}}
-
+
-
- {{emptyFilterMessageText}}
-
-
- {{emptyMessageText}}
-
-
+
+
+
+
@@ -43,6 +50,7 @@ import {ObjectUtils} from 'primevue/utils';
import {DomHandler} from 'primevue/utils';
import {FilterService} from 'primevue/api';
import Ripple from 'primevue/ripple';
+import VirtualScroller from 'primevue/virtualscroller';
export default {
name: 'Listbox',
@@ -78,15 +86,26 @@ export default {
emptyMessage: {
type: String,
default: null
+ },
+ virtualScrollerOptions: {
+ type: Object,
+ default: null
}
},
optionTouched: false,
+ virtualScroller: null,
data() {
return {
filterValue: null
};
},
methods: {
+ getVisibleOptions(items) {
+ return items || this.visibleOptions;
+ },
+ getOptionIndex(index, fn) {
+ return this.virtualScrollerDisabled ? index : (fn && fn(index)['index']);
+ },
getOptionLabel(option) {
return this.optionLabel ? ObjectUtils.resolveFieldData(option, this.optionLabel) : option;
},
@@ -268,6 +287,9 @@ export default {
},
onFilterChange(event) {
this.$emit('filter', {originalEvent: event, value: event.target.value});
+ },
+ virtualScrollerRef(el) {
+ this.virtualScroller = el;
}
},
computed: {
@@ -302,10 +324,16 @@ export default {
},
emptyMessageText() {
return this.emptyMessage || this.$primevue.config.locale.emptyMessage;
+ },
+ virtualScrollerDisabled() {
+ return !this.virtualScrollerOptions;
}
},
directives: {
'ripple': Ripple
+ },
+ components: {
+ 'VirtualScroller': VirtualScroller
}
}