在上级要求列表不需要分页的情况下，有两种解决方案

1、懒加载分页：

好处：分页是数据性能问题很好的解决办法。

缺点：相比虚拟dom，此用户体验不会特别好，因为到底部时需要等待接口返回下一页的数据，而虚拟dom则不用。

2、虚拟dom：

好处：支持一次性大数据量的列表渲染，且在加载和滚动时页面不会卡顿，也不需要多次调用分页。

缺点：前后端代码都需要做处理，后端返回大数据量时接口可能会超时。

 当前使用第一种方案：

安装 el-table-infinite-scroll

npm install --save el-table-infinite-scroll

注册自定义指令  src/directive/index.js

import elTableInfiniteScroll from 'el-table-infinite-scroll';

export default function directive(app) {
	app.directive('elTableInfiniteScroll', elTableInfiniteScroll);
}

main.js 调用

import { createApp } from 'vue';
import App from '@/App.vue';
// 自定义指令
import directive from './directive/index.js';

// 创建app
const app = createApp(App);
// 传入app调用directive方法
directive(app);

app.mount('#app');

业务组件中使用

<el-table v-el-table-infinite-scroll="handleTableScroll" :data="tableData" height="600">
	<el-table-column prop="id" label="xxxx" />
</el-table>

<script>

const tableData = [{id: 1}]

function handleTableScroll() {
	console.log('滚动分页')
}

</script>

// 距离底部多少则触发加载
:infinite-scroll-distance="50"

// 首次加载是否禁用
:infinite-scroll-disabled="true"

详见官方文档

el-table-infinite-scroll官方文档