// 获取需要绑定的table this . dom = this . $refs . table . bodyWrapper this . dom . addEventListener ( 'scroll' , ( ) => { // 表格滚动条滚动的距离 let scrollTop = this . dom . scrollTop // 变量windowHeight是可视区的⾼度 // let windowHeight = this.dom.clientHeight // 变量scrollHeight是滚动条的总⾼度 let scrollHeight = this . dom . scrollHeight let clientHeight = this . dom . clientHeight let scrollBottom = scrollHeight - scrollTop - clientHeight if ( scrollBottom < 1 ) { // 这里就是滚动条滚动到底部的时候 // 获取到的不是全部数据当滚动到底部继续获取新的数据 // 这里记住我们要把表格渲染的数据和获取到的全部数据分开, 等滑动到底部时我们在取10或者20条添加到渲染数据上 if ( this . workforceTemDataAll . length <= this . workforceTemDataCurrect . length ) return // 因为我们默认都是渲染20条数据,如果总数据没那么多就直接return出去 this . loading = true // 开启loading效果防止渲染速度慢用户乱点,导致页面崩溃 if ( this . workforceTemDataCurrect . length + 10 > this . workforceTemDataAll . length ) { // 如果workforceTemDataAll和workforceTemDataCurrect选差没有十条那么就全部渲染上去 this . dom . scrollTop = this . dom . scrollTop - 30 // 30 50 都行 this . workforceTemDataCurrect . push ( ... this . workforceTemDataAll ) } else { this . dom . scrollTop = this . dom . scrollTop - 30 let id = this . workforceTemDataCurrect . length // 这里取10条,渲染上去 拿多少数据循环多少次就行 for ( let index = id - 1 ; index <= id + 9 ; index ++ ) { // 没有用forEach 因为场景不同这里用 forEach 效率会低 this . workforceTemDataCurrect . push ( this . workforceTemDataAll [ index ] ) setTimeout ( ( ) => { this . loading = false } , 500 )

注意在子组件中调用时要使用$nextTick函数

.my- table .el- table __fixed-body-wrapper { overflow: auto; max-height: 200px; /* 根据实际情况设置 */ 其中，`.my- table ` 是你在第一步中添加的 `class`，`max-height` 是设置 滚动 条区域的最大高度。如果你的表格高度不确定，可以使用 `max-height: calc(100vh - Xpx);`，其中 `X` 为除表格外其他元素高度之和。 如果你的表格存在固定列，请同时添加第二个样式。 如果你的表格存在 分页 ，请注意将 滚动 条样式应用于 分页 后的表格。 如果你的表格存在合并行或列，请注意计算表格高度时将合并单元格展开。 以上操作应该能够解决你的问题。如果还有疑问，请随时问我。 时雨乍停: 用v-model双向绑定之后，@size-change和@current-change不用加，所以handleSizeChange和handleCurrentChange以及pagChange都可以删除。 父组件接收@update:page和@update:size传来的page和size值在父组件里更新表格数据就行。 可以看element-plus文档里写的，我认为size-change和current-change事件是跟着:current-page和:page-size一起出现的。