体检报告查询虚拟化表格

src/components/report/PatientRegisterListNobtn.vue

@@ -1,12 +1,12 @@
 <template>
   <div>
     <div @contextmenu.prevent="onContextmenu">
-      <el-table :data="patientRegister.prList" border ref="info" id="info"
+      <u-table :data="patientRegister.prList" border ref="info" id="info"
         :height="(window.pageHeight < 600) ? 230 : (window.pageHeight - 370)" highlight-current-row
-        @row-click="rowClick" size="small" @selection-change="handleSelectionChange" @row-contextmenu="rowContextmenu">
-        <el-table-column :type="dragCol[0].type" width="40" align="center" />
+        @row-click="rowClick" size="small" row-key="patientRegisterId" @selection-change="handleSelectionChange" @row-contextmenu="rowContextmenu" @table-body-scroll="scrollFull" use-virtual :row-height="25" big-data-checkbox :data-changes-scroll-top="false">
+        <u-table-column :type="dragCol[0].type" width="40" align="center" />
         <!--列可拖拽 key值很关键  -->
-        <el-table-column v-for="(item, index) in dragCol" v-if="index != 0" :key="`${item.label + index}`"
+        <u-table-column v-for="(item, index) in dragCol" v-if="index != 0" :key="`${item.label + index}`"
           :type="dragCol[index].type" :min-width="dragCol[index].minWidth" :align="dragCol[index].align"
           :label="dragCol[index].type ? '' : item.label" :prop="dragCol[index].prop"
           :sortable="dragCol[index].type || dragCol[index].prop == 'sn' ? false : true"
@@ -43,9 +43,9 @@
             </div>
           </template>
 
-        </el-table-column>
+        </u-table-column>
 
-      </el-table>
+      </u-table>
       <div style="display: flex;justify-content:space-between;">
         <div></div>
         <div>
@@ -67,12 +67,14 @@ import { dddw, deepCopy, objCopy, arrayReduce, arrayExistObj, setPrStatusColor }
 import PatientRegisterEdit from "../../components/patientRegister/PatientRegisterEdit.vue";
 import Camera from "../../components/patientRegister/Camera.vue";
 import PatientRegisterAsbItem from "../../components/patientRegister/patientRegisterAsbItem.vue";
-
+import { UTable, UTableColumn } from "umy-ui";
 export default {
   components: {
     PatientRegisterEdit,
     Camera,
     PatientRegisterAsbItem,
+    UTable,
+    UTableColumn,
   },
   props: ['fromType'],
   data() {
@@ -185,7 +187,7 @@ export default {
   //挂载完成
   mounted() {
     this.$nextTick(() => {
-      this.scrollFull()
+      // this.scrollFull()
 
       // 监听列拖拽
       this.initColDrag()
@@ -312,25 +314,36 @@ export default {
 
 
     //滚动加载数据 
-    scrollFull() {
-      this.dom = this.$refs['info'].bodyWrapper
-      console.log('this.dom', this.dom)
-
-      this.dom.addEventListener('scroll', async () => {
-        // console.log('scrollTop',this.dom.scrollTop,'clientHeight',this.dom.clientHeight,'scrollHeight',this.dom.scrollHeight);
-        if (this.dom.scrollTop + this.dom.clientHeight + 20 > this.dom.scrollHeight && !this.lazyLoading) {
-          // 获取到的不是全部数据 当滚动到底部 
-          console.log('scrollTop', this.dom.scrollTop, 'clientHeight', this.dom.clientHeight, 'scrollHeight', this.dom.scrollHeight);
-          if (Number(this.loadOpts.skipCount) * Number(this.loadOpts.maxResultCount) >= Number(this.loadOpts.totalCount)) {
-            this.lazyLoading = false
-          } else {
-            this.lazyLoading = true
-            await this.load()
-            this.lazyLoading = false
-            // this.dom.scrollTop = this.dom.scrollTop - 100
-          }
+    async scrollFull(scroll, event) {
+      if (scroll.judgeFlse) {
+        if (
+          (Number(this.loadOpts.skipCount) + 1) *
+          Number(this.loadOpts.maxResultCount) >=
+          Number(this.loadOpts.totalCount)
+        ) {
+          return;
+        } else {
+          await this.load();
         }
-      })
+      }
+      // this.dom = this.$refs['info'].bodyWrapper
+      // console.log('this.dom', this.dom)
+
+      // this.dom.addEventListener('scroll', async () => {
+      //   // console.log('scrollTop',this.dom.scrollTop,'clientHeight',this.dom.clientHeight,'scrollHeight',this.dom.scrollHeight);
+      //   if (this.dom.scrollTop + this.dom.clientHeight + 20 > this.dom.scrollHeight && !this.lazyLoading) {
+      //     // 获取到的不是全部数据 当滚动到底部 
+      //     console.log('scrollTop', this.dom.scrollTop, 'clientHeight', this.dom.clientHeight, 'scrollHeight', this.dom.scrollHeight);
+      //     if (Number(this.loadOpts.skipCount) * Number(this.loadOpts.maxResultCount) >= Number(this.loadOpts.totalCount)) {
+      //       this.lazyLoading = false
+      //     } else {
+      //       this.lazyLoading = true
+      //       await this.load()
+      //       this.lazyLoading = false
+      //       // this.dom.scrollTop = this.dom.scrollTop - 100
+      //     }
+      //   }
+      // })
     },
 
     //监听拖拽