【VUE】el-table表格 实现滚动到底部加载更多数据

废话不多说，直接上代码

<template></template>部分代码

<!-- 表格 -->
<el-table
  id="mytable"
  v-loading="listLoading"
  highlight-current-row
  row-key="project_id"
  :data="tableData"
  border
  :reload="reload"
  ref="myTable"
  style="width: 100%"
  show-summary
  :summary-method="getSummaries1"
  :span-method="arraySpanMethod"
  height="calc(100vh - 275px)"
  :load-more-disabled="disabledLoad"
>
  <el-table-column
    type="index"
    label="序号"
    :row-style="rowstyles"
    align="center"
    :fixed="true"
    width="50"
  />
  <el-table-column
    label="项目名称"
    prop="project_name"
    :show-overflow-tooltip="true"
    align="left"
    :fixed="true"
    width="400"
  >
    <template slot-scope="{ row }">
      <span>{{ row.project_name }}</span>
    </template>
  </el-table-column>
  <el-table-column
    label="项目进度及百分比"
    prop="progress_percentage"
    align="center"
    width="180"
    :show-overflow-tooltip="true"
  >
    <template slot-scope="{ row }">
      <el-select
        v-if="LockStatus == 0 && row.is_my_project == 1"
        v-model.lazy="row.progress_percentage"
        style="width: 175px"
      >
        <el-option label="招标阶段10%" value="招标阶段10%"></el-option>
        <el-option label="合同签订并开工50%" value="合同签订并开工50%"></el-option>
        <el-option label="转运维100%" value="转运维100%"></el-option>
      </el-select>
      <span v-else>{{ row.progress_percentage }}</span>
    </template>
  </el-table-column>
  <el-table-column
    label="合同签订金额"
    prop="contract_signing_amount"
    align="center"
    width="100"
    :show-overflow-tooltip="true"
  >
    <template slot-scope="{ row }">
      <textarea
        v-if="LockStatus == 0 && row.is_my_project == 1"
        v-model.lazy="row.contract_signing_amount"
        rows="1"
        cols="30"
        style="width: 98px;border: none;resize: none;margin-top: 7px;text-align: center;"
        class="pass_input"
      />
      <span v-else>{{ row.contract_signing_amount }}</span>
    </template>
  </el-table-column>
  <el-table-column
    label="备注"
    prop="info"
    align="center"
    width="100"
    :show-overflow-tooltip="true"
  >
    <template slot-scope="{ row }">
      <textarea
        v-if="LockStatus == 0 && row.is_my_project == 1"
        v-model.lazy="row.info"
        rows="1"
        style="width: 98px;border: none;resize: none;margin-top: 7px;text-align: center;"
        class="pass_input"
      />
      <span v-else>{{ row.info }}</span>
    </template>
  </el-table-column>
  <el-table-column
    fixed="right"
    :label="'操作'"
    align="center"
    width="100"
  >
    <template #default="{ row }">
      <div
        class="table-btn-box"
        v-if="LockStatus == 0 && row.is_my_project == 1"
      >
        <el-button type="primary" @click="submitRow(row)">提交</el-button>
      </div>
    </template>
  </el-table-column>
  <div
    v-if="tableData.length >= 50"
    slot="append"
    style="margin-top: 10px;margin-bottom: 10px;text-align: center;font-size: 15px;">
      {{ content }}
  </div>
</el-table>

其他部分的代码

data() {
  return {
    listLoading: false, // Loading状态
    tableData: [], // 表格展示数据
    allData: [], // 接口返回的所有表格数据
    currentPage: 1, // 第几页
    pageSize: 50, // 每页展示多少条
    reload: 0,
    content: '滚动到底部加载更多'
  }
},
mounted() {
  // 表格添加滚动事件
  this.$refs.myTable.addEventListener('scroll', this.handleScroll)
},
beforeDestroy() {
  // 销毁滚动事件
  this.$refs.myTable.removeEventListener('scroll', this.handleScroll)
},
watch: {
  allData: {
    deep: true,
    immediate: true,
    handler(newValue) {
      const currentPage = this.currentPage || 1
      const total = currentPage * this.pageSize
      this.tableData = newValue.slice(0, total)
    }
  },
  // 强制刷新变量
  reload() {
    this.total = this.allData.length
    this.currentPage = 0
    this.$refs.myTable.scrollTop = 0
    this.fetchData()
    this.loop()
  }
},
methods: {
  // 滚动加载下一页，将下一页数据和之前数据进行累加
  handleScroll(event) {
    const { scrollTop, scrollHeight, clientHeight } = event.target
    if (Math.ceil(scrollTop) + clientHeight >= scrollHeight) {
      // 如果数据已全部加载，则跳出
      if (this.tableData.length == this.total) {
        return
      }
      this.fetchData()
    }
  },
  fetchData() {
    this.currentPage += 1
    const start = (this.currentPage - 1) * this.pageSize
    const end = start + this.pageSize
    const newData = this.allData.slice(start, end)
    this.tableData =
      this.currentPage == 1 ? newData : this.tableData.concat(newData)
  },
  // 如果滚动高度小于可视范围高度，则继续加载下一页，直至可视区域填充满
  loop() {
    this.$nextTick(() => {
      const { scrollHeight, clientHeight } = this.$refs.myTable
      if (scrollHeight && clientHeight && scrollHeight <= clientHeight) {
        if (this.tableData.length == this.total) {
          return         
        }
        this.fetchData()
        this.loop()
      }
    })
  },
},