<template>
	<div>
    <h2>Virtual Scroll</h2>
		<Panel>
			<VirtualScroll style="height:250px"
					:data="data" 
					:total="total" 
					:pageSize="pageSize" 
					:rowHeight="rowHeight" 
					@update="items=$event">
				<div v-for="item in items" :key="item.id" class="item f-row">
					<div class="num">{{item.id}}</div>
					<div>
						<div class="name">{{item.name}}</div>
						<div class="desp">{{item.desp}}</div>
					</div>
				</div>
			</VirtualScroll>
		</Panel>
	</div>
</template>

<script>
	export default {
		data() {
			return {
        total: 10000,
        pageSize: 10,
        data: [],
        rowHeight: 60,
        items: []
      }
		},
		created() {
      for(let i=0; i<this.total; i++){
        this.data.push({
          id: i,
          name: 'name'+i,
          addr: 'address'+i,
          desp: 'description'+i
        });
      }
    }
	}
</script>
<style>
		.item {
			height: 60px;
			border-bottom: 1px solid #ddd;
			padding: 10px 0;
		}
		.item .num{
			width: 40px;
			height: 40px;
			background: #b8eecf;
			border-radius: 20px;
			text-align: center;
			line-height: 40px;
			margin: 0 10px;
		}
		.item .name{
			font-size: 16px;
			font-weight: bold;
			line-height: 22px;
		}
		.item .desp{
			color: #666;
			line-height: 18px;
		}
</style>