虚拟列表实现 element UI 表格内的无限滚动

业务场景：项目基于element UI 15.6版本在 el-table 表格中，一个有着700条的数据，加载时间很慢，不能使用分页，实现滚动时按动态加载数据；

需求分析：结合 el-table 表格 和 InfiniteScroll 无限滚动组件，初始化表格加载可见区域内的数据，通过监听虚拟列表滚动的位置，动态改变请求翻页参数，从而达到动态加载的效果。

功能实现：

<template>
    <el-input v-model="searchParam.id" clearable :title="searchParam.id" />
    <el-input v-model="searchParam.name" clearable :title="searchParam.name" />
    <el-table :data="taskData" v-loading="taskLoading" v-el-table-infinite-scroll="toLoadMore" 
              infinite-scroll-disabled="scrollDisabled" infinite-scroll-immediate="false">
            <el-table-column label="id" prop="ID" show-overflow-tooltip />
            <el-table-column label="name" prop="Name" show-overflow-tooltip />
            <el-table-column label="sex" prop="Sex" show-overflow-tooltip />
            <el-table-column label="age" prop="Age" show-overflow-tooltip />
    </el-table>
</template>

<script>
    import elTableInfiniteScroll from 'el-table-infinite-scroll';
    export default {
      directives: {
        'el-table-infinite-scroll': elTableInfiniteScroll
      },
      data() {
        return {
          taskData: [],
          taskLoading: false,
          scrollDisabled: false,
          searchParam: {
            page_size: 10,
            page_no: 1
          },
        }
      },
      created() {
        this.toGetList();
      },
      methods: {
         toGetList() {
              this.searchParam.page_no = 1; // 初始化 搜索条件 页码
              const param = {};
              Object.keys(this.searchParam).forEach((item) => {
                if (this.searchParam[item] || this.searchParam[item] === 0) {
                  param[item] = this.searchParam[item];
                }
              });
              this.scrollDisabled = true;
              this.taskData = []; // 搜索前清空滚动加载获取的数据，避免内容重复
              this.loadList(param);
        },
        toLoadMore() {
          // 监听表格滚动事件
          this.searchParam.page_no++;
          const param = {};
          Object.keys(this.searchParam).forEach((item) => {
            if (this.searchParam[item] || this.searchParam[item] === 0) {
              param[item] = this.searchParam[item];
            }
          });
          this.loadList(param);
        },
        loadList(param) {
          this.taskLoading = true;
          getList(param).then((res) => {
            this.taskLoading = false;
            // 没数据的时候，禁用 infinite-scroll-disabled 滚动事件
            if (res.length === 0) return (this.scrollDisabled = true);
            this.scrollDisabled = false;
            this.taskData.push(...res); // 分页请求的数据，追加到任务列表中
          });
        },
      }
    }
</script>