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

<!--  -->
<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>