<template>
    <virtual-scroll-table
      :columns="columns"
      :data="list"
      key-field="id"
      :item-size="45"
      :maxHeight="2 * 45"
      @loadMore="loadMore"
    />
</template>
<script>
export default {
  data() {
    return {
      page: 2,
      list: Array(2 * 10)
        .fill('')
        .map((_, index) => ({id: index, name: 'name' + index, gmtCreate: Date.now().toString()})),
      columns: [
        { title: 'ID', key: 'id', width: '80px' },
        { title: '邮箱', key: 'name' },
        { title: '创建时间', key: 'gmtCreate' },
        { title: '操作', key: 'handle',
          customRender: (val, row, column, index) => {
            return (<div>
              <a type="danger" onClick={() => this.delHandle(row)}>删除</a>
            </div>)
          }
        }
      ]
    };
  },
  methods: {
    loadMore() {
      this.list = [...this.list, ...Array(10).fill('').map((_, index) => ({id: this.page * 10 + index, name: 'name' + (this.page * 10 + index), gmtCreate: Date.now().toString()}))]
      this.page += 1
    }
  }