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

<!--  -->
<template>
    <HcTable
        ref="tableRef"
        :column="tableColumn" :datas="tableData" :loading="tableLoaing"
        is-new :index-style="{ width: 60 }" :is-check="isCheck" :check-style="{ width: 29 }"
        @selection-change="tableSelection"
    />
</template>

<script setup>
import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
const props = defineProps({
    tableData: {
        type: Array,
        default: () => ([]),
    },
    isCheck:{
      type:Boolean,
      default:true,
    },
})
//事件
const emit = defineEmits(['getTableKeys'])
const isCheck = ref(props.isCheck)
const allData = ref(props.tableData)
const needle = ref(10)//数据指针 默认19
const tableData = ref([])
const tableLoaing = ref(false)
//多选
const tableKeys = ref([])
const tableSelection = (rows) => {
    tableKeys.value = rows
    emit('getTableKeys', rows)
}
const tableSelectAll = (val)=>{
  if (val) {
    // tableData.value.forEach((ele1)=>{
    //     nextTick(()=>{
    //       tableRef.value.toggleRowSelection( ele1, true )
    //     })
    //   })

    tableKeys.value = allData.value 
    emit('getTableKeys', allData.value )
  } else {
    tableRef.value.clearSelection()
    tableKeys.value = []
    emit('getTableKeys', tableKeys.value )
  }
  
  
}
//表头
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,
    props.isCheck,
], ([Data, Check]) => {
    allData.value = Data
    isCheck.value = Check
    tableData.value = []
        //判断数据长度有没有9个，有就先添加9个，没有直接获取所有数据
        if (allData.value.length > 9) {
          for (let i = 0;i < needle.value ;i++) {
            tableData.value[i] = allData.value[i]
          }
        } else {
          tableData.value = allData.value
        }
      
},
{ immediate: true, deep: true })
onMounted(()=>{
  tableRef.value && tableRef.value.tableRef && tableRef.value.tableRef.$refs.bodyWrapper.addEventListener('mousewheel', scrollBehavior)
})

onUnmounted(() => {
      // 卸载
      tableRef.value && tableRef.value.tableRef && tableRef.value.tableRef.$refs.bodyWrapper.removeEventListener('mousewheel', scrollBehavior)
    })
const queryData = async ()=>{
    console.log('查询数据')
        let ortab = tableData.value
        if (needle.value < allData.value.length) {
           let pusharr = allData.value.slice(needle.value, needle.value + 10)
            pusharr.forEach((ele)=>{
                ortab.push(ele)
          })
          needle.value = needle.value + 10
          return ortab
        }
      
}

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('竖向滚动条已经滚动到底部')
          const res = await queryData()
          if (res) {
            tableData.value = res
          }
         
        }
      }
}
// 暴露出去
defineExpose({
  tableSelectAll,
})
</script>

<style lang='scss' scoped>
</style>