vxe-table 4.11.10 → 4.11.12

package/packages/table/src/table.ts

@@ -1935,18 +1935,11 @@ export default defineComponent({
           if (layout === 'header') {
             // 表头体样式处理
             // 横向滚动渲染
-            let tWidth = tableWidth
             let renderColumnList = tableColumn
             let isOptimizeMode = false
 
             if (isGroup) {
               renderColumnList = visibleColumn
-
-              if (fixedType) {
-                if (wrapperElem) {
-                  wrapperElem.style.width = tWidth ? `${tWidth}px` : ''
-                }
-              }
             } else {
               // 如果是使用优化模式
               if (scrollXLoad || scrollYLoad || allColumnHeaderOverflow) {
@@ -1963,17 +1956,29 @@ export default defineComponent({
                 if (isOptimizeMode) {
                   renderColumnList = fixedColumn || []
                 }
+              }
+            }
 
-                if (!isOptimizeMode) {
+            const tWidth = renderColumnList.reduce((previous, column) => previous + column.renderWidth, 0)
+
+            if (fixedType) {
+              if (isGroup) {
+                if (wrapperElem) {
+                  wrapperElem.style.width = tableWidth ? `${tableWidth}px` : ''
+                }
+              } else {
+                if (isOptimizeMode) {
                   if (wrapperElem) {
                     wrapperElem.style.width = tWidth ? `${tWidth}px` : ''
                   }
+                } else {
+                  if (wrapperElem) {
+                    wrapperElem.style.width = tableWidth ? `${tableWidth}px` : ''
+                  }
                 }
               }
             }
 
-            tWidth = renderColumnList.reduce((previous, column) => previous + column.renderWidth, 0)
-
             if (currScrollElem) {
               currScrollElem.style.height = `${headerHeight}px`
             }
@@ -1982,11 +1987,6 @@ export default defineComponent({
               tableElem.style.width = tWidth ? `${tWidth}px` : ''
             }
 
-            const repairElem = getRefElem(elemStore[`${name}-${layout}-repair`])
-            if (repairElem) {
-              repairElem.style.width = `${tableWidth}px`
-            }
-
             const listElem = getRefElem(elemStore[`${name}-${layout}-list`])
             if (isGroup && listElem) {
               XEUtils.arrayEach(listElem.querySelectorAll('.col--group'), (thElem: any) => {
@@ -2029,7 +2029,6 @@ export default defineComponent({
               fixedWrapperElem.style.width = `${fixedColumn.reduce((previous, column) => previous + column.renderWidth, 0)}px`
             }
 
-            let tWidth = tableWidth
             let renderColumnList = tableColumn
 
             let isOptimizeMode = false
@@ -2047,16 +2046,22 @@ export default defineComponent({
               if (isOptimizeMode) {
                 renderColumnList = fixedColumn || []
               }
+            }
+
+            const tWidth = renderColumnList.reduce((previous, column) => previous + column.renderWidth, 0)
 
-              if (!isOptimizeMode) {
+            if (fixedType) {
+              if (isOptimizeMode) {
                 if (wrapperElem) {
                   wrapperElem.style.width = tWidth ? `${tWidth}px` : ''
                 }
+              } else {
+                if (wrapperElem) {
+                  wrapperElem.style.width = tableWidth ? `${tableWidth}px` : ''
+                }
               }
             }
 
-            tWidth = renderColumnList.reduce((previous, column) => previous + column.renderWidth, 0)
-
             if (tableElem) {
               tableElem.style.width = tWidth ? `${tWidth}px` : ''
               // 兼容性处理
@@ -2067,8 +2072,6 @@ export default defineComponent({
               emptyBlockElem.style.width = tWidth ? `${tWidth}px` : ''
             }
           } else if (layout === 'footer') {
-            let tWidth = tableWidth
-
             let renderColumnList = tableColumn
             let isOptimizeMode = false
             // 如果是使用优化模式
@@ -2085,16 +2088,22 @@ export default defineComponent({
               if (isOptimizeMode) {
                 renderColumnList = fixedColumn || []
               }
+            }
+
+            const tWidth = renderColumnList.reduce((previous, column) => previous + column.renderWidth, 0)
 
-              if (!isOptimizeMode) {
+            if (fixedType) {
+              if (isOptimizeMode) {
                 if (wrapperElem) {
                   wrapperElem.style.width = tWidth ? `${tWidth}px` : ''
                 }
+              } else {
+                if (wrapperElem) {
+                  wrapperElem.style.width = tableWidth ? `${tableWidth}px` : ''
+                }
               }
             }
 
-            tWidth = renderColumnList.reduce((previous, column) => previous + column.renderWidth, 0)
-
             if (currScrollElem) {
               currScrollElem.style.height = `${footerHeight}px`
               // 如果是固定列

package/styles/components/table.scss

@@ -490,6 +490,46 @@
         }
       }
     }
+    &.sx-pos--top {
+      .vxe-table--scroll-x-left-corner {
+        &::before {
+          @extend %TopLeftRadius;
+        }
+      }
+      .vxe-table--scroll-x-right-corner {
+        &::before {
+          @extend %TopRightRadius;
+        }
+      }
+    }
+    &.sx-pos--bottom {
+      &.sy-pos--right {
+        .vxe-table--scroll-y-top-corner {
+          @extend %TopRightRadius;
+          &::before {
+            @extend %TopRightRadius;
+          }
+        }
+      }
+      &.sy-pos--left {
+        .vxe-table--scroll-y-top-corner {
+          @extend %TopLeftRadius;
+          &::before {
+            @extend %TopLeftRadius;
+          }
+        }
+      }
+      .vxe-table--scroll-x-left-corner {
+        &::before {
+          @extend %BottomLeftRadius;
+        }
+      }
+      .vxe-table--scroll-x-right-corner {
+        &::before {
+          @extend %BottomRightRadius;
+        }
+      }
+    }
   }
 }
 
@@ -1085,28 +1125,30 @@
       border-top: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
     }
     .vxe-table--scroll-x-wrapper {
-      &::before,
       &::after {
         content: "";
         position: absolute;
         left: 0;
         width: 100%;
-        height: 0;
+        height: 100%;
         z-index: 1;
+        pointer-events: none;
       }
-      &::before {
-        top: 0;
-        border-top: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
-      }
-      &::after {
-        bottom: 0;
-        border-bottom: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
+    }
+    &.sx-pos--top {
+      .vxe-table--scroll-x-wrapper {
+        &::after {
+          top: 0;
+          border-bottom: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
+        }
       }
     }
     &.sx-pos--bottom {
       .vxe-table--scroll-x-wrapper {
-        &::before {
-          top: -1px;
+        &::after {
+          bottom: 0;
+          height: calc(100% + var(--vxe-ui-table-border-width));
+          border-top: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
         }
       }
     }
@@ -1175,28 +1217,30 @@
       }
     }
     .vxe-table--scroll-y-wrapper {
-      &::before,
       &::after {
         content: "";
         position: absolute;
         top: 0;
-        width: 0;
+        width: 100%;
         height: 100%;
         z-index: 1;
+        pointer-events: none;
       }
-      &::before {
-        left: 0;
-        border-left: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
-      }
-      &::after {
-        right: 0;
-        border-right: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
+    }
+    &.sy-pos--left {
+      .vxe-table--scroll-y-wrapper {
+        &::after {
+          left: 0;
+          border-right: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
+        }
       }
     }
     &.sy-pos--right {
       .vxe-table--scroll-y-wrapper {
-        &::before {
-          left: -1px;
+        &::after {
+          right: 0;
+          width: calc(100% + var(--vxe-ui-table-border-width));
+          border-left: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
         }
       }
     }