Web Demo Mobile Demo Angular Demo Vue Demo React Demo
源代码
<template>
  <div>
		<h2>Virtual Scroll - Lazy Load</h2>
		<DataList style="width:600px;height:250px"
				:data="data"
				:total="total"
				:virtualScroll="true"
				:rowHeight="75"
				:lazy="true"
				:loading="loading"
				:pageNumber="pageNumber"
				:pageSize="pageSize"
				idField="inv"
				selectionMode="single"
        @selectionChange="selection=$event"
				@pageChange="onPageChange($event)">
			<template slot-scope="scope">
				<div class="product">
					<div class="num">{{scope.rowIndex+1}}</div>
					<div class="detail">
						<p>{{scope.row.inv}} - {{scope.row.name}}</p>
						<p>Amount: {{scope.row.amount}}</p>
						<p>Price: {{scope.row.price}}</p>
					</div>
				</div>
			</template>
		</DataList>
    <p v-if="selection">You selected: {{selection.name}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      total: 0,
      pageNumber: 1,
      pageSize: 20,
      data: [],
      loading: false,
      selection: null
    };
  },
  created() {
    this.loadPage(this.pageNumber, this.pageSize);
  },
  methods: {
    onPageChange(event) {
      this.loadPage(event.pageNumber, event.pageSize);
    },
    loadPage(pageNumber, pageSize) {
      this.loading = true;
      setTimeout(() => {
        let result = this.getData(pageNumber, pageSize);
        this.total = result.total;
        this.pageNumber = result.pageNumber;
        this.data = result.rows;
        this.loading = false;
      }, 200);
    },
    getData(pageNumber, pageSize) {
      let total = 100000;
      let data = [];
      let start = (pageNumber - 1) * pageSize;
      for (let i = start + 1; i <= start + pageSize; 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 {
        total: total,
        pageNumber: pageNumber,
        pageSize: pageSize,
        rows: data
      };
    }
  }
};
</script>
<style>
.product {
  display: flex;
  align-items: center;
  padding: 5px 0;
  height: 75px;
  border-bottom: 1px solid #eee;
}
.product .num {
  width: 40px;
  height: 40px;
  background: #b8eecf;
  border-radius: 20px;
  text-align: center;
  line-height: 40px;
  margin: 0 10px;
}
.product img {
  height: 100px;
  padding: 10px;
}
.product p {
  margin: 0;
  padding: 2px 0;
}
</style>