运用element UI框架，实现触底加载

<template>  
  <div ref="tableContainer" class="table-container" @scroll="handleScroll">  
    <el-table  
      :data="tableData"  
      style="width: 100%"  
      @row-click="handleRowClick">  
      <el-table-column prop="date" label="日期" width="180"></el-table-column>  
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>  
    </el-table>  
    <div v-if="isLoading" class="loading">加载中...</div>  
    <div v-if="!hasMore" class="loading">已到底</div>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      tableData: [],  
      pageSize: 20,   
      currentPage: 1,  
      isLoading: false,  
      hasMore: true, 
    };  
  },  
  created() {  
    this.fetchData();  
  },  
  methods: {  
    fetchData() {  
      if (this.isLoading || !this.hasMore) return;  
      this.isLoading = true;  
      // 模拟API请求  
      setTimeout(() => {  
        const newData = Array.from({ length: this.pageSize }, (_, index) => ({  
          date: `2023-04-${(this.currentPage - 1) * this.pageSize + index + 1}`,  
          name: `用户${(this.currentPage - 1) * this.pageSize + index + 1}`,  
        }));  
        this.tableData=this.tableData.concat(newData)
        this.currentPage++;  
        this.isLoading = false;  
  
        // 假设有更多数据的逻辑  
  if (this.tableData.length >= 100) {  
    this.hasMore = false;  
  }  
  // 使用 Vue.nextTick 来确保 DOM 更新完成  
  this.$nextTick(() => {  
    // 获取滚动容器  
    const container = this.$refs.tableContainer;  
  
    // 检查容器是否存在且可滚动  
    if (container && container.scrollHeight > container.clientHeight) {  
      container.scrollTop = container.scrollTop - 900;  
  
      // 如果滚动位置已经接近顶部，则不再向上滚动  
      if (container.scrollTop < 50) {  
        container.scrollTop = 0;  
      }  
    }  
  });  
}, 1000);
    },  
    handleScroll(event) {  
      const { scrollTop, scrollHeight, clientHeight } = event.target;  
      // 触底条件  
      if (scrollTop + clientHeight >= scrollHeight-10 ) {  
        this.fetchData();  
      }  
    },  
    handleRowClick(row, column, event) {  
      // 行点击事件处理  
      console.log(row);  
    },  
  },  
};  
</script>  
  
<style>  
.table-container { 
  margin: 0 auto;
width: 400px; 
  height: 400px; /* 设置容器高度以触发滚动 */  
  overflow: auto; /* 允许Y轴滚动 */  
}  
.loading {  
  padding: 20px;  
}  
</style>