vxe-table 3.12.8 → 3.12.10-beta.0

package/packages/table/src/util.ts

@@ -3,6 +3,8 @@ import { ColumnInfo } from './columnInfo'
 import { isScale, isPx } from '../../ui/src/dom'
 import { warnLog, errLog } from '../../ui/src/log'
 
+import type { VxeTableDefines, VxeTableConstructor, TableReactData } from '../../../types'
+
 const getAllConvertColumns = (columns: any, parentColumn?: any) => {
   const result: any[] = []
   columns.forEach((column: any) => {
@@ -66,12 +68,6 @@ export const convertHeaderColumnToRows = (originColumns: any) => {
   return rows
 }
 
-const lineOffsetSizes: any = {
-  mini: 3,
-  small: 2,
-  medium: 1
-}
-
 export function restoreScrollLocation ($xeTable: any, scrollLeft: any, scrollTop: any) {
   const internalData = $xeTable
 
@@ -81,10 +77,13 @@ export function restoreScrollLocation ($xeTable: any, scrollLeft: any, scrollTop
       internalData.lastScrollLeft = 0
       internalData.lastScrollTop = 0
 
+      internalData.intoRunScroll = false
       internalData.inVirtualScroll = false
+      internalData.inWheelScroll = false
+      internalData.inHeaderScroll = false
       internalData.inBodyScroll = false
       internalData.inFooterScroll = false
-      internalData.bodyScrollType = ''
+      internalData.scrollRenderType = ''
       // 还原滚动状态
       return $xeTable.scrollTo(scrollLeft, scrollTop)
     }
@@ -233,8 +232,8 @@ export function getColReMinWidth (params: any) {
   }
   // 如果设置最小宽
   if (colMinWidth) {
-    const { tableBody } = $table.$refs
-    const bodyElem = tableBody ? tableBody.$el : null
+    const { refTableBody } = $table.$refs
+    const bodyElem = refTableBody ? refTableBody.$el : null
     if (bodyElem) {
       if (isScale(colMinWidth)) {
         const bodyWidth = bodyElem.clientWidth - 1
@@ -248,15 +247,22 @@ export function getColReMinWidth (params: any) {
   return mWidth
 }
 
-function countTreeExpand (prevRow: any, params: any) {
+const lineOffsetSizes: Record<string, any> = {
+  mini: 3,
+  small: 2,
+  medium: 1
+}
+
+function countTreeExpand (prevRow: any, params: VxeTableDefines.CellRenderBodyParams) {
   let count = 1
   if (!prevRow) {
     return count
   }
   const { $table } = params
-  const { treeOpts } = $table
+  const treeOpts = $table.computeTreeOpts
+  const { transform, mapChildrenField } = treeOpts
   const childrenField = treeOpts.children || treeOpts.childrenField
-  const rowChildren = prevRow[childrenField]
+  const rowChildren = prevRow[transform ? mapChildrenField : childrenField]
   if (rowChildren && $table.isTreeExpandByRow(prevRow)) {
     for (let index = 0; index < rowChildren.length; index++) {
       count += countTreeExpand(rowChildren[index], params)
@@ -265,18 +271,22 @@ function countTreeExpand (prevRow: any, params: any) {
   return count
 }
 
-export function getOffsetSize ($xetable: any) {
-  const vSize = $xetable.computeSize
-  return lineOffsetSizes[vSize] || 0
+export function getOffsetSize ($xeTable: VxeTableConstructor) {
+  const vSize = $xeTable.computeSize
+  if (vSize) {
+    return lineOffsetSizes[vSize] || 0
+  }
+  return 0
 }
 
-export function calcTreeLine (params: any, items: any, rIndex: any) {
+export function calcTreeLine (params: VxeTableDefines.CellRenderBodyParams, prevRow: any) {
   const { $table } = params
+  const tableReactData = $table as unknown as TableReactData
   let expandSize = 1
-  if (rIndex) {
-    expandSize = countTreeExpand(items[rIndex - 1], params)
+  if (prevRow) {
+    expandSize = countTreeExpand(prevRow, params)
   }
-  return $table.rowHeight * expandSize - (rIndex ? 1 : (12 - getOffsetSize($table)))
+  return tableReactData.rowHeight * expandSize - (prevRow ? 1 : (12 - getOffsetSize($table)))
 }
 
 export function mergeBodyMethod (mergeList: any, _rowIndex: any, _columnIndex: any) {
@@ -301,6 +311,13 @@ export function setCellValue (row: any, column:any, value: any) {
   return XEUtils.set(row, column.field, value)
 }
 
+export function getRefElem (refEl: any) {
+  if (refEl) {
+    return (refEl.$el || refEl) as HTMLElement
+  }
+  return null
+}
+
 export function clearTableDefaultStatus (_vm: any) {
   _vm.initStatus = false
   _vm.clearSort()
@@ -346,12 +363,12 @@ export function rowToVisible ($xeTable: any, row: any) {
   const internalData = $xeTable
   const tableProps = $xeTable
   const { showOverflow } = tableProps
-  const tableBody: any = $xeTable.$refs.tableBody
+  const refTableBody: any = $xeTable.$refs.refTableBody
   const { columnStore, scrollYLoad } = reactData
   const { afterFullData, scrollYStore, fullAllDataRowIdData } = internalData
   const { rowHeight } = scrollYStore
   const { leftList, rightList } = columnStore
-  const bodyElem = tableBody ? tableBody.$el as HTMLDivElement : null
+  const bodyElem = refTableBody ? refTableBody.$el as HTMLDivElement : null
   const rowid = getRowid($xeTable, row)
   let offsetFixedLeft = 0
   leftList.forEach((item: any) => {
@@ -405,9 +422,9 @@ export function rowToVisible ($xeTable: any, row: any) {
 
 export function colToVisible ($xeTable: any, column: any, row?: any) {
   const { columnStore, scrollXLoad, visibleColumn } = $xeTable
-  const tableBody: any = $xeTable.$refs.tableBody
+  const refTableBody: any = $xeTable.$refs.refTableBody
   const { leftList, rightList } = columnStore
-  const bodyElem = tableBody ? tableBody.$el : null
+  const bodyElem = refTableBody ? refTableBody.$el : null
   if (column.fixed) {
     return Promise.resolve()
   }

package/packages/ui/index.ts

@@ -162,7 +162,13 @@ VxeUI.setConfig({
     areaConfig: {
       autoClear: true,
       selectCellByHeader: true,
-      selectCellByBody: true
+      selectCellByBody: true,
+      extendDirection: {
+        top: true,
+        left: true,
+        bottom: true,
+        right: true
+      }
     },
     clipConfig: {
       isCopy: true,
@@ -173,15 +179,19 @@ VxeUI.setConfig({
       isFind: true,
       isReplace: true
     },
-    scrollX: {
+    virtualXConfig: {
       // enabled: false,
       gt: 60
       // oSize: 0
     },
-    scrollY: {
+    virtualYConfig: {
       // enabled: false,
       gt: 100
       // oSize: 0
+    },
+    scrollbarConfig: {
+      width: 10,
+      height: 10
     }
   },
   // export: {

package/styles/components/table.scss

@@ -32,17 +32,38 @@
   border: 0;
 }
 .vxe-table--render-wrapper {
+  display: flex;
+  flex-direction: row;
   background-color: var(--vxe-ui-layout-background-color);
 }
-.vxe-table--body-wrapper {
-  scroll-behavior: auto;
+.vxe-table--viewport-wrapper {
+  position: relative;
+  overflow: hidden;
+  flex-grow: 1;
 }
+.vxe-table--header-wrapper,
 .vxe-table--body-wrapper,
+.vxe-table--footer-wrapper,
 .vxe-table--fixed-left-body-wrapper,
 .vxe-table--fixed-right-body-wrapper {
-  overflow-y: auto;
-  overflow-x: auto;
+  overflow: hidden;
   outline: 0;
+  scrollbar-width: none;
+}
+.vxe-table--header-inner-wrapper,
+.vxe-table--footer-inner-wrapper {
+  width: 100%;
+  height: 100% ;
+  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 {
@@ -435,6 +456,142 @@
   }
 }
 
+/*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--scroll-y-virtual {
+        visibility: hidden;
+      }
+    }
+  }
+  .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 {
+    visibility: hidden;
+    position: relative;
+    flex-shrink: 0;
+    z-index: 7;
+  }
+  .vxe-table--scroll-x-handle,
+  .vxe-table--scroll-y-handle,
+  .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 {
+    width: 100%;
+    left: 0;
+    bottom: 0;
+  }
+  .vxe-table--scroll-x-handle {
+    overflow-y: hidden;
+    overflow-x: auto;
+    height: 18px;
+  }
+  .vxe-table--scroll-y-virtual,
+  .vxe-table--scroll-y-handle {
+    height: 100%;
+    right: 0;
+    top: 0;
+  }
+  .vxe-table--scroll-y-handle {
+    overflow-y: auto;
+    overflow-x: hidden;
+    width: 18px;
+  }
+  .vxe-table--scroll-x-space {
+    height: 1px;
+  }
+  .vxe-table--scroll-y-space {
+    width: 1px;
+  }
+  .vxe-table--scroll-x-left-corner,
+  .vxe-table--scroll-x-right-corner,
+  .vxe-table--scroll-y-top-corner,
+  .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-right-corner {
+    bottom: 1px;
+    right: 1px;
+    width: 0;
+    height: 100%;
+    border-top-width: var(--vxe-ui-table-border-width);
+    border-left-width: var(--vxe-ui-table-border-width);
+  }
+  .vxe-table--scroll-y-top-corner,
+  .vxe-table--scroll-y-bottom-corner {
+    top: 0;
+    right: 0;
+    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);
+  }
+}
+
 /*header*/
 .vxe-table {
   .vxe-table--header-wrapper {
@@ -597,6 +754,7 @@
     background-color: var(--vxe-ui-layout-background-color);
   }
   .vxe-table--footer-wrapper {
+    margin-top: -1px;
     background-color: var(--vxe-ui-table-footer-background-color);
   }
   .vxe-table--header,
@@ -607,17 +765,10 @@
     border-collapse: separate;
     table-layout: fixed;
   }
-  .vxe-table--header-wrapper,
-  .vxe-table--footer-wrapper {
-    overflow-x: hidden;
-    overflow-y: hidden;
-    outline: 0;
-  }
   &:not(.is--empty) {
     &.is--footer {
       &.is--scroll-x {
         .vxe-table--body-wrapper {
-          overflow-x: scroll;
           outline: 0;
         }
       }
@@ -896,23 +1047,6 @@
       }
     }
   }
-  &.border--default,
-  &.border--full,
-  &.border--outer,
-  &.border--inner {
-    .vxe-table--header-wrapper {
-      .vxe-header--row {
-        &:last-child {
-          .vxe-header--gutter {
-            background-image: linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color));
-            background-repeat: no-repeat;
-            background-size: 100% var(--vxe-ui-table-border-width);
-            background-position: right bottom;
-          }
-        }
-      }
-    }
-  }
   &.border--inner,
   &.border--none {
     .vxe-table--header-wrapper {
@@ -1014,48 +1148,6 @@
       }
     }
   }
-  // 滚动条
-  .vxe-table--scroll-x-virtual,
-  .vxe-table--scroll-y-virtual {
-    position: absolute;
-    z-index: 7;
-    overflow: hidden;
-  }
-  .vxe-table--scroll-x-handle,
-  .vxe-table--scroll-y-handle {
-    position: absolute;
-    div {
-      display: block;
-    }
-  }
-  .vxe-table--scroll-x-virtual,
-  .vxe-table--scroll-x-handle {
-    width: 100%;
-    left: 0;
-    bottom: 0;
-  }
-  .vxe-table--scroll-x-handle {
-    overflow-y: hidden;
-    overflow-x: auto;
-    height: 18px;
-  }
-  .vxe-table--scroll-y-virtual,
-  .vxe-table--scroll-y-handle {
-    height: 100%;
-    right: 0;
-    top: 0;
-  }
-  .vxe-table--scroll-y-handle {
-    overflow-y: auto;
-    overflow-x: hidden;
-    width: 18px;
-  }
-  .vxe-table--scroll-x-space {
-    height: 1px;
-  }
-  .vxe-table--scroll-y-space {
-    width: 1px;
-  }
 
   &.is--padding {
     .vxe-body--column {
@@ -1105,7 +1197,6 @@
     outline: 0;
     background-color: var(--vxe-ui-layout-background-color);
     .vxe-table--body-wrapper {
-      overflow-x: hidden;
       outline: 0;
     }
   }
@@ -1141,6 +1232,7 @@
   .vxe-table--body-wrapper,
   .vxe-table--footer-wrapper {
     position: relative;
+    width: 100%;
     &.fixed-left--wrapper,
     &.fixed-right--wrapper {
       position: absolute;
@@ -1152,7 +1244,6 @@
     }
     &.fixed-right--wrapper {
       right: 0;
-      overflow-y: auto;
     }
   }
   .vxe-body--x-space {
@@ -1189,6 +1280,7 @@
       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);
     }
@@ -1855,9 +1947,7 @@ div.vxe-table--tooltip-wrapper {
 /*footer*/
 .vxe-table--footer-wrapper {
   color: var(--vxe-ui-table-footer-font-color);
-  margin-top: -1px;
   &.body--wrapper{
-    overflow-x: auto;
     outline: 0;
   }
 }