element plus 滑动到底部翻页

<template>
   <div class="app-container">
     <el-form
       :model="queryParams"
       ref="queryRef"
       :inline="true"
       label-width="68px"
     >
       <el-form-item>
         <!-- <el-button
           type="warning"
           plain
           icon="Download"
           @click="handleExport"
           v-hasPermi="['monitor:logininfor:export']"
           >导出</el-button
         > -->
       </el-form-item>
     </el-form>
 
     <div ref="tableWrapper" style="height: 80vh; overflow: auto;" @scroll="handleTableScroll">

     <el-table v-loading="loading" :data="tableList">
       <el-table-column label="序号" align="center" fixed>
         <template #default="scope">
           {{
             scope.$index + (queryParams.pageNum - 1) * queryParams.pageSize + 1
           }}
         </template>
       </el-table-column>
       <el-table-column
         label="测点key"
         align="center"
         prop="pointKey"
         :show-overflow-tooltip="true"
       />
       <el-table-column
         label="测点名称"
         align="center"
         prop="pointName"
         :show-overflow-tooltip="true"
       />
       <el-table-column
         label="测点参数值"
         align="center"
         prop="pointValue"
         :show-overflow-tooltip="true"
       />
       <el-table-column
         label="越线"
         align="center"
         prop="warnTypeStr"
         :show-overflow-tooltip="true"
       />
       <el-table-column
         label="报警时间"
         align="center"
         prop="ctime"
         :show-overflow-tooltip="true"
       />
     </el-table>
      </div>

     <!-- <pagination
       v-show="total > 0"
       :total="total"
       v-model:page="queryParams.pageNum"
       v-model:limit="queryParams.pageSize"
       @pagination="getList"
     /> -->
   </div>
 </template>
 
 <script setup name="realtime">
 import { listRealtimeAlarm } from "@/api/alarm/realtime";
 
 
 const tableList = ref([]);
 const loading = ref(true);
 const total = ref(0);
 const isThrottled = ref(false);
  const scrollPosition = ref(1000); // 滚动条位置

 // 查询参数
const queryParams = ref({
  pageNum: 1,
  pageSize: 200,
});

 function getList() {
   loading.value = true;
   listRealtimeAlarm(queryParams.value).then((response) => {
     tableList.value = response.data;
     total.value = response.total;
     loading.value = false;
   });
 }

 function handleTableScroll(event) {
   if (isThrottled.value) return;

   const target = event.target;
   const scrollHeight = target.scrollHeight; // 元素内容的总高度
   const scrollTop = target.scrollTop; // 滚动条顶部与元素顶部的距离
   const clientHeight = target.clientHeight; // 可见区域的高度

   // 判断是否滚动到底部
   if (scrollHeight - scrollTop - clientHeight <= 1) {
      isThrottled.value = true; // 设置节流状态

      // 保存滚动条位置
      scrollPosition.value = scrollTop-50;

      setTimeout(() => {
         queryParams.value.pageNum ++
         listRealtimeAlarm(queryParams.value).then(response => {
          tableList.value.push(...response.rows);

            // 在下一个更新周期中设置滚动条位置
            // 这样可以确保数据已经渲染完毕
            nextTick(() => {
              target.scrollTop = scrollPosition.value;
            });
         });

         isThrottled.value = false; // 重置节流状态
      }, 300);
   }
}

 getList();
 </script>