element-component组件封装的element中的el-table组件实现滚动加载

<div class="table-container" @scroll="handleScroll" ref="tableContainer">
 <component-table :data="tableData" class="table-data">
 </component-table>
</div>

data(){
return{
currentPage: 1, // 当前页码
pageSize: 50, // 每页显示的数据条数
allTableData:[],
}
}

mounted(){
 // 滚动加载
 this.loadData();
}
// 加载数据的函数
        loadData() {
            // setTimeout(() => {
              const start = (this.currentPage - 1) * this.pageSize;
              const end = start + this.pageSize;
              let newData = this.allTableData.slice(start,end);
              this.tableData.tableData = [...this.tableData.tableData, ...newData]; // 追加到现有数据中
              
            // this.tableData.tableData.push(newData); // 追加到现有数据中
              this.currentPage++; // 页码递增
            // }, 1000); // 假设每次请求需要1秒
        },
        // 处理滚动事件的函数
        handleScroll(event) {
          const { scrollTop, scrollHeight, clientHeight } = event.target;
          // 检查是否滚动到底部（可根据实际情况调整距离）
          if (scrollTop + clientHeight >= scrollHeight - 200) {
            console.log("90909",this.tableData.tableData.length,this.allTableData.length);
            if(this.tableData.tableData.length <= this.allTableData.length){
                this.loadData(); // 加载更多数据
            }
          }
        },

.table-container {
  height: 400px; /* 根据需要调整 */
  overflow-y: auto; /* 启用垂直滚动 */
}