vxe-table 4.17.0-beta.9 → 4.17.0

package/packages/table/module/menu/hook.ts

@@ -176,7 +176,7 @@ hooks.add('tableMenuModule', {
           }
           if (internalData._keyCtx) {
             const type = 'body'
-            const params: any = { type, $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt, keyboard: true, columns: visibleColumn.slice(0), $event: evnt }
+            const params: any = { source: 'table', type, $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt, keyboard: true, columns: visibleColumn.slice(0), $event: evnt }
             // 如果开启单元格区域
             if (mouseConfig && mouseOpts.area) {
               const activeArea = $xeTable.getActiveCellArea()
@@ -203,7 +203,7 @@ hooks.add('tableMenuModule', {
               // target=td|th，直接向上找 table 去匹配即可
               return target.parentNode.parentNode.parentNode.getAttribute('xid') === xID
             })
-            const params: any = { type: layout, $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt, columns: visibleColumn.slice(0), $event: evnt }
+            const params: any = { source: 'table', type: layout, $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt, columns: visibleColumn.slice(0), $event: evnt }
             if (columnTargetNode.flag) {
               const cell = columnTargetNode.targetElem
               const columnNodeRest = $xeTable.getColumnNode(cell)

package/packages/table/src/body.ts

@@ -11,6 +11,7 @@ import type { VxeTablePrivateMethods, VxeTableConstructor, VxeTableDefines, VxeC
 
 const { getI18n, renderer, renderEmptyElement } = VxeUI
 
+const sourceType = 'table'
 const renderType = 'body'
 
 export default defineVxeComponent({
@@ -176,6 +177,7 @@ export default defineVxeComponent({
         $columnIndex,
         _columnIndex,
         fixed: fixedType,
+        source: sourceType,
         type: renderType,
         isHidden: !!fixedHiddenColumn,
         level: rowLevel,
@@ -627,6 +629,7 @@ export default defineVxeComponent({
               $columnIndex,
               _columnIndex,
               fixed: fixedType,
+              source: sourceType,
               type: renderType,
               level: rowLevel,
               row,

package/packages/table/src/footer.ts

@@ -9,6 +9,7 @@ import type { VxeTablePrivateMethods, VxeTableConstructor, VxeTableMethods, VxeT
 
 const { renderer, renderEmptyElement } = VxeUI
 
+const sourceType = 'table'
 const renderType = 'footer'
 
 export default defineVxeComponent({
@@ -100,6 +101,7 @@ export default defineVxeComponent({
           itemIndex,
           items: row,
           fixed: fixedType,
+          source: sourceType,
           type: renderType,
           data: footerTableData
         }

package/packages/table/src/header.ts

@@ -10,6 +10,7 @@ import type { VxeTablePrivateMethods, VxeTableConstructor, VxeTableMethods, VxeT
 
 const { renderer, renderEmptyElement } = VxeUI
 
+const sourceType = 'table'
 const renderType = 'header'
 
 function getColumnFirstChild (column: VxeTableDefines.ColumnInfo): VxeTableDefines.ColumnInfo {
@@ -125,6 +126,7 @@ export default defineVxeComponent({
           _columnIndex,
           firstFilterOption: firstFilterOption as VxeTableDefines.FilterOption,
           fixed: fixedType,
+          source: sourceType,
           type: renderType,
           isHidden: fixedHiddenColumn,
           hasFilter
@@ -316,6 +318,7 @@ export default defineVxeComponent({
           _columnIndex,
           option: firstFilterOption as VxeTableDefines.FilterOption,
           fixed: fixedType,
+          source: sourceType,
           type: renderType,
           isHidden: fixedHiddenColumn,
           hasFilter

package/packages/table/src/table.ts

@@ -463,14 +463,24 @@ export default defineVxeComponent({
       return Object.assign({}, getConfig().table.scrollbarConfig, props.scrollbarConfig)
     })
 
-    const computeScrollbarXToTop = computed(() => {
+    const computeScrollbarXOpts = computed(() => {
       const scrollbarOpts = computeScrollbarOpts.value
-      return !!(scrollbarOpts.x && scrollbarOpts.x.position === 'top')
+      return Object.assign({}, scrollbarOpts.x, props.scrollbarConfig?.x || {})
     })
 
-    const computeScrollbarYToLeft = computed(() => {
+    const computeScrollbarYOpts = computed(() => {
       const scrollbarOpts = computeScrollbarOpts.value
-      return !!(scrollbarOpts.y && scrollbarOpts.y.position === 'left')
+      return Object.assign({}, scrollbarOpts.y, props.scrollbarConfig?.y || {})
+    })
+
+    const computeScrollbarXToTop = computed(() => {
+      const scrollbarXOpts = computeScrollbarXOpts.value
+      return scrollbarXOpts.position === 'top'
+    })
+
+    const computeScrollbarYToLeft = computed(() => {
+      const scrollbarYOpts = computeScrollbarYOpts.value
+      return scrollbarYOpts.position === 'left'
     })
 
     const computeScrollYThreshold = computed(() => {
@@ -884,6 +894,8 @@ export default defineVxeComponent({
       computeVirtualXOpts,
       computeVirtualYOpts,
       computeScrollbarOpts,
+      computeScrollbarXOpts,
+      computeScrollbarYOpts,
       computeScrollbarXToTop,
       computeScrollbarYToLeft,
       computeColumnOpts,
@@ -2470,7 +2482,6 @@ export default defineVxeComponent({
       }
 
       const scrollbarXConf = scrollbarOpts.x || {}
-      const scrollbarXToTop = computeScrollbarXToTop.value
       const scrollbarYConf = scrollbarOpts.y || {}
       const scrollbarYToLeft = computeScrollbarYToLeft.value
 
@@ -2522,16 +2533,28 @@ export default defineVxeComponent({
       }
       const xWrapperEl = refScrollXWrapperElem.value
       if (xWrapperEl) {
-        xWrapperEl.style.left = scrollbarXToTop ? `${osbWidth}px` : ''
         xWrapperEl.style.width = `${el.clientWidth - osbWidth}px`
+        if (scrollbarYToLeft) {
+          xWrapperEl.style.left = `${osbWidth}px`
+        } else {
+          xWrapperEl.style.left = ''
+        }
       }
       if (xLeftCornerEl) {
-        xLeftCornerEl.style.width = scrollbarXToTop ? `${osbWidth}px` : ''
-        xLeftCornerEl.style.display = scrollbarXToTop ? (overflowX && osbHeight ? 'block' : '') : ''
+        if (scrollbarYToLeft) {
+          xLeftCornerEl.style.width = `${osbWidth}px`
+          xLeftCornerEl.style.display = overflowY && osbWidth ? 'block' : ''
+        } else {
+          xLeftCornerEl.style.display = ''
+        }
       }
       if (xRightCornerEl) {
-        xRightCornerEl.style.width = scrollbarXToTop ? '' : `${osbWidth}px`
-        xRightCornerEl.style.display = scrollbarXToTop ? '' : (xScrollbarVisible === 'visible' ? 'block' : '')
+        if (scrollbarYToLeft) {
+          xRightCornerEl.style.display = ''
+        } else {
+          xRightCornerEl.style.width = `${osbWidth}px`
+          xRightCornerEl.style.display = xScrollbarVisible === 'visible' ? 'block' : ''
+        }
       }
 
       const scrollYVirtualEl = refScrollYVirtualElem.value
@@ -4149,8 +4172,10 @@ export default defineVxeComponent({
         updateAfterDataIndex()
         return nextTick()
       }).then(() => {
+        updateTreeLineStyle()
         return handleLazyRecalculate(true, true, true)
       }).then(() => {
+        updateTreeLineStyle()
         setTimeout(() => {
           $xeTable.updateCellAreas()
         }, 30)
@@ -4523,6 +4548,9 @@ export default defineVxeComponent({
       }
     }
 
+    /**
+     * 更新展开行样式
+     */
     const updateRowExpandStyle = () => {
       const { expandColumn, scrollYLoad, scrollYTop, isScrollYBig } = reactData
       const expandOpts = computeExpandOpts.value
@@ -4578,6 +4606,13 @@ export default defineVxeComponent({
       }
     }
 
+    /**
+     * 更新树连接线样式
+     */
+    const updateTreeLineStyle = () => {
+      // 待优化
+    }
+
     const handleRowExpandScroll = () => {
       const { elemStore } = internalData
       const rowExpandEl = refRowExpandElem.value
@@ -11923,14 +11958,24 @@ export default defineVxeComponent({
      * 如果宽度足够情况下，则不需要渲染固定列
      * @param {String} fixedType 固定列类型
      */
-    const renderFixed = (fixedType: 'left' | 'right') => {
+    const renderViewFixed = (fixedType: 'left' | 'right') => {
       const { showHeader, showFooter } = props
       const { tableData, tableColumn, tableGroupColumn, columnStore, footerTableData } = reactData
+      const scrollbarOpts = computeScrollbarOpts.value
+      const scrollbarXOpts = computeScrollbarXOpts.value
+      const scrollbarYOpts = computeScrollbarYOpts.value
+      const { overscrollBehavior: overscrollXBehavior } = scrollbarXOpts
+      const { overscrollBehavior: overscrollYBehavior } = scrollbarYOpts
       const isFixedLeft = fixedType === 'left'
       const fixedColumn = isFixedLeft ? columnStore.leftList : columnStore.rightList
+      const osXBehavior = XEUtils.eqNull(overscrollXBehavior) ? scrollbarOpts.overscrollBehavior : overscrollXBehavior
+      const osYBehavior = XEUtils.eqNull(overscrollYBehavior) ? scrollbarOpts.overscrollBehavior : overscrollYBehavior
       return h('div', {
         ref: isFixedLeft ? refLeftContainer : refRightContainer,
-        class: `vxe-table--fixed-${fixedType}-wrapper`
+        class: [`vxe-table--fixed-${fixedType}-wrapper`, {
+          [`x-ob--${osXBehavior}`]: osXBehavior,
+          [`y-ob--${osYBehavior}`]: osYBehavior
+        }]
       }, [
         showHeader
           ? h(TableHeaderComponent, {
@@ -12122,6 +12167,7 @@ export default defineVxeComponent({
             $columnIndex,
             _columnIndex,
             fixed: '',
+            source: 'table',
             type: 'body',
             level: rowLevel,
             rowid,
@@ -12227,11 +12273,21 @@ export default defineVxeComponent({
     const renderViewport = () => {
       const { showHeader, showFooter } = props
       const { overflowX, tableData, tableColumn, tableGroupColumn, footerTableData, columnStore } = reactData
+      const scrollbarOpts = computeScrollbarOpts.value
+      const scrollbarXOpts = computeScrollbarXOpts.value
+      const scrollbarYOpts = computeScrollbarYOpts.value
+      const { overscrollBehavior: overscrollXBehavior } = scrollbarXOpts
+      const { overscrollBehavior: overscrollYBehavior } = scrollbarYOpts
       const { leftList, rightList } = columnStore
+      const osXBehavior = XEUtils.eqNull(overscrollXBehavior) ? scrollbarOpts.overscrollBehavior : overscrollXBehavior
+      const osYBehavior = XEUtils.eqNull(overscrollYBehavior) ? scrollbarOpts.overscrollBehavior : overscrollYBehavior
 
       return h('div', {
         ref: refTableViewportElem,
-        class: 'vxe-table--viewport-wrapper'
+        class: ['vxe-table--viewport-wrapper', {
+          [`x-ob--${osXBehavior}`]: osXBehavior,
+          [`y-ob--${osYBehavior}`]: osYBehavior
+        }]
       }, [
         h('div', {
           class: 'vxe-table--main-wrapper'
@@ -12269,8 +12325,8 @@ export default defineVxeComponent({
         h('div', {
           class: 'vxe-table--fixed-wrapper'
         }, [
-          leftList && leftList.length && overflowX ? renderFixed('left') : renderEmptyElement($xeTable),
-          rightList && rightList.length && overflowX ? renderFixed('right') : renderEmptyElement($xeTable)
+          leftList && leftList.length && overflowX ? renderViewFixed('left') : renderEmptyElement($xeTable),
+          rightList && rightList.length && overflowX ? renderViewFixed('right') : renderEmptyElement($xeTable)
         ]),
         renderRowExpandedVNs()
       ])

package/packages/table/src/util.ts

@@ -638,7 +638,7 @@ const lineOffsetSizes = {
   large: 0
 }
 
-function countTreeExpand (prevRow: any, params: VxeTableDefines.CellRenderBodyParams) {
+function countTreeExpandSize (prevRow: any, params: VxeTableDefines.CellRenderBodyParams) {
   let count = 1
   if (!prevRow) {
     return count
@@ -655,7 +655,7 @@ function countTreeExpand (prevRow: any, params: VxeTableDefines.CellRenderBodyPa
   const rowChildren = prevRow[transform ? mapChildrenField : childrenField]
   if (rowChildren && treeExpandedFlag && treeExpandedMaps[getRowid($table, prevRow)]) {
     for (let index = 0; index < rowChildren.length; index++) {
-      count += countTreeExpand(rowChildren[index], params)
+      count += countTreeExpandSize(rowChildren[index], params)
     }
   }
   return count
@@ -688,7 +688,7 @@ export function calcTreeLine (params: VxeTableDefines.CellRenderBodyParams, prev
   const currCellHeight = rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight
   let expandSize = 1
   if (prevRow) {
-    expandSize = countTreeExpand(prevRow, params)
+    expandSize = countTreeExpandSize(prevRow, params)
   }
   let cellHeight = currCellHeight
   const vnHeight = rowRest.height

package/styles/components/table.scss

@@ -74,6 +74,34 @@ $btnThemeList: (
   position: relative;
   overflow: hidden;
   flex-grow: 1;
+  &.x-ob--contain {
+    & > .vxe-table--main-wrapper {
+      & > .vxe-table--header-wrapper {
+        & > .vxe-table--header-inner-wrapper {
+          overscroll-behavior-x: contain;
+        }
+      }
+      & > .vxe-table--body-wrapper {
+        & > .vxe-table--body-inner-wrapper {
+          overscroll-behavior-x: contain;
+        }
+      }
+      & > .vxe-table--footer-wrapper {
+        & > .vxe-table--footer-inner-wrapper {
+          overscroll-behavior-x: contain;
+        }
+      }
+    }
+  }
+  &.y-ob--contain {
+    & > .vxe-table--main-wrapper {
+      & > .vxe-table--body-wrapper {
+        & > .vxe-table--body-inner-wrapper {
+          overscroll-behavior-y: contain;
+        }
+      }
+    }
+  }
 }
 .vxe-table--header-wrapper,
 .vxe-table--body-wrapper,
@@ -640,6 +668,9 @@ $btnThemeList: (
     left: 0;
     bottom: 0;
   }
+  .vxe-table--scroll-x-wrapper {
+    height: 100%;
+  }
   .vxe-table--scroll-x-handle {
     overflow-y: hidden;
     overflow-x: scroll;
@@ -1702,6 +1733,13 @@ $btnThemeList: (
     transition: 0.3s box-shadow;
     outline: 0;
     background-color: var(--vxe-ui-layout-background-color);
+    &.y-ob--contain {
+      & > .vxe-table--body-wrapper {
+        & > .vxe-table--body-inner-wrapper {
+          overscroll-behavior-y: contain;
+        }
+      }
+    }
     .vxe-table--body-wrapper {
       outline: 0;
     }