123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103 |
- <!-- -->
- <template>
- <HcTable
- ref="tableRef"
- :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, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
- const props = defineProps({
- tableData: {
- type: Array,
- default: () => ([]),
- },
- })
- //事件
- const emit = defineEmits(['getTableKeys'])
- const { proxy } = getCurrentInstance()
- 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 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 > 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
- }
-
- }
- }
- }
- </script>
- <style lang='scss' scoped>
- </style>
|