elementui v-infinite-scroll无限滚动 下拉刷新

在使用Element UI的<el-table>组件时，可以结合<el-table-column>和v-infinite-scroll指令实现下拉刷新加载更多数据的功能。以下是一个简单的示例：

<template>
  <div>
    <el-table
      :data="tableData"
      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>
    <div
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="isLoading"
      infinite-scroll-distance="10">
      <p v-if="isLoading">加载中...</p>
      <p v-if="noMore">没有更多数据了</p>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [],
      isLoading: false,
      noMore: false,
      currentPage: 1,
    };
  },
  methods: {
    loadMore() {
      this.isLoading = true;
      setTimeout(() => {
        // 模拟异步加载数据
        this.currentPage += 1;
        this.fetchData(this.currentPage).then(data => {
          if (data.length) {
            this.tableData = this.tableData.concat(data);
            this.isLoading = false;
          } else {
            this.noMore = true;
          }
        });
      }, 1000);
    },
    fetchData(page) {
      // 模拟数据请求
      return new Promise((resolve) => {
        setTimeout(() => {
          const moreData = [];
          for (let i = 0; i < 10; i++) {
            moreData.push({
              date: '2016-05-02',
              name: '王小虎',
              address: `上海市普陀区金沙江路${i}号`
            });
          }
          resolve(moreData);
        }, 1000);
      });
    }
  }
};
</script>

在这个示例中，v-infinite-scroll指令绑定了loadMore方法，该方法会在用户滚动到距离页面底部10px时触发。loadMore方法设置一个延迟，模拟异步加载数据，并更新表格数据。如果没有更多数据可加载，它会设置一个标志位来告知用户。