element ui table 固定列 行错位 自带bug修复 => 重新计算dom元素高度 通过css变量重新插入赋值

dsk-operate-ui/package.json

@@ -5,7 +5,7 @@
   "author": "若依",
   "license": "MIT",
   "scripts": {
-    "dev": "set NODE_OPTIONS=--openssl-legacy-provider & vue-cli-service serve",
+    "dev": "vue-cli-service serve",
     "devmac": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
     "build:prod": "vue-cli-service build",
     "build:test": "vue-cli-service build --mode test",

dsk-operate-ui/src/components/CustomTable/index.vue

 <template>
-  <div class="table-list-com-ins" :class="{'is-empty-table' : !tableDataTotal,'no-pagination' : !hasQueryParams,'auto-max-height' : maxHeight}">
+  <div class="table-list-com-ins" :class="{'is-empty-table' : !tableDataTotal,'no-pagination' : !hasQueryParams,'auto-max-height' : maxHeight}"
+    :style="maxBodyFixedStyle">
     <div class="table-item">
-      <el-table v-if="tableDataTotal>0" class="fixed-table" v-loading="tableLoading" :data="tableData" element-loading-text="Loading" ref="tableRef"
-        border fit highlight-current-row :default-sort="defaultSort?defaultSort:{}" @sort-change="sortChange" @selection-change="selectionChange"
-        :cell-class-name="cellClassName" :cell-style="cellStyle" :row-class-name="rowClassName" :row-style="rowStyle" :height="height"
-        :maxHeight="comMaxHeight" v-sticky-header="stickyHeader">
+      <el-table v-if="tableDataTotal>0" class="fixed-table" v-loading="tableLoading" :data="tableData" element-loading-text="Loading"
+        ref="customTableRef" border fit highlight-current-row :default-sort="defaultSort?defaultSort:{}" @sort-change="sortChange"
+        @selection-change="selectionChange" :cell-class-name="cellClassName" :cell-style="cellStyle" :row-class-name="rowClassName"
+        :row-style="rowStyle" :height="height" :maxHeight="comMaxHeight" v-sticky-header="stickyHeader">
         <el-table-column type="selection" :width="needSelection.width ? needSelection.width : '38px'" v-if="needSelection.flag"
           :fixed="needSelection.fixed" :align="needSelection.align" :show-overflow-tooltip="needSelection.showOverflowTooltip">
         </el-table-column>
@@ -138,7 +139,8 @@ export default {
       current_page: this.queryParams.pageNum,
       show_page: this.paging,
       comMaxHeight: null,
-      hasQueryParams: false
+      hasQueryParams: false,
+      comMaxBodyHeight: 0
     };
   },
   watch: {
@@ -159,6 +161,13 @@ export default {
       deep: true
     }
   },
+  computed: {
+    maxBodyFixedStyle() {
+      return {
+        "--body-max-height": `${this.comMaxBodyHeight}px`
+      };
+    }
+  },
   created() {
     this.maxHeight ? this.maxHeightInit() : null;
   },
@@ -167,19 +176,38 @@ export default {
     async maxHeightInit() {
       try {
         await this.$nextTick();
-        if (typeof this.maxHeight == "number") {
-          this.comMaxHeight = `${this.maxHeight}px`;
-          return;
+        // 固定数值
+        const isFixedNumber = typeof this.maxHeight == "number";
+        // 最大高度
+        let containerMaxHeight = null;
+        if (isFixedNumber) {
+          containerMaxHeight = this.maxHeight;
+        } else {
+          /** 
+           * @type {HTMLDivElement}
+          */
+          const container = this.$el.querySelector(".table-item");
+          if (container) {
+            containerMaxHeight = container.offsetHeight;
+          }
         }
-        /** 
-         * @type {HTMLDivElement}
-        */
-        const container = this.$el.querySelector(".table-item");
-        if (container) {
-          this.comMaxHeight = `${container.offsetHeight}px`;
+        // 列表自适应高度
+        this.comMaxHeight = containerMaxHeight ? `${containerMaxHeight}px` : null;
+        // 重新计算表格高度 减去滚动条高度差 16 - 6
+        if (containerMaxHeight) {
+          /** 
+           * @type {HTMLDivElement}
+          */
+          const tableRightHeader = this.$el.querySelector(".el-table__fixed-header-wrapper");
+          if (tableRightHeader) {
+            const headerHeight = parseInt(window.getComputedStyle(tableRightHeader).height);
+            //原滚动条高度为6px 差 10px
+            const bodyMaxHeight = containerMaxHeight - headerHeight - 16;
+            this.comMaxBodyHeight = bodyMaxHeight;
+          }
         }
       } catch (error) {
-
+        console.log(error);
       }
     },
     pagingHandler(hasQueryParams, queryParams, scope) {
@@ -235,6 +263,7 @@ export default {
   /* maxHeight自适应样式 */
   &.auto-max-height {
     ::v-deep .table-item {
+      // 原滚动条为6px  现在多10px
       .el-table {
         /* 右侧fixed列 */
         .el-table__fixed-right {
@@ -253,6 +282,18 @@ export default {
           border-left: unset;
           border-bottom: unset;
         }
+        // 自动适配下 减去滚动条高度
+        .el-table__fixed {
+          height: calc(100% - 15px) !important;
+        }
+        .el-table__fixed-right {
+          height: calc(100% - 15px) !important;
+        }
+
+        // 重新计算隐藏列表高度 减去滚动条16px高度
+        .el-table__fixed-body-wrapper {
+          max-height: var(--body-max-height) !important;
+        }
       }
     }
   }

dsk-operate-ui/src/views/projectCostLedger/detail/components/FeedSummary/index.vue

@@ -35,7 +35,7 @@
         <!-- 数据列表部分 -->
         <div class="project-feedsummary-list-container">
           <dsk-skeleton v-if="tableLoading"></dsk-skeleton>
-          <custom-table :tableData="tableDataList" :formColum="formColum" v-else-if="!tableLoading" :tableDataTotal="total"
+          <custom-table :tableData="tableDataList" :formColum="formColum" v-else-if="!tableLoading" :max-height="true" :tableDataTotal="total"
             :paging="false">
             <template slot="action-field-bar" slot-scope="scope">
               <div class="project-action-field-bar" v-if="scope.row.id != '0'">

dsk-operate-ui/src/views/projectCostLedger/detail/index.vue

@@ -193,8 +193,8 @@ export default {
         const detail = await getProjectDetailApi(projectId);
         if (detail.code == 200 && detail.data) {
           if (detail.data.id) detail.data["projectId"] = detail.data.id;
-          detail.data["projectId"] = "1754425038355890177";
-          detail.data["cbStage"] = 0;
+          // detail.data["projectId"] = "1754425038355890177";
+          // detail.data["cbStage"] = 0;
           this.detailInfo = detail.data;
         }
       } catch (error) {