<template>
  <div>
    <h2>Virtual Scroll</h2>
    <DataList style="width:600px;height:250px"
        :data="data"
        :total="total"
        :virtualScroll="true"
        :rowHeight="75"
        :pageSize="pageSize"
        selectionMode="single"
        @selectionChange="onSelectionChange($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: 10000,
        pageSize: 20,
        data: [],
        selection: null
      }
    },
    created() {
      this.data = this.getData(this.total);
    },
    methods: {
      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;
      },
      onSelectionChange(event){
        this.selection = event;
      }
    }
  }
</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>