vue表格滚动懒加载

直接上代码，粘贴即用。

		<el-table
          :data="tableData"
          class="tableList"
          border
          style="width: 100%"
          height="900"
        >
        </el-table>

  data() {
    return {
      tableData: [],
      Page: 1,//根据数据数量截取默认30条
      pageSize: 30,//进入页面默认截取数量
      allData:[],
    };
  },

  mounted() {
    this.handleScroll();
  },

methods: {
    //监听滚动条的是否滚动到元素底部，当滚动条滚动到元素底部时，进行数据加载事件的触发。
    //获取滚动元素的dom，进行滚动监听。
    handleScroll() {
      let that = this;
      const dom = document.getElementsByClassName("tableList")[0].children[2];
      dom.addEventListener("scroll", function () {
        const scrollDistance =
          dom.scrollHeight - dom.scrollTop - dom.clientHeight;
        if (scrollDistance <= 0) {
          that.initPage();
        }
      });
    },
    //每次page数+1，就进行数组的截取。table列表展示data的数据。
    initPage() {
      this.Page = this.Page + 1;
      this.tableData = this.allData.slice(0, this.Page * this.pageSize);
    },
    // 获取数据
    getData() {
        this.loading = true;
        getDetailreport({需要传递的参数}).then((res) => {
            if (res.code === 0) {
              this.loading = false;
              this.allData = res.data;
              this.tableData = this.allData.slice(0, this.pageSize);
            }
          })
          .catch((err) => {
            this.loading = false;
          });
    },
   }