vxe-table 4.10.6-beta.8 → 4.10.6

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;
@@ -57,6 +41,10 @@
   width: 100%;
   height: 100%;
   scrollbar-width: none;
+  -ms-overflow-style: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
 }
 .vxe-table--header-inner-wrapper,
 .vxe-table--footer-inner-wrapper {
@@ -87,44 +75,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,
@@ -138,6 +94,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,
@@ -163,8 +155,8 @@
   .vxe-default-input,
   .vxe-default-textarea,
   .vxe-default-select {
+    font-family: var(--vxe-ui-font-family);
     outline: 0;
-    padding: 0 2px;
     color: var(--vxe-ui-font-color);
     border-radius: var(--vxe-ui-border-radius);
     border: 1px solid var(--vxe-ui-input-border-color);
@@ -194,11 +186,9 @@
     }
   }
   .vxe-default-textarea {
+    font-size: 1em;
     resize: none;
     vertical-align: middle;
-    &:not([rows]) {
-      height: var(--vxe-ui-input-height-default);
-    }
   }
   & > .vxe-input > .vxe-input--inner,
   & > .vxe-textarea > .vxe-textarea--inner {
@@ -221,8 +211,31 @@
 }
 .vxe-body--column {
   &.col--vertical-top {
-    & > .vxe-cell {
-      height: 100%;
+    &.col--active {
+      & > .vxe-cell {
+        & > .vxe-cell--wrapper {
+          height: 100%;
+          & > .vxe-default-textarea {
+            height: 100%;
+          }
+        }
+      }
+    }
+  }
+}
+/*行高*/
+.vxe-table {
+  &:not([data-calc-row]) {
+    .vxe-body--column {
+      &.col--vertical-top {
+        &:not(.col--active) {
+          & > .vxe-cell {
+            & > .vxe-cell--wrapper {
+              min-height: 100%;
+            }
+          }
+        }
+      }
     }
   }
 }
@@ -232,19 +245,19 @@
 .vxe-table--cell-extend-area,
 .vxe-table--cell-active-area,
 .vxe-table--cell-copy-area,
-.vxe-table--cell-status {
+.vxe-table--cell-col-status-area,
+.vxe-table--cell-row-status-area {
   display: none;
   position: absolute;
   pointer-events: none;
   z-index: 1;
 }
 
-.vxe-table--cell-status {
-  top: 0;
-  left: 0;
-  width: var(--vxe-ui-table-cell-area-status-border-width);
-  height: 0;
-  background-color:  var(--vxe-ui-font-primary-color);
+.vxe-table--header-wrapper {
+  .vxe-table--cell-col-status-area {
+    top: 0;
+    height: 100%;
+  }
 }
 
 .vxe-table--fixed-left-wrapper,
@@ -253,7 +266,9 @@
   .vxe-table--cell-main-area,
   .vxe-table--cell-extend-area,
   .vxe-table--cell-active-area,
-  .vxe-table--cell-copy-area {
+  .vxe-table--cell-copy-area,
+  .vxe-table--cell-col-status-area,
+  .vxe-table--cell-row-status-area  {
     z-index: 2;
   }
 }
@@ -319,6 +334,10 @@
   .vxe-table--cell-extend-area {
     border: var(--vxe-ui-table-cell-extend-area-border-width) solid var(--vxe-ui-table-cell-extend-area-border-color);
   }
+  .vxe-table--cell-col-status-area,
+  .vxe-table--cell-row-status-area {
+    background-color: var(--vxe-ui-table-checkbox-range-background-color);
+  }
 }
 
 @keyframes moveCopyCellBorder {
@@ -446,40 +465,27 @@
 
 /*列宽*/
 .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--layout-wrapper {
-        & > .vxe-table--scroll-y-virtual {
-          .vxe-table--scroll-y-handle {
-            overflow-y: scroll;
-          }
-        }
-      }
-    }
-  }
   &.is--loading {
     & > .vxe-table--scroll-x-virtual {
       visibility: hidden;
@@ -521,7 +527,7 @@
   }
   .vxe-table--scroll-x-handle {
     overflow-y: hidden;
-    overflow-x: auto;
+    overflow-x: scroll;
     height: 18px;
   }
   .vxe-table--scroll-x-wrapper {
@@ -535,7 +541,7 @@
     top: 0;
   }
   .vxe-table--scroll-y-handle {
-    overflow-y: auto;
+    overflow-y: scroll;
     overflow-x: hidden;
     width: 18px;
     height: 100%;
@@ -612,11 +618,13 @@
 .vxe-table {
   .vxe-table--header-wrapper {
     color: var(--vxe-ui-table-header-font-color);
-    .vxe-table--header-border-line {
+    &::after {
+      content: "";
       position: absolute;
       left: 0;
       bottom: 0;
       height: 0;
+      width: 100%;
       border-bottom: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
     }
   }
@@ -722,43 +730,66 @@
   .vxe-cell-title-suffix-icon {
     cursor: help;
   }
-  .vxe-resizable {
+}
+
+.vxe-cell--col-resizable {
+  position: absolute;
+  right: -0.3em;
+  bottom: 0;
+  width: 0.6em;
+  height: 100%;
+  text-align: center;
+  z-index: 1;
+  cursor: col-resize;
+  &.is--line {
+    &:before,
+    &:after {
+      content: "";
+      display: inline-block;
+      vertical-align: middle;
+    }
+    &:before {
+      width: 1px;
+      height: 50%;
+      background-color: var(--vxe-ui-table-resizable-line-color);
+    }
+    &:after {
+      width: 0;
+      height: 100%;
+    }
+  }
+}
+.vxe-table--fixed-right-wrapper {
+  .vxe-cell--col-resizable {
+    right: auto;
+    left: -0.3em;
+  }
+}
+
+.vxe-body--column {
+  .vxe-cell--row-resizable {
     position: absolute;
-    right: -7px;
-    bottom: 0;
-    width: 14px;
-    height: 100%;
+    left: 0;
+    bottom: -0.4em;
+    height: 0.8em;
+    width: 100%;
     text-align: center;
     z-index: 1;
-    cursor: col-resize;
-    &.is--line {
-      &:before,
-      &:after {
-        content: "";
-        display: inline-block;
-        vertical-align: middle;
-      }
-      &:before {
-        width: 1px;
-        height: 50%;
-        background-color: var(--vxe-ui-table-resizable-line-color);
-      }
-      &:after {
-        width: 0;
-        height: 100%;
-      }
-    }
+    cursor: row-resize;
   }
 }
-.vxe-table--fixed-right-wrapper {
-  .vxe-header--column {
-    .vxe-resizable {
-      right: auto;
-      left: -7px;
+.vxe-body--row {
+  &:last-child {
+    .vxe-body--column {
+      .vxe-cell--row-resizable {
+        height: 0.4em;
+        bottom: -0px;
+      }
     }
   }
 }
 
+
 /*table*/
 .vxe-table--render-default {
   position: relative;
@@ -868,7 +899,7 @@
   //     }
   //   }
   // }
-  &.drag--resize {
+  &.col-drag--resize {
     .vxe-table--main-wrapper,
     .vxe-table--fixed-left-wrapper,
     .vxe-table--fixed-right-wrapper {
@@ -877,6 +908,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,
@@ -945,19 +985,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 {
@@ -972,9 +999,15 @@
     }
     &.col--center {
       text-align: center;
+      & > .vxe-cell {
+        justify-content: center;
+      }
     }
     &.col--right {
       text-align: right;
+      & > .vxe-cell {
+        justify-content: right;
+      }
     }
   }
   // &.is--tree-line {
@@ -1012,16 +1045,6 @@
   &.border--full,
   &.border--outer,
   &.border--inner {
-    .vxe-table--scroll-y-top-corner {
-      &::before {
-        border-width: 0 var(--vxe-ui-table-border-width) var(--vxe-ui-table-border-width) var(--vxe-ui-table-border-width);
-      }
-    }
-    .vxe-table--scroll-y-bottom-corner {
-      &::before {
-        border-width: 0 var(--vxe-ui-table-border-width) 0 var(--vxe-ui-table-border-width);
-      }
-    }
     .vxe-table--scroll-y-top-corner,
     .vxe-table--scroll-y-bottom-corner {
       &::before {
@@ -1032,17 +1055,14 @@
         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,
-      .vxe-table--scroll-y-bottom-corner {
-        &::before {
-          width: calc(100% + 1px);
-          left: -1px;
-        }
+    .vxe-table--scroll-y-top-corner {
+      &::before {
+        border-bottom-width: var(--vxe-ui-table-border-width);
       }
     }
     .vxe-table--scroll-y-bottom-corner {
@@ -1095,6 +1115,27 @@
   }
   &.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 {
@@ -1156,8 +1197,10 @@
     .vxe-table--border-line {
       display: none;
     }
-    .vxe-table--header-border-line {
-      display: none;
+    .vxe-table--header-wrapper {
+      &::after {
+        display: none;
+      }
     }
   }
   
@@ -1170,8 +1213,13 @@
     .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-default-textarea {
+            padding: var(--vxe-ui-table-cell-padding-medium);
+          }
+        }
       }
     }
     .vxe-cell {
@@ -1196,8 +1244,13 @@
     .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-default-textarea {
+            padding: var(--vxe-ui-table-cell-padding-small);
+          }
+        }
       }
     }
     .vxe-cell {
@@ -1222,8 +1275,13 @@
     .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-default-textarea {
+            padding: var(--vxe-ui-table-cell-padding-mini);
+          }
+        }
       }
     }
     .vxe-cell {
@@ -1240,21 +1298,19 @@
     }
   }
 
-  &.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-default-textarea {
+          padding: var(--vxe-ui-table-cell-padding-default);
+        }
+      }
     }
   }
+  
   .vxe-cell {
     white-space: pre-line;
     word-break: break-all;
@@ -1347,33 +1403,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;
     }
   }
 
@@ -1412,7 +1495,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);
@@ -1446,6 +1529,8 @@
     display: block;
     padding-left: 1.5em;
   }
+
+  /*单元格高度*/
   .vxe-body--column {
     &.col--ellipsis {
       & > .vxe-cell {
@@ -1456,6 +1541,61 @@
         }
       }
     }
+    &.col--cs-height,
+    &.col--rs-height,
+    &.col--auto-height {
+      overflow: hidden;
+      & > .vxe-cell {
+        overflow: hidden;
+      }
+    }
+    & > .vxe-cell {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+  }
+  /*溢出列*/
+  .vxe-header--column,
+  .vxe-body--column,
+  .vxe-footer--column {
+    &:not(.col--active) {
+      &.col--ellipsis {
+        & > .vxe-cell {
+          overflow: hidden;
+          & > .vxe-cell--wrapper {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+      }
+      &.vxe-tree-cell,
+      &.col--vertical-top {
+        & > .vxe-cell {
+          & > .vxe-cell--wrapper {
+            white-space: pre-line;
+          }
+        }
+      }
+    }
+  }
+  .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;
+    }
   }
 
   /*展开行*/
@@ -1506,28 +1646,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%;
@@ -1699,40 +1817,7 @@
     white-space: nowrap;
   }
 
-  /*溢出列*/
-  .vxe-header--column,
-  .vxe-body--column,
-  .vxe-footer--column {
-    &.col--ellipsis {
-      @extend %DefaultColumnHeight;
-      &:not(.col--active) {
-        & > .vxe-cell {
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-        &.col--vertical-top {
-          & > .vxe-cell {
-            white-space: pre-line;
-          }
-        }
-      }
-      & > .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);
     }
@@ -1741,16 +1826,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);
     }
@@ -1759,16 +1834,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);
     }
@@ -2014,9 +2079,6 @@
     }
     .vxe-body--column {
       padding: 0;
-      &.col--active {
-        padding: 0;
-      }
     }
   }
 }
@@ -2042,17 +2104,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;
-      }
-    }
-  }
-}