xiug

src/views/transfer/components/visual-table.vue

@@ -2,14 +2,14 @@
 <template>
     <HcTable
         ref="tableRef"
-        heights="250px" :column="tableColumn" :datas="tableData" :loading="tableLoaing"
+        heights="280px" :column="tableColumn" :datas="tableData" :loading="tableLoaing"
         is-new :index-style="{ width: 60 }" is-check :check-style="{ width: 29 }"
         @selection-change="tableSelection"
     />
 </template>
 
 <script setup>
-import { getCurrentInstance, onMounted, ref, watch } from 'vue'
+import { getCurrentInstance, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 const props = defineProps({
     tableData: {
         type: Array,
@@ -57,13 +57,15 @@ watch(() => [
 },
 { immediate: true, deep: true })
 onMounted(()=>{
-    setTimeout(() => {
-      lazyLoading()
-    }, 1500)
+  tableRef.value.tableRef && tableRef.value.tableRef.$refs.bodyWrapper.addEventListener('mousewheel', scrollBehavior)
 })
 
-
+onUnmounted(() => {
+      // 卸载
+      tableRef.value.tableRef && tableRef.value.tableRef.$refs.bodyWrapper.removeEventListener('mousewheel', scrollBehavior)
+    })
 const queryData = ()=>{
+
         // 一条一条加载记录，直至遍历到最后一条
         while (needle.value < allData.value.length ) {
           let pusharr = allData.value.slice(needle.value, needle.value + 10)
@@ -72,15 +74,27 @@ const queryData = ()=>{
           })
           proxy.$forceUpdate()
           needle.value = needle.value + 10
+          
           }
+      
 }
-const lazyLoading = ()=>{
-  const wrapRef = tableRef.value.tableRef.$refs.scrollBarRef.wrapRef
-   if ('onscrollend' in window) {
-    wrapRef.addEventListener('scrollend', queryData)
-
-  } 
 
+const scrollBehavior = async (e)=>{
+      // 滚动方向判定
+      const scrollDirection = e.deltaY > 0 ? 'down' : 'up'
+      if (scrollDirection === 'down') {
+        // 获取提供实际滚动的容器
+        const dom = tableRef.value.tableRef.$refs.bodyWrapper.getElementsByClassName('el-scrollbar__wrap')[0]
+        
+        const { clientHeight, scrollTop, scrollHeight } = dom
+        // 父容器高度 + 子容器距离父容器顶端的高度 = 子容器可滚动的高度
+        if (clientHeight + scrollTop === scrollHeight) {
+          console.log('竖向滚动条已经滚动到底部')
+          queryData()
+      
+         
+        }
+      }
 }
 </script>