源代码
<template>
<div>
<h2>Virtual Scroll - Lazy Load</h2>
<p>The Virtual Scroll allows the ComboBox to display millions of items.</p>
<ComboBox valueField="id" textField="name"
:virtualScroll="true"
:lazy="true"
:data="data"
:total="total"
:pageNumber="pageNumber"
:pageSize="pageSize"
:rowHeight="rowHeight"
@filterChange="onFilterChange($event)">
</ComboBox>
</div>
</template>
<script>
export default {
data() {
return {
data: [],
total: 0,
pageNumber: 1,
pageSize: 20,
rowHeight: 30,
dataSource: []
};
},
created() {
for (let i = 1; i <= 10000; i++) {
this.dataSource.push({
id: "Id" + i,
name: "Item" + i
});
}
},
methods: {
onFilterChange(event) {
setTimeout(() => {
let result = this.getData(
event.filterValue,
event.pageNumber,
event.pageSize
);
this.total = result.total;
this.pageNumber = result.pageNumber;
this.data = result.rows;
},100);
},
getData(term, pageNumber, pageSize) {
term = (term || "").trim();
let data = this.dataSource.filter(
row => row.name.toLowerCase().indexOf(term.toLowerCase()) != -1
);
let start = (pageNumber - 1) * pageSize;
let rows = data.slice(start, start + pageSize);
return {
total: data.length,
pageNumber: pageNumber,
pageSize: pageSize,
rows: rows
};
}
}
};
</script>