源代码
<template>
<div>
<h2>Virtual Scroll</h2>
<p>The virtual scroll can be used to display large amounts of records without paging.</p>
<DataGrid style="height:250px"
:virtualScroll="true"
:loading="loading"
:data="data"
:total="total"
:pageSize="pageSize">
<GridColumn field="inv" title="Inv No"></GridColumn>
<GridColumn field="name" title="Name"></GridColumn>
<GridColumn field="amount" title="Amount" align="right"></GridColumn>
<GridColumn field="price" title="Price" align="right"></GridColumn>
<GridColumn field="cost" title="Cost" align="right"></GridColumn>
<GridColumn field="note" title="Note"></GridColumn>
</DataGrid>
</div>
</template>
<script>
export default {
data() {
return {
total: 1000,
pageSize: 20,
data: [],
loading: false
};
},
created() {
this.loadData(this.total);
},
methods: {
loadData(total) {
this.loading = true;
setTimeout(() => {
this.data = this.getData(total);
this.loading = false;
},300)
},
getData(total) {
let data = [];
for(let i=1; i<=total; i++){
let amount = Math.floor(Math.random()*1000);
let price = Math.floor(Math.random()*1000);
data.push({
inv: 'Inv No '+i,
name: 'Name '+i,
amount: amount,
price: price,
cost: amount*price,
note: 'Note '+i
});
}
return data;
}
}
};
</script>