vxe-table 3.13.10 → 3.13.12

package/packages/table/src/methods.ts

@@ -534,18 +534,11 @@ function updateStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
       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) {
@@ -562,17 +555,29 @@ function updateStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
             if (isOptimizeMode) {
               renderColumnList = fixedColumn || []
             }
+          }
+        }
+
+        const tWidth = renderColumnList.reduce((previous, column) => previous + column.renderWidth, 0)
 
-            if (!isOptimizeMode) {
+        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`
         }
@@ -628,7 +633,6 @@ function updateStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
           fixedWrapperElem.style.width = `${fixedColumn.reduce((previous, column) => previous + column.renderWidth, 0)}px`
         }
 
-        let tWidth = tableWidth
         let renderColumnList = tableColumn
 
         let isOptimizeMode = false
@@ -646,16 +650,22 @@ function updateStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
           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` : ''
           // 兼容性处理
@@ -666,8 +676,6 @@ function updateStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
           emptyBlockElem.style.width = tWidth ? `${tWidth}px` : ''
         }
       } else if (layout === 'footer') {
-        let tWidth = tableWidth
-
         let renderColumnList = tableColumn
         let isOptimizeMode = false
         // 如果是使用优化模式
@@ -684,16 +692,22 @@ function updateStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
           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);
         }
       }
     }