vxe-table 3.19.29 → 3.19.31

package/packages/table/src/methods.ts

@@ -9,7 +9,6 @@ import { moveRowAnimateToTb, clearRowAnimate, moveColAnimateToLr, clearColAnimat
 import { warnLog, errLog } from '../../ui/src/log'
 import { getCrossTableDragRowInfo } from './store'
 
-import type { VxeGanttConstructor, VxeGanttPrivateMethods } from 'vxe-gantt'
 import type { VxeTableDefines, VxeColumnPropTypes, VxeTableEmits, ValueOf, TableReactData, VxeTableConstructor, VxeToolbarConstructor, VxeToolbarInstance, TableInternalData, VxeGridConstructor, VxeTablePrivateMethods, VxeTooltipInstance, VxeTablePropTypes, VxeGridPrivateMethods } from '../../../types'
 
 const { getConfig, getI18n, renderer, formats, interceptor, createEvent } = VxeUI
@@ -4477,7 +4476,7 @@ const tableMethods: any = {
   getParentHeight () {
     const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
     const $xeGrid = $xeTable.$xeGrid as VxeGridConstructor & VxeGridPrivateMethods
-    const $xeGantt = $xeTable.$xeGantt as VxeGanttConstructor & VxeGanttPrivateMethods
+    const $xeGantt = $xeTable.$xeGantt
     const props = $xeTable
 
     const { height } = props
@@ -6302,6 +6301,10 @@ const tableMethods: any = {
     const reactData = $xeTable as unknown as TableReactData
     const internalData = $xeTable as unknown as TableInternalData
 
+    const isLeftBtn = evnt.button === 0
+    if (!isLeftBtn) {
+      return
+    }
     evnt.stopPropagation()
     evnt.preventDefault()
     const { column } = params
@@ -7111,6 +7114,11 @@ const tableMethods: any = {
       })
     }
   },
+  contextMenuEvent (evnt: MouseEvent) {
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+
+    $xeTable.dispatchEvent('context-menu', {}, evnt)
+  },
   /**
    * 全局键盘事件
    */

package/packages/table/src/table.ts

@@ -2236,9 +2236,11 @@ export default {
     const scrollbarYToLeft = $xeTable.computeScrollbarYToLeft
     const { isCrossTableDrag } = rowDragOpts
     const tbOns: {
+      contextmenu: (...args: any[]) => void
         keydown: (...args: any[]) => void
         dragover?: (...args: any[]) => void
       } = {
+        contextmenu: this.contextMenuEvent,
         keydown: this.keydownEvent
       }
     if (isCrossTableDrag && !tableData.length) {
@@ -2261,7 +2263,9 @@ export default {
         'checkbox--range': checkboxOpts.range,
         'col--drag-cell': columnOpts.drag && columnDragOpts.trigger === 'cell',
         'is--header': showHeader,
+        'not--header': !showHeader,
         'is--footer': showFooter,
+        'not--footer': !showFooter,
         'is--group': isGroup,
         'is-row-group': isRowGroupStatus,
         'is--tree-line': treeConfig && (treeOpts.showLine || treeOpts.line),
@@ -2273,7 +2277,9 @@ export default {
         'is--loading': currLoading,
         'is--empty': !currLoading && !tableData.length,
         'is--scroll-y': overflowY,
+        'not--scroll-y': !overflowY,
         'is--scroll-x': overflowX,
+        'not--scroll-x': !overflowX,
         'is--virtual-x': scrollXLoad,
         'is--virtual-y': scrollYLoad
       }],

package/styles/components/table.scss

@@ -544,107 +544,300 @@ $btnThemeList: (
       border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
     }
     @extend %AllRadius;
-    .vxe-table--border-line {
-      @extend %AllRadius;
-    }
-    &.is--header {
-      &:not(.is--footer) {
-        .vxe-table--body-wrapper {
-          &.fixed-left--wrapper {
-            @extend %BottomLeftRadius;
-          }
-          &.body--wrapper {
-            @extend %BottomRadius;
+    &.sy-pos--right {
+      &.sx-pos--bottom {
+        &.is--scroll-y {
+          &.is--scroll-x {
+            .vxe-table--header-wrapper {
+              &.body--wrapper {
+                border-radius: var(--vxe-ui-table-border-radius) 0 0 0;
+              }
+              &.fixed-left--wrapper {
+                border-radius: var(--vxe-ui-table-border-radius) 0 0 0;
+              }
+            }
+            .vxe-table--border-line {
+              border-radius: var(--vxe-ui-table-border-radius) 0 0 0;
+            }
           }
-          &.fixed-right--wrapper {
-            @extend %BottomRightRadius;
+          &.not--scroll-x {
+            .vxe-table--header-wrapper {
+              &.body--wrapper {
+                border-radius: var(--vxe-ui-table-border-radius) 0 0 0;
+              }
+              &.fixed-left--wrapper {
+                border-radius: var(--vxe-ui-table-border-radius) 0 0 0;
+              }
+            }
+            .vxe-table--footer-wrapper {
+              &.body--wrapper {
+                border-radius: 0 0 0 var(--vxe-ui-table-border-radius);
+              }
+              &.fixed-left--wrapper {
+                border-radius: 0 0 0 var(--vxe-ui-table-border-radius);
+              }
+            }
+            .vxe-table--border-line {
+              border-radius: var(--vxe-ui-table-border-radius) 0 0 var(--vxe-ui-table-border-radius);
+            }
           }
         }
-      }
-      .vxe-table--header-wrapper {
-        &.fixed-left--wrapper {
-          @extend %TopLeftRadius;
-        }
-        &.body--wrapper {
-          @extend %TopRadius;
-        }
-        &.fixed-right--wrapper {
-          @extend %TopRightRadius;
-        }
-      }
-    }
-    &:not(.is--header) {
-      &:not(.is--footer) {
-        .vxe-table--body-wrapper {
-          &.body--wrapper {
-            @extend %AllRadius;
+        &.not--scroll-y {
+          &.is--scroll-x {
+            .vxe-table--header-wrapper {
+              &.body--wrapper {
+                border-radius: var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius) 0 0;
+              }
+              &.fixed-left--wrapper {
+                border-radius: var(--vxe-ui-table-border-radius) 0 0 0;
+              }
+              &.fixed-right--wrapper {
+                border-radius: 0 var(--vxe-ui-table-border-radius) 0 0;
+              }
+            }
+            .vxe-table--border-line {
+              border-radius: var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius) 0 0;
+            }
+          }
+          &.not--scroll-x {
+            .vxe-table--header-wrapper {
+              &.body--wrapper {
+                border-radius: var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius) 0 0;
+              }
+              &.fixed-right--wrapper {
+                border-radius: var(--vxe-ui-table-border-radius) 0 0 0;
+              }
+            }
+            .vxe-table--footer-wrapper {
+              &.body--wrapper {
+                border-radius: 0 0 var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius);
+              }
+              &.fixed-right--wrapper {
+                border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
+              }
+            }
+            .vxe-table--border-line {
+              @extend %AllRadius;
+            }
           }
         }
       }
-    }
-    &.is--footer {
-      &:not(.is--header) {
-        .vxe-table--body-wrapper {
-          &.fixed-left--wrapper {
-            @extend %BottomLeftRadius;
-          }
-          &.body--wrapper {
-            @extend %TopRadius;
+      &.sx-pos--top {
+        &.is--scroll-y {
+          &.is--scroll-x {
+            .vxe-table--footer-wrapper {
+              &.body--wrapper {
+                border-radius: 0 0 0 var(--vxe-ui-table-border-radius);
+              }
+              &.fixed-left--wrapper {
+                border-radius: 0 0 0 var(--vxe-ui-table-border-radius);
+              }
+            }
+            .vxe-table--border-line {
+              border-radius: 0 0 0 var(--vxe-ui-table-border-radius);
+            }
           }
-          &.fixed-right--wrapper {
-            @extend %BottomRightRadius;
+          &.not--scroll-x {
+            .vxe-table--header-wrapper {
+              &.body--wrapper {
+                border-radius: var(--vxe-ui-table-border-radius) 0 0 0;
+              }
+              &.fixed-left--wrapper {
+                border-radius: var(--vxe-ui-table-border-radius) 0 0 0;
+              }
+            }
+            .vxe-table--footer-wrapper {
+              &.body--wrapper {
+                border-radius: 0 0 0 var(--vxe-ui-table-border-radius);
+              }
+              &.fixed-left--wrapper {
+                border-radius: 0 0 0 var(--vxe-ui-table-border-radius);
+              }
+            }
+            .vxe-table--border-line {
+              border-radius: var(--vxe-ui-table-border-radius) 0 0 var(--vxe-ui-table-border-radius);
+            }
           }
         }
-      }
-      .vxe-table--footer-wrapper {
-        &.fixed-left--wrapper {
-          @extend %BottomLeftRadius;
-        }
-        &.body--wrapper {
-          @extend %BottomRadius;
-        }
-        &.fixed-right--wrapper {
-          @extend %BottomRightRadius;
-        }
-      }
-    }
-    &.sx-pos--top {
-      .vxe-table--scroll-x-left-corner {
-        &::before {
-          @extend %TopLeftRadius;
-        }
-      }
-      .vxe-table--scroll-x-right-corner {
-        &::before {
-          @extend %TopRightRadius;
+        &.not--scroll-y {
+          &.is--scroll-x {
+            .vxe-table--footer-wrapper {
+              &.body--wrapper {
+                border-radius: 0 0 var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius);
+              }
+              &.fixed-left--wrapper {
+                border-radius: 0 0 0 var(--vxe-ui-table-border-radius);
+              }
+              &.fixed-right--wrapper {
+                border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
+              }
+            }
+            .vxe-table--border-line {
+              border-radius: 0 0 var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius);
+            }
+          }
+          &.not--scroll-x {
+            .vxe-table--border-line {
+              @extend %AllRadius;
+            }
+          }
         }
       }
     }
-    &.sx-pos--bottom {
-      &.sy-pos--right {
-        .vxe-table--scroll-y-top-corner {
-          @extend %TopRightRadius;
-          &::before {
-            @extend %TopRightRadius;
+    &.sy-pos--left {
+      &.sx-pos--bottom {
+        &.is--scroll-y {
+          &.is--scroll-x {
+            .vxe-table--border-line {
+              border-radius: 0 var(--vxe-ui-table-border-radius) 0 0;
+            }
+          }
+          &.not--scroll-x {
+            .vxe-table--header-wrapper {
+              &.body--wrapper {
+                border-radius: 0 var(--vxe-ui-table-border-radius) 0 0;
+              }
+              &.fixed-right--wrapper {
+                border-radius: 0 var(--vxe-ui-table-border-radius) 0 0;
+              }
+            }
+            .vxe-table--footer-wrapper {
+              &.body--wrapper {
+                border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
+              }
+              &.fixed-right--wrapper {
+                border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
+              }
+            }
+            .vxe-table--border-line {
+              border-radius: 0 var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius) 0;
+            }
           }
         }
-      }
-      &.sy-pos--left {
-        .vxe-table--scroll-y-top-corner {
-          @extend %TopLeftRadius;
-          &::before {
-            @extend %TopLeftRadius;
+        &.not--scroll-y {
+          &.is--scroll-x {
+            .vxe-table--header-wrapper {
+              &.body--wrapper {
+                border-radius: var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius) 0 0;
+              }
+              &.fixed-left--wrapper {
+                border-radius: var(--vxe-ui-table-border-radius) 0 0 0;
+              }
+              &.fixed-right--wrapper {
+                border-radius: 0 var(--vxe-ui-table-border-radius) 0 0;
+              }
+            }
+            .vxe-table--border-line {
+              border-radius: var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius) 0 0;
+            }
+          }
+          &.not--scroll-x {
+            .vxe-table--header-wrapper {
+              &.body--wrapper {
+                border-radius: var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius) 0 0;
+              }
+              &.fixed-left--wrapper {
+                border-radius: var(--vxe-ui-table-border-radius) 0 0 0;
+              }
+              &.fixed-right--wrapper {
+                border-radius: 0 var(--vxe-ui-table-border-radius) 0 0;
+              }
+            }
+            .vxe-table--footer-wrapper {
+              &.body--wrapper {
+                border-radius: 0 0 var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius);
+              }
+              &.fixed-left--wrapper {
+                border-radius: 0 0 0 var(--vxe-ui-table-border-radius);
+              }
+              &.fixed-right--wrapper {
+                border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
+              }
+            }
+            .vxe-table--border-line {
+              @extend %AllRadius;
+            }
           }
         }
       }
-      .vxe-table--scroll-x-left-corner {
-        &::before {
-          @extend %BottomLeftRadius;
+      &.sx-pos--top {
+        &.is--scroll-y {
+          &.is--scroll-x {
+            .vxe-table--footer-wrapper {
+              &.body--wrapper {
+                border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
+              }
+              &.fixed-right--wrapper {
+                border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
+              }
+            }
+            .vxe-table--border-line {
+              border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
+            }
+          }
+          &.not--scroll-x {
+            .vxe-table--header-wrapper {
+              &.body--wrapper {
+                border-radius: 0 var(--vxe-ui-table-border-radius) 0 0;
+              }
+              &.fixed-right--wrapper {
+                border-radius: 0 var(--vxe-ui-table-border-radius) 0 0;
+              }
+            }
+            .vxe-table--footer-wrapper {
+              &.body--wrapper {
+                border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
+              }
+              &.fixed-right--wrapper {
+                border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
+              }
+            }
+            .vxe-table--border-line {
+              border-radius: 0 var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius) 0;
+            }
+          }
         }
-      }
-      .vxe-table--scroll-x-right-corner {
-        &::before {
-          @extend %BottomRightRadius;
+        &.not--scroll-y {
+          &.is--scroll-x {
+            .vxe-table--footer-wrapper {
+              &.body--wrapper {
+                border-radius: 0 0 var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius);
+              }
+              &.fixed-right--wrapper {
+                border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
+              }
+            }
+            .vxe-table--border-line {
+              border-radius: 0 0 var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius);
+            }
+          }
+          &.not--scroll-x {
+            .vxe-table--header-wrapper {
+              &.body--wrapper {
+                border-radius: var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius) 0 0;
+              }
+              &.fixed-left--wrapper {
+                border-radius: var(--vxe-ui-table-border-radius) 0 0 0;
+              }
+              &.fixed-right--wrapper {
+                border-radius: 0 var(--vxe-ui-table-border-radius) 0 0;
+              }
+            }
+            .vxe-table--footer-wrapper {
+              &.body--wrapper {
+                border-radius: 0 0 var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius);
+              }
+              &.fixed-left--wrapper {
+                border-radius: 0 0 0 var(--vxe-ui-table-border-radius);
+              }
+              &.fixed-right--wrapper {
+                border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
+              }
+            }
+            .vxe-table--border-line {
+              @extend %AllRadius;
+            }
+          }
         }
       }
     }
@@ -757,7 +950,7 @@ $btnThemeList: (
       position: absolute;
       top: 0;
       left: 0;
-      width: 100%;
+      width: calc(100% + var(--vxe-ui-table-border-width));
       height: 100%;
       z-index: 1;
       border-width: var(--vxe-ui-table-border-width);
@@ -772,16 +965,38 @@ $btnThemeList: (
     right: 0;
   }
   &.sy-pos--right {
+    .vxe-table--scroll-y-top-corner,
+    .vxe-table--scroll-y-bottom-corner {
+      right: 0;
+      width: calc(100% + var(--vxe-ui-table-border-width));
+    }
+    .vxe-table--scroll-x-right-corner {
+      &::before {
+        left: calc(var(--vxe-ui-table-border-width) * -1);
+      }
+    }
     .vxe-table--scroll-x-right-corner {
-      right: 1px;
       &::before {
         border-right: 0;
       }
     }
   }
+  &.sy-pos--left {
+    .vxe-table--scroll-y-top-corner,
+    .vxe-table--scroll-y-bottom-corner {
+      left: 0;
+      width: calc(100% + var(--vxe-ui-table-border-width));
+    }
+    .vxe-table--scroll-x-left-corner {
+      &::before {
+        top: calc(var(--vxe-ui-table-border-width) * -1);
+        height: calc(100% + var(--vxe-ui-table-border-width));
+      }
+    }
+  }
   &.sx-pos--bottom {
     .vxe-table--scroll-x-right-corner {
-      bottom: 1px;
+      bottom: var(--vxe-ui-table-border-width);
       &::before {
         border-bottom: 0;
       }
@@ -793,12 +1008,10 @@ $btnThemeList: (
   .vxe-table--scroll-y-top-corner,
   .vxe-table--scroll-y-bottom-corner {
     top: 0;
-    right: 0;
-    width: 100%;
     height: 0;
   }
   .vxe-table--scroll-y-bottom-corner {
-    margin-top: -1px;
+    margin-top: calc(var(--vxe-ui-table-border-width) * -1);
   }
 }
 
@@ -1457,28 +1670,33 @@ $btnThemeList: (
   &.border--full,
   &.border--outer,
   &.border--inner {
-    .vxe-table--scroll-y-top-corner,
-    .vxe-table--scroll-y-bottom-corner {
-      &::before {
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: 1;
-        border-width: 0;
-        border-style: solid;
-        border-color: var(--vxe-ui-table-border-color);
+    &.sy-pos--right {
+      .vxe-table--scroll-y-top-corner {
+        background-image: linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color)), linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color));
+        background-repeat: no-repeat;
+        background-size: var(--vxe-ui-table-border-width) 100%, 100% var(--vxe-ui-table-border-width);
+        background-position: left top, left bottom;
       }
-    }
-    .vxe-table--scroll-y-top-corner {
-      &::before {
-        border-bottom-width: var(--vxe-ui-table-border-width);
+      .vxe-table--scroll-y-bottom-corner {
+        background-image: linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color)), linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color));
+        background-repeat: no-repeat;
+        background-size: var(--vxe-ui-table-border-width) 100%, 100% var(--vxe-ui-table-border-width);
+        background-position: left top, left top;
       }
     }
-    .vxe-table--scroll-y-bottom-corner {
-      border-top: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
+    &.sy-pos--left {
+      .vxe-table--scroll-y-top-corner {
+        background-image: linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color)), linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color));
+        background-repeat: no-repeat;
+        background-size: var(--vxe-ui-table-border-width) 100%, 100% var(--vxe-ui-table-border-width);
+        background-position: right top, left bottom;
+      }
+      .vxe-table--scroll-y-bottom-corner {
+        background-image: linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color)), linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color));
+        background-repeat: no-repeat;
+        background-size: var(--vxe-ui-table-border-width) 100%, 100% var(--vxe-ui-table-border-width);
+        background-position: right top, left top;
+      }
     }
     .vxe-table--scroll-x-handle-appearance {
       position: absolute;
@@ -1551,27 +1769,6 @@ $btnThemeList: (
   }
   &.border--default,
   &.border--full {
-    .vxe-table--scroll-y-top-corner {
-      &::before {
-        border-left-width: var(--vxe-ui-table-border-width);
-        border-right-width: var(--vxe-ui-table-border-width);
-      }
-    }
-    .vxe-table--scroll-y-bottom-corner {
-      &::before {
-        border-left-width: var(--vxe-ui-table-border-width);
-        border-right-width: var(--vxe-ui-table-border-width);
-      }
-    }
-    &.sy-pos--right {
-      .vxe-table--scroll-y-top-corner,
-      .vxe-table--scroll-y-bottom-corner {
-        &::before {
-          width: calc(100% + 1px);
-          left: -1px;
-        }
-      }
-    }
     .vxe-table--scroll-y-handle-appearance {
       position: absolute;
       top: 0;