vxe-table 3.12.10-beta.2 → 3.12.10-beta.21

package/styles/components/table.scss

@@ -2,22 +2,6 @@
 @use './icon.scss';
 @use './table-module/all.scss';
 
-%DefaultColumnHeight {
-  height: var(--vxe-ui-table-row-height-default);
-}
-
-%MediumColumnHeight {
-  height: var(--vxe-ui-table-row-height-medium);
-}
-
-%SmallColumnHeight {
-  height: var(--vxe-ui-table-row-height-small);
-}
-
-%MiniColumnHeight {
-  height: var(--vxe-ui-table-row-height-mini);
-}
-
 .vxe-table-slots,
 .vxe-table--file-form {
   display: none;
@@ -31,7 +15,7 @@
   width: 0;
   border: 0;
 }
-.vxe-table--render-wrapper {
+.vxe-table--layout-wrapper {
   display: flex;
   flex-direction: row;
   background-color: var(--vxe-ui-layout-background-color);
@@ -51,19 +35,21 @@
   scrollbar-width: none;
 }
 .vxe-table--header-inner-wrapper,
+.vxe-table--body-inner-wrapper,
 .vxe-table--footer-inner-wrapper {
+  position: relative;
   width: 100%;
-  height: 100% ;
+  height: 100%;
+  scrollbar-width: none;
+}
+.vxe-table--header-inner-wrapper,
+.vxe-table--footer-inner-wrapper {
   overflow-y: hidden;
   overflow-x: scroll;
-  scrollbar-width: none;
 }
 .vxe-table--body-inner-wrapper {
-  width: 100% ;
-  height: 100% ;
   overflow-y: scroll;
   overflow-x: scroll;
-  scrollbar-width: none;
 }
 
 .vxe-loading--custom-wrapper {
@@ -85,44 +71,12 @@
 .vxe-footer--column {
   &.fixed--width {
     & > .vxe-cell {
-      .vxe-default-input,
-      .vxe-default-textarea,
-      .vxe-default-select {
-        width: 100%;
-      }
-      .vxe-input,
-      .vxe-textarea,
-      .vxe-select,
-      .vxe-tree-select,
-      .vxe-date-picker,
-      .vxe-number-input,
-      .vxe-ico-picker {
-        width: 100%;
-      }
-    }
-  }
-}
-.vxe-body--column {
-  &.fixed--width {
-    & > .vxe-cell {
-      & > .vxe-default-input,
-      & > .vxe-default-textarea,
-      & > .vxe-default-select {
-        width: 100%;
-      }
-      & > .vxe-input,
-      & > .vxe-textarea,
-      & > .vxe-select,
-      & > .vxe-tree-select,
-      & > .vxe-date-picker,
-      & > .vxe-number-input,
-      & > .vxe-ico-picker {
-        width: 100%;
-      }
-      & > .vxe-cell--tree-node {
+      & > .vxe-cell--wrapper {
         .vxe-default-input,
         .vxe-default-textarea,
-        .vxe-default-select,
+        .vxe-default-select {
+          width: 100%;
+        }
         .vxe-input,
         .vxe-textarea,
         .vxe-select,
@@ -136,6 +90,42 @@
     }
   }
 }
+.vxe-body--column {
+  &.fixed--width {
+    & > .vxe-cell {
+      & > .vxe-cell--wrapper {
+        & > .vxe-default-input,
+        & > .vxe-default-textarea,
+        & > .vxe-default-select {
+          width: 100%;
+        }
+        & > .vxe-input,
+        & > .vxe-textarea,
+        & > .vxe-select,
+        & > .vxe-tree-select,
+        & > .vxe-date-picker,
+        & > .vxe-number-input,
+        & > .vxe-ico-picker {
+          width: 100%;
+        }
+        & > .vxe-cell--tree-node {
+          .vxe-default-input,
+          .vxe-default-textarea,
+          .vxe-default-select,
+          .vxe-input,
+          .vxe-textarea,
+          .vxe-select,
+          .vxe-tree-select,
+          .vxe-date-picker,
+          .vxe-number-input,
+          .vxe-ico-picker {
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+}
 .vxe-table--filter-template {
   & > .vxe-default-input,
   & > .vxe-default-textarea,
@@ -220,7 +210,9 @@
 .vxe-body--column {
   &.col--vertical-top {
     & > .vxe-cell {
-      height: 100%;
+      & > .vxe-cell--wrapper {
+        height: 100%;
+      }
     }
   }
 }
@@ -444,45 +436,32 @@
 
 /*列宽*/
 .vxe-table {
-  &.column--calc {
+  &[data-calc-col] {
     .vxe-header--column,
     .vxe-body--column,
     .vxe-footer--column {
       .vxe-cell {
-        word-break: break-all;
-        white-space: nowrap;
+        & > .vxe-cell--wrapper {
+          word-break: break-all;
+          white-space: nowrap;
+        }
       }
     }
   }
+  &:not([data-calc-col]) {
+    .vxe-cell--wrapper {
+      min-width: 100%;
+    }
+  }
 }
 
 /*scroll*/
 .vxe-table {
-  &.is--scroll-x {
-    &:hover {
-      & > .vxe-table--scroll-x-virtual {
-        .vxe-table--scroll-x-handle {
-          overflow-x: scroll;
-        }
-      }
-    }
-  }
-  &.is--scroll-y {
-    &:hover {
-      & > .vxe-table--render-wrapper {
-        & > .vxe-table--scroll-y-virtual {
-          .vxe-table--scroll-y-handle {
-            overflow-y: scroll;
-          }
-        }
-      }
-    }
-  }
   &.is--loading {
     & > .vxe-table--scroll-x-virtual {
       visibility: hidden;
     }
-    & > .vxe-table--render-wrapper {
+    & > .vxe-table--layout-wrapper {
       & > .vxe-table--scroll-y-virtual {
         visibility: hidden;
       }
@@ -490,29 +469,9 @@
   }
   .vxe-table--scroll-x-virtual {
     height: 0;
-    &::before {
-      content: "";
-      position: absolute;
-      left: 0;
-      top: -1px;
-      width: 100%;
-      height: 0;
-      z-index: 1;
-      border-top: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
-    }
   }
   .vxe-table--scroll-y-virtual {
     width: 0;
-    &::before {
-      content: "";
-      position: absolute;
-      left:-1px;;
-      top: 0;
-      width: 0;
-      height: 100%;
-      z-index: 1;
-      border-left: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
-    }
   }
   .vxe-table--scroll-x-virtual,
   .vxe-table--scroll-y-virtual {
@@ -523,33 +482,40 @@
   }
   .vxe-table--scroll-x-handle,
   .vxe-table--scroll-y-handle,
+  .vxe-table--scroll-x-wrapper,
+  .vxe-table--scroll-y-wrapper,
   .vxe-table--scroll-y-top-corner,
   .vxe-table--scroll-y-bottom-corner,
   .vxe-table--scroll-x-left-corner,
   .vxe-table--scroll-x-right-corner {
     position: absolute;
   }
-  .vxe-table--scroll-x-virtual,
-  .vxe-table--scroll-x-handle {
+  .vxe-table--scroll-x-handle,
+  .vxe-table--scroll-x-wrapper {
     width: 100%;
     left: 0;
     bottom: 0;
   }
   .vxe-table--scroll-x-handle {
     overflow-y: hidden;
-    overflow-x: auto;
+    overflow-x: scroll;
     height: 18px;
   }
-  .vxe-table--scroll-y-virtual,
-  .vxe-table--scroll-y-handle {
+  .vxe-table--scroll-x-wrapper {
+    height: 100%;
+  }
+  .vxe-table--scroll-y-handle,
+  .vxe-table--scroll-y-wrapper {
+    width: 100%;
     height: 100%;
     right: 0;
     top: 0;
   }
   .vxe-table--scroll-y-handle {
-    overflow-y: auto;
+    overflow-y: scroll;
     overflow-x: hidden;
     width: 18px;
+    height: 100%;
   }
   .vxe-table--scroll-x-space {
     height: 1px;
@@ -563,17 +529,49 @@
   .vxe-table--scroll-y-bottom-corner {
     display: none;
     position: absolute;
-    border-width: 0;
-    border-style: solid;
-    border-color: var(--vxe-ui-table-border-color);
   }
+  .vxe-table--scroll-x-left-corner,
   .vxe-table--scroll-x-right-corner {
-    bottom: 1px;
-    right: 1px;
+    bottom: 0;
     width: 0;
     height: 100%;
-    border-top-width: var(--vxe-ui-table-border-width);
-    border-left-width: var(--vxe-ui-table-border-width);
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 1;
+      border-width: var(--vxe-ui-table-border-width);
+      border-style: solid;
+      border-color: var(--vxe-ui-table-border-color);
+    }
+  }
+  .vxe-table--scroll-x-left-corner {
+    left: 0;
+  }
+  .vxe-table--scroll-x-right-corner {
+    right: 0;
+  }
+  &.sy-pos--right {
+    .vxe-table--scroll-x-right-corner {
+      right: 1px;
+      &::before {
+        border-right: 0;
+      }
+    }
+  }
+  &.sx-pos--bottom {
+    .vxe-table--scroll-x-right-corner {
+      bottom: 1px;
+      &::before {
+        border-bottom: 0;
+      }
+    }
+  }
+  .vxe-table--scroll-y-top-corner {
+    background-color: var(--vxe-ui-table-header-background-color);
   }
   .vxe-table--scroll-y-top-corner,
   .vxe-table--scroll-y-bottom-corner {
@@ -582,13 +580,8 @@
     width: 100%;
     height: 0;
   }
-  .vxe-table--scroll-y-top-corner {
-    background-color: var(--vxe-ui-table-header-background-color);
-    border-bottom-width: var(--vxe-ui-table-border-width);
-  }
   .vxe-table--scroll-y-bottom-corner {
     margin-top: -1px;
-    border-top-width: var(--vxe-ui-table-border-width);
   }
 }
 
@@ -706,11 +699,11 @@
   .vxe-cell-title-suffix-icon {
     cursor: help;
   }
-  .vxe-resizable {
+  .vxe-cell--col-resizable {
     position: absolute;
-    right: -7px;
+    right: -0.3em;
     bottom: 0;
-    width: 14px;
+    width: 0.6em;
     height: 100%;
     text-align: center;
     z-index: 1;
@@ -736,13 +729,37 @@
 }
 .vxe-table--fixed-right-wrapper {
   .vxe-header--column {
-    .vxe-resizable {
+    .vxe-cell--col-resizable {
       right: auto;
-      left: -7px;
+      left: -0.3em;
+    }
+  }
+}
+
+.vxe-body--column {
+  .vxe-cell--row-resizable {
+    position: absolute;
+    left: 0;
+    bottom: -0.4em;
+    height: 0.8em;
+    width: 100%;
+    text-align: center;
+    z-index: 1;
+    cursor: row-resize;
+  }
+}
+.vxe-body--row {
+  &:last-child {
+    .vxe-body--column {
+      .vxe-cell--row-resizable {
+        height: 0.4em;
+        bottom: -0px;
+      }
     }
   }
 }
 
+
 /*table*/
 .vxe-table--render-default {
   position: relative;
@@ -852,7 +869,7 @@
   //     }
   //   }
   // }
-  &.drag--resize {
+  &.col-drag--resize {
     .vxe-table--main-wrapper,
     .vxe-table--fixed-left-wrapper,
     .vxe-table--fixed-right-wrapper {
@@ -861,6 +878,15 @@
       }
     }
   }
+  &.row-drag--resize {
+    .vxe-table--main-wrapper,
+    .vxe-table--fixed-left-wrapper,
+    .vxe-table--fixed-right-wrapper {
+      * {
+        cursor: row-resize;
+      }
+    }
+  }
   &.drag--range,
   &.drag--area {
     .vxe-table--main-wrapper,
@@ -929,19 +955,6 @@
       }
     }
   }
-  &.is--padding {
-    .vxe-body--column {
-      &:not(.col--ellipsis) {
-        padding: var(--vxe-ui-table-column-padding-default);
-      }
-    }
-  }
-  .vxe-header--column,
-  .vxe-footer--column {
-    &:not(.col--ellipsis) {
-      padding: var(--vxe-ui-table-column-padding-default);
-    }
-  }
   .vxe-header--column,
   .vxe-body--column,
   .vxe-footer--column {
@@ -956,9 +969,15 @@
     }
     &.col--center {
       text-align: center;
+      & > .vxe-cell {
+        justify-content: center;
+      }
     }
     &.col--right {
       text-align: right;
+      & > .vxe-cell {
+        justify-content: right;
+      }
     }
   }
   // &.is--tree-line {
@@ -992,27 +1011,60 @@
   .vxe-table--footer-wrapper {
     border-top: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
   }
-  // &.border--default,
-  // &.border--full,
-  // &.border--inner,
-  // &.border--outer {
-  //   .vxe-body--row {
-  //     &:last-child {
-  //       & > .vxe-body--column {
-  //         & > .vxe-cell {
-  //           border-bottom: 1px solid transparent;
-  //         }
-  //       }
-  //     }
-  //   }
-  //   .vxe-body--column {
-  //     &:first-child {
-  //       & > .vxe-cell {
-  //         border-left: 1px solid transparent;
-  //       }
-  //     }
-  //   }
-  // }
+  &.border--default,
+  &.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);
+      }
+    }
+    .vxe-table--scroll-y-top-corner {
+      &::before {
+        border-bottom-width: var(--vxe-ui-table-border-width);
+      }
+    }
+    .vxe-table--scroll-y-bottom-corner {
+      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;
+        z-index: 1;
+      }
+      &::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--bottom {
+      .vxe-table--scroll-x-wrapper {
+        &::before {
+          top: -1px;
+        }
+      }
+    }
+  }
   &.border--default,
   &.border--full,
   &.border--outer {
@@ -1031,6 +1083,56 @@
       background-position: right bottom;
     }
   }
+  &.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-wrapper {
+      &::before,
+      &::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        width: 0;
+        height: 100%;
+        z-index: 1;
+      }
+      &::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--right {
+      .vxe-table--scroll-y-wrapper {
+        &::before {
+          left: -1px;
+        }
+      }
+    }
+  }
   &.border--full {
     .vxe-header--column,
     .vxe-body--column,
@@ -1079,8 +1181,10 @@
     .vxe-header--column,
     .vxe-body--column,
     .vxe-footer--column {
-      &:not(.col--ellipsis) {
-        padding: var(--vxe-ui-table-column-padding-medium);
+      &.is--padding {
+        .vxe-cell {
+          padding: var(--vxe-ui-table-cell-padding-medium);
+        }
       }
     }
     .vxe-cell {
@@ -1105,8 +1209,10 @@
     .vxe-header--column,
     .vxe-body--column,
     .vxe-footer--column {
-      &:not(.col--ellipsis) {
-        padding: var(--vxe-ui-table-column-padding-small);
+      &.is--padding {
+        .vxe-cell {
+          padding: var(--vxe-ui-table-cell-padding-small);
+        }
       }
     }
     .vxe-cell {
@@ -1131,8 +1237,10 @@
     .vxe-header--column,
     .vxe-body--column,
     .vxe-footer--column {
-      &:not(.col--ellipsis) {
-        padding: var(--vxe-ui-table-column-padding-mini);
+      &.is--padding {
+        .vxe-cell {
+          padding: var(--vxe-ui-table-cell-padding-mini);
+        }
       }
     }
     .vxe-cell {
@@ -1149,21 +1257,16 @@
     }
   }
 
-  &.is--padding {
-    .vxe-body--column {
-      .vxe-cell {
-        padding-left: var(--vxe-ui-table-cell-padding-left);
-        padding-right: var(--vxe-ui-table-cell-padding-right);
-      }
-    }
-  }
   .vxe-header--column,
+  .vxe-body--column,
   .vxe-footer--column {
-    .vxe-cell {
-      padding-left: var(--vxe-ui-table-cell-padding-left);
-      padding-right: var(--vxe-ui-table-cell-padding-right);
+    &.is--padding {
+      .vxe-cell {
+        padding: var(--vxe-ui-table-cell-padding-default);
+      }
     }
   }
+  
   .vxe-cell {
     white-space: pre-line;
     word-break: break-all;
@@ -1256,33 +1359,60 @@
     float: left;
   }
 
-  /*列宽线*/
-  .vxe-table--resizable-bar {
+  .vxe-table--resizable-row-bar,
+  .vxe-table--resizable-col-bar {
     display: none;
     position: absolute;
     top: 0;
     left: 0;
-    width: 1px;
-    height: 100%;
     z-index: 9;
     pointer-events: none;
-    cursor: col-resize;
+    user-select: none;
     &:before {
       content: "";
       display: block;
-      height: 100%;
       background-color: var(--vxe-ui-table-resizable-drag-line-color);
     }
     .vxe-table--resizable-number-tip {
       position: absolute;
-      left: 0;
-      top: 1em;
       padding: 0.25em 0.25em;
       font-size: 12px;
       border-radius: var(--vxe-ui-border-radius);
       white-space: nowrap;
       color: #ffffff;
       background-color: var(--vxe-ui-table-resizable-drag-line-color);
+      user-select: none;
+      pointer-events: none;
+    }
+  }
+
+  /*列宽线*/
+  .vxe-table--resizable-col-bar {
+    width: 1px;
+    height: 100%;
+    cursor: col-resize;
+    &:before {
+      width: 1px;
+      height: 100%;
+    }
+    .vxe-table--resizable-number-tip {
+      left: 0;
+      top: 1em;
+    }
+  }
+
+  // 行高线
+  .vxe-table--resizable-row-bar {
+    height: 1px;
+    width: 100%;
+    cursor: row-resize;
+    &:before {
+      height: 1px;
+      width: 100%;
+    }
+    .vxe-table--resizable-number-tip {
+      top: 0;
+      left: 0;
     }
   }
 
@@ -1321,7 +1451,7 @@
   .vxe-tree--line {
     content: "";
     position: absolute;
-    bottom: -0.9em;
+    bottom: -1.5em;
     width: 0.8em;
     border-width: 0 0 1px 1px;
     border-style: var(--vxe-ui-table-tree-node-line-style);
@@ -1355,6 +1485,8 @@
     display: block;
     padding-left: 1.5em;
   }
+
+  /*单元格高度*/
   .vxe-body--column {
     &.col--ellipsis {
       & > .vxe-cell {
@@ -1365,6 +1497,34 @@
         }
       }
     }
+    &.col--auto-height {
+      overflow: hidden;
+      & > .vxe-cell {
+        overflow: hidden;
+      }
+    }
+    & > .vxe-cell {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+  }
+  .vxe-header--column,
+  .vxe-footer--column {
+    &.col--ellipsis {
+      & > .vxe-cell {
+        .vxe-cell--wrapper {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+    & > .vxe-cell {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
   }
 
   /*展开行*/
@@ -1415,28 +1575,6 @@
     }
   }
 
-  /*设置列高度*/
-  &.vxe-editable {
-    .vxe-body--column {
-      @extend %DefaultColumnHeight;
-    }
-    &.size--medium {
-      .vxe-body--column {
-        @extend %MediumColumnHeight;
-      }
-    }
-    &.size--small {
-      .vxe-body--column {
-        @extend %SmallColumnHeight;
-      }
-    }
-    &.size--mini {
-      .vxe-body--column {
-        @extend %MiniColumnHeight;
-      }
-    }
-  }
-
   /*拖拽列*/
   .vxe-table--drag-col-line {
     height: 100%;
@@ -1613,12 +1751,16 @@
   .vxe-body--column,
   .vxe-footer--column {
     &.col--ellipsis {
-      @extend %DefaultColumnHeight;
       &:not(.col--active) {
         & > .vxe-cell {
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
+          & > .vxe-cell--wrapper {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
         }
         &.col--vertical-top {
           & > .vxe-cell {
@@ -1626,22 +1768,9 @@
           }
         }
       }
-      & > .vxe-cell {
-        max-height: var(--vxe-ui-table-row-height-default);
-      }
     }
   }
   &.size--medium {
-    .vxe-header--column,
-    .vxe-body--column,
-    .vxe-footer--column {
-      &.col--ellipsis {
-        @extend %MediumColumnHeight;
-        & > .vxe-cell {
-          max-height: var(--vxe-ui-table-row-height-medium);
-        }
-      }
-    }
     .vxe-cell--checkbox {
       font-size: var(--vxe-checkbox-font-size-medium);
     }
@@ -1650,16 +1779,6 @@
     }
   }
   &.size--small {
-    .vxe-header--column,
-    .vxe-body--column,
-    .vxe-footer--column {
-      &.col--ellipsis {
-        @extend %SmallColumnHeight;
-        & > .vxe-cell {
-          max-height: var(--vxe-ui-table-row-height-small);
-        }
-      }
-    }
     .vxe-cell--checkbox {
       font-size: var(--vxe-checkbox-font-size-small);
     }
@@ -1668,16 +1787,6 @@
     }
   }
   &.size--mini {
-    .vxe-header--column,
-    .vxe-body--column,
-    .vxe-footer--column {
-      &.col--ellipsis {
-        @extend %MiniColumnHeight;
-        & > .vxe-cell {
-          max-height: var(--vxe-ui-table-row-height-mini);
-        }
-      }
-    }
     .vxe-cell--checkbox {
       font-size: var(--vxe-checkbox-font-size-mini);
     }
@@ -1923,9 +2032,6 @@
     }
     .vxe-body--column {
       padding: 0;
-      &.col--active {
-        padding: 0;
-      }
     }
   }
 }
@@ -1951,17 +2057,3 @@ div.vxe-table--tooltip-wrapper {
     outline: 0;
   }
 }
-
-.vxe-footer--column {
-  &.col--ellipsis {
-    & > .vxe-cell {
-      display: flex;
-      align-items: center;
-      .vxe-cell--item {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-    }
-  }
-}