Web Demo Mobile Demo Angular Demo Vue Demo React Demo
源代码
<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>