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

废话不多说,直接上代码

<template></template>部分代码

html 复制代码
<!-- 表格 -->
<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>

其他部分的代码

javascript 复制代码
data() {
  return {
    listLoading: false, // Loading状态
    tableData: [], // 表格展示数据
    allData: [], // 接口返回的所有表格数据
    currentPage: 1, // 第几页
    pageSize: 50, // 每页展示多少条
    reload: 0,
  }
},
mounted() {
  // 表格添加滚动事件
  this.$refs.myTable.bodyWrapper.addEventListener('scroll', this.handleScroll)
},
beforeDestroy() {
  // 销毁滚动事件
  this.$refs.myTable.bodyWrapper.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.bodyWrapper.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.bodyWrapper
      if (scrollHeight && clientHeight && scrollHeight <= clientHeight) {
        if (this.tableData.length == this.total) {
          return         
        }
        this.fetchData()
        this.loop()
      }
    })
  },
},
相关推荐
你的人类朋友40 分钟前
什么是API签名?
前端·后端·安全
会豪3 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子3 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶3 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子3 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_3 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
Gracemark3 小时前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
小徐_23333 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin3 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js
遂心_4 小时前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js