滚动加载表格

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

@@ -32,11 +32,12 @@
                             <!-- <span class="text-gray">（238卷）</span> -->
                         </template>
                         <div :style="`height: ${item1.list !== null ? '300px' : 'auto'};`">
-                            <HcTable
+                            <!-- <HcTable
                                 ref="tableRef" :column="tableColumn" :datas="item1.list" :loading="tableLoading"
                                 is-new :index-style="{ width: 60 }" is-check :check-style="{ width: 29 }"
                                 @selection-change="tableSelection"
-                            />
+                            /> -->
+                            <visualTable :table-data="item1.list " />
                         </div>
                     </HcCardItem>
                 </template>
@@ -67,6 +68,7 @@ import { nextTick, onMounted, ref, watch } from 'vue'
 import { getArrValue, getObjValue } from 'js-fast-way'
 import { rowsToId } from '~uti/tools'
 import initialgApi from '~api/initial/initial'
+import visualTable from './visual-table.vue'
 //参数
 const props = defineProps({
     projectId: {

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

@@ -0,0 +1,114 @@
+<!--  -->
+<template>
+    <!-- <el-table
+        ref="myTable"
+        v-loading="loading"
+        :data="tableData"
+        height="250"
+        border
+        element-loading-background="rgba(0, 0, 0, 0.8)"
+        class="table-left color-table"
+    >
+        <el-table-column label="序号" type="index" align="center" width="56" />
+        <el-table-column
+            prop="fileNumber"
+            label="档号"
+            align="center"
+        />
+        <el-table-column
+            prop="name"
+            label="案卷题名"
+            align="center"
+        />
+        <el-table-column
+            prop="pageN"
+            label="总页数"
+            align="center"
+        />
+        <el-table-column
+            prop="storageTimeValue"
+            label="保管期限"
+            align="center"
+        />
+        <el-table-column
+            prop="remark"
+            label="备注"
+            align="center"
+        />
+    </el-table> -->
+    <HcTable
+        ref="tableRef"
+        heights="250px" :column="tableColumn" :datas="tableData" :loading="tableLoaing"
+        is-new :index-style="{ width: 60 }" is-check :check-style="{ width: 29 }"
+    />
+</template>
+
+<script setup>
+import { getCurrentInstance, nextTick, onMounted, ref, watch } from 'vue'
+const props = defineProps({
+    tableData: {
+        type: Array,
+        default: () => ([]),
+    },
+})
+const { proxy } = getCurrentInstance()
+
+const allData = ref(props.tableData)
+const needle = ref(10)//数据指针 默认19
+const tableData = ref([])
+const tableLoaing = ref(false)
+//表头
+const tableRef = ref(null)
+const tableColumn = ref([
+    { key:'fileNumber', name: '档号', width: 180 },
+    { key:'name', name: '案卷题名' },
+    { key:'pageN', name: '总页数', width: 120 },
+    { key:'storageTimeValue', name: '保管期限', width: 120 },
+    { key:'remark', name: '备注' },
+])
+//监听
+watch(() => [
+    props.tableData,
+], ([Data]) => {
+    allData.value = Data
+    tableData.value = []
+        //判断数据长度有没有9个，有就先添加9个，没有直接获取所有数据
+        if (allData.value.length > 5) {
+          for (let i = 0;i < needle.value + 1;i++) {
+            tableData.value[i] = allData.value[i]
+          }
+        } else {
+          tableData.value = allData.value
+        }
+      
+},
+{ immediate: true, deep: true })
+onMounted(()=>{
+    setTimeout(() => {
+      lazyLoading()
+    }, 1500)
+})
+
+
+const queryData = ()=>{
+        // 一条一条加载记录，直至遍历到最后一条
+        while (needle.value < allData.value.length ) {
+          tableLoaing.value = true
+            tableData.value[needle.value] = allData.value[needle.value]
+            tableLoaing.value = false
+            proxy.$forceUpdate()
+            needle.value++
+          }
+}
+const lazyLoading = ()=>{
+  const wrapRef = tableRef.value.tableRef.$refs.scrollBarRef.wrapRef
+   if ('onscrollend' in window) {
+    console.log(5555555)
+    wrapRef.addEventListener('scrollend', queryData)
+  } 
+
+}
+</script>
+
+<style lang='scss' scoped>
+</style>