el-table下拉加载数据

以下是使用vue elementUI table实现下拉加载数据的方法：

<template>
  <el-table
    :data="tableData"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0,0, 0.8)"
    @row-click="handleRowClick"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>

<script>
import elTableInfiniteScroll from 'el-table-infinite-scroll';

export default {
  directives: {
    'el-table-infinite-scroll': elTableInfiniteScroll
  },
  data() {
    return {
      tableData: [],
      loading: false,
      page: 1,
      limit: 10
    };
  },
  mounted() {
    this.getTableData();
  },
  methods: {
    getTableData() {
      this.loading = true;
      // 模拟请求数据
      setTimeout(() => {
        const data = [];
        for (let i = 0; i < this.limit; i++) {
          data.push({
            date: `2021-01-${this.page}${i}`,
            name: `姓名${this.page}${i}`,
            address: `地址${this.page}${i}`
          });
        }
        this.tableData = [...this.tableData, ...data];
        this.loading = false;
        this.page++;
      }, 1000);
    },
    handleRowClick(row) {
      console.log(row);
    }
  }
};
</script>