ui

package.json

@@ -23,6 +23,7 @@
     "node-polyfill-webpack-plugin": "^2.0.1",
     "print-js": "^1.6.0",
     "sortablejs": "^1.15.0",
+    "umy-ui": "^1.1.6",
     "vue": "^2.6.14",
     "vue-contextmenujs": "^1.4.9",
     "vue-img-cutter": "^3.0.5",

src/assets/css/global_table.css

@@ -1,6 +1,7 @@
 /* 表格 表头 列间距控制 */
 
-.el-table th.el-table__cell>.cell {
+.el-table th.el-table__cell>.cell,
+.plTableBox .el-table th>.cell {
     text-align: center;
     /* 表格 表头 对齐方式，默认 left */
     padding-right: 2px;
@@ -35,7 +36,8 @@
     /* 上，右，下，左 */
 }
 
-.el-table .cell {
+.el-table .cell,
+.plTableBox .el-table .cell {
     padding: 0px 2px;
     /* 原始 默认 0px 10px; */
     line-height: 23px;
@@ -69,7 +71,8 @@
 
 /* 设置表体样式 */
 
-.el-table td.el-table__cell {
+.el-table td.el-table__cell,
+.plTableBox .el-table td.is-center {
     padding: 0;
     color: #52555F;
     /* 设置表体文字颜色 */
@@ -78,7 +81,11 @@
     font-family: "NotoSansSC-Regular";
 }
 
+
 /* 表格列排序 */
-.el-table .caret-wrapper {
-    width: 16px; /* 默认值 24px */
+
+.el-table .caret-wrapper,
+.plTableBox .el-table .caret-wrapper {
+    width: 16px;
+    /* 默认值 24px */
 }

src/components/patientRegister/PatientRegisterList.vue

@@ -4,13 +4,13 @@
     <div style="display: flex">
       <div :style="'width:' + (window.pageWidth - 200 - 145) + 'px;'" @contextmenu.prevent="onContextmenu">
         <div>
-          <el-table :data="tableData" border
+          <u-table :data="tableData" border
             :height="window.pageHeight < 600 ? 248 : Math.floor(((window.pageHeight - 250) * 2) / 3)"
             highlight-current-row @row-click="rowClick" size="small" row-key="id"
             @selection-change="handleSelectionChange" @cell-contextmenu="onCellRightClick" ref="info" id="info"
-            :row-class-name="handleRowClassName">
-            <el-table-column type="selection" width="40" align="center"></el-table-column>
-            <el-table-column v-for="(item, index) in dragCol" :key="index" :type="dragCol[index].type"
+            :row-class-name="handleRowClassName" use-virtual :row-height="30" @table-body-scroll="scrollFull" big-data-checkbox :data-changes-scroll-top="false">
+            <u-table-column type="selection" width="40" align="center"></u-table-column>
+            <u-table-column v-for="(item, index) in dragCol" :key="index" :type="dragCol[index].type"
               :min-width="dragCol[index].minWidth" :align="dragCol[index].align" :label="item.label"
               :prop="dragCol[index].prop" :sortable="dragCol[index].type || dragCol[index].prop == 'sn' ? false : true">
               <template slot-scope="scope" v-if="!(dragCol[index].type)">
@@ -91,7 +91,7 @@
                   </div>
                 </div>
               </template>
-            </el-table-column>
+            </u-table-column>
 
 
             <!--
@@ -120,7 +120,7 @@
           "creatorId": null,
           "id": "3a0c196d-a6d0-37fe-5c32-4806bdc4530f"
           -->
-          </el-table>
+          </u-table>
           <div style="display: flex;justify-content:space-between;">
             <div></div>
             <div>
@@ -428,7 +428,7 @@ export default {
       dialogColSort: false,
 
       dom: null,   //用于滚动加载数据
-      lazyLoading: false,  //是否懒加载中
+      // lazyLoading: false,  //是否懒加载中
       loadOpts: {
         totalCount: 0,
         skipCount: 0,
@@ -480,13 +480,11 @@ export default {
     this.quickAsb = this.dict.asbItemAll;
 
     this.peisid = window.sessionStorage.getItem('peisid');
-
-
-    this.$nextTick(() => {
-      this.scrollFull()
-    })
-
-
+    // if(this.$refs.info){
+    //       this.$nextTick(() => {
+    //   this.scrollFull()
+    // })
+    // }
   },
   computed: {
     ...mapState([
@@ -1230,25 +1228,33 @@ 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);
+    async scrollFull(scroll,event) {
+      console.log(scroll)
+      if(scroll.judgeFlse){
         if ((Number(this.loadOpts.skipCount) + 1) * Number(this.loadOpts.maxResultCount) >= Number(this.loadOpts.totalCount)) {
-            this.lazyLoading = false
+          return
           } else {
-            this.lazyLoading = true
             await this.load()
-            this.lazyLoading = false
-            // this.dom.scrollTop = this.dom.scrollTop - 100
           }
       }
-      })
+      // 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) + 1) * 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
+      //     }
+      //   }
+      // })
     },
 
 

src/main.js

@@ -10,8 +10,13 @@ import Print from "vue-print-nb";
 import Meta from 'vue-meta'
 import Contextmenu from 'vue-contextmenujs' //'vue-contextmenu'
 import "./assets/css/global_font.css";
+import UmyUi from 'umy-ui'
+import 'umy-ui/lib/theme-chalk/index.css'; // 引入样式
 
 
+
+
+Vue.use(UmyUi);
 Vue.use(Contextmenu);
 Vue.use(Meta);
 Vue.use(ElementUI);