vxe-table 4.17.0-beta.9 → 4.17.1

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,
@@ -1586,7 +1598,7 @@ export default defineVxeComponent({
     }
 
     const calcTableHeight = (key: 'height' | 'minHeight' | 'maxHeight') => {
-      const { editConfig } = props
+      const { editConfig, editRules } = props
       const { parentHeight } = reactData
       let val = props[key]
       if (key === 'minHeight') {
@@ -1594,7 +1606,7 @@ export default defineVxeComponent({
         if (XEUtils.eqNull(val)) {
           if (eqEmptyValue(defMinHeight)) {
             // 编辑模式默认最小高度
-            if (isEnableConf(editConfig)) {
+            if (editRules && isEnableConf(editConfig)) {
               val = 144
             }
           } else {
@@ -2452,7 +2464,7 @@ export default defineVxeComponent({
       const { visibleColumn, tableHeight, elemStore, customHeight, customMinHeight, customMaxHeight, tHeaderHeight, tFooterHeight } = internalData
       const $xeGanttView = internalData.xeGanttView
       const el = refElem.value
-      if (!el || !el.clientHeight) {
+      if (!el || (internalData.tBodyHeight && !el.clientHeight)) {
         return
       }
       const containerList = ['main', 'left', 'right']
@@ -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
@@ -6992,14 +7027,40 @@ export default defineVxeComponent({
        * 获取表格的滚动状态
        */
       getScroll () {
-        const { scrollXLoad, scrollYLoad } = reactData
+        return $xeTable.getScrollData()
+      },
+      /**
+       * 获取表格的滚动数据
+       */
+      getScrollData () {
+        const { scrollXLoad, scrollYLoad, scrollbarHeight, scrollbarWidth } = reactData
         const { elemStore } = internalData
         const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
+        const scrollTop = bodyScrollElem ? bodyScrollElem.scrollTop : 0
+        const scrollLeft = bodyScrollElem ? bodyScrollElem.scrollLeft : 0
+        const clientHeight = bodyScrollElem ? bodyScrollElem.clientHeight : 0
+        const clientWidth = bodyScrollElem ? bodyScrollElem.clientWidth : 0
+        const scrollHeight = bodyScrollElem ? bodyScrollElem.scrollHeight : 0
+        const scrollWidth = bodyScrollElem ? bodyScrollElem.scrollWidth : 0
+        const isTop = scrollTop <= 0
+        const isBottom = scrollTop + clientHeight >= scrollHeight
+        const isLeft = scrollLeft <= 0
+        const isRight = scrollLeft + clientWidth >= scrollWidth
         return {
           virtualX: scrollXLoad,
           virtualY: scrollYLoad,
-          scrollTop: bodyScrollElem ? bodyScrollElem.scrollTop : 0,
-          scrollLeft: bodyScrollElem ? bodyScrollElem.scrollLeft : 0
+          isTop,
+          isBottom,
+          isLeft,
+          isRight,
+          scrollbarHeight,
+          scrollbarWidth,
+          scrollTop,
+          scrollLeft,
+          scrollHeight,
+          scrollWidth,
+          clientHeight,
+          clientWidth
         }
       },
       /**
@@ -7123,7 +7184,10 @@ export default defineVxeComponent({
         scrollYStore.visibleStartIndex = 0
         scrollYStore.endIndex = scrollYStore.visibleSize
         scrollYStore.visibleEndIndex = scrollYStore.visibleSize
+
         return nextTick().then(() => {
+          internalData.lastScrollLeft = 0
+          internalData.lastScrollTop = 0
           internalData.intoRunScroll = false
         })
       },
@@ -8329,7 +8393,7 @@ export default defineVxeComponent({
         const el = refElem.value
         if (el) {
           const parentElem = el.parentNode as HTMLElement
-          const parentPaddingSize = height === '100%' || height === 'auto' ? getPaddingTopBottomSize(parentElem) : 0
+          let parentPaddingSize = 0
           let parentWrapperHeight = 0
           if (parentElem) {
             if ($xeGantt && hasClass(parentElem, 'vxe-gantt--table-wrapper')) {
@@ -8338,6 +8402,7 @@ export default defineVxeComponent({
               parentWrapperHeight = $xeGrid.getParentHeight()
             } else {
               parentWrapperHeight = parentElem.clientHeight
+              parentPaddingSize = height === '100%' || height === 'auto' ? getPaddingTopBottomSize(parentElem) : 0
             }
           }
           return Math.floor(parentWrapperHeight - parentPaddingSize)
@@ -11369,12 +11434,11 @@ export default defineVxeComponent({
         const { scrollXLoad, scrollYLoad, expandColumn } = reactData
         const leftFixedWidth = computeLeftFixedWidth.value
         const rightFixedWidth = computeRightFixedWidth.value
-        if (!(leftFixedWidth || rightFixedWidth || expandColumn)) {
-          return
-        }
 
         const { elemStore, lastScrollTop, lastScrollLeft } = internalData
         const rowOpts = computeRowOpts.value
+        const scrollbarXOpts = computeScrollbarXOpts.value
+        const scrollbarYOpts = computeScrollbarYOpts.value
         const xHandleEl = refScrollXHandleElem.value
         const yHandleEl = refScrollYHandleElem.value
         const leftScrollElem = getRefElem(elemStore['left-body-scroll'])
@@ -11383,12 +11447,6 @@ export default defineVxeComponent({
         const footerScrollElem = getRefElem(elemStore['main-footer-scroll'])
         const rightScrollElem = getRefElem(elemStore['right-body-scroll'])
         const rowExpandEl = refRowExpandElem.value
-        if (!xHandleEl) {
-          return
-        }
-        if (!yHandleEl) {
-          return
-        }
         if (!bodyScrollElem) {
           return
         }
@@ -11405,7 +11463,19 @@ export default defineVxeComponent({
         const isRollX = scrollLeft !== lastScrollLeft
         const isRollY = scrollTop !== lastScrollTop
 
+        if (isRollX) {
+          // 如果禁用滚动
+          if (scrollbarXOpts.visible === 'hidden') {
+            evnt.preventDefault()
+            return
+          }
+        }
         if (isRollY) {
+          // 如果禁用滚动
+          if (scrollbarYOpts.visible === 'hidden') {
+            evnt.preventDefault()
+            return
+          }
           const isTopWheel = deltaTop < 0
           // 如果滚动位置已经是顶部或底部，则不需要触发
           if (isTopWheel ? currScrollTop <= 0 : currScrollTop >= bodyScrollElem.scrollHeight - bodyScrollElem.clientHeight) {
@@ -11413,9 +11483,14 @@ export default defineVxeComponent({
           }
         }
 
+        if (!(leftFixedWidth || rightFixedWidth || expandColumn)) {
+          return
+        }
+
         if (rowOpts.isHover || highlightHoverRow) {
           $xeTable.clearHoverRow()
         }
+
         // 用于鼠标纵向滚轮处理
         if (isRollX) {
           evnt.preventDefault()
@@ -11923,14 +11998,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`, `sx--${scrollbarXOpts.visible}`, `sy--${scrollbarYOpts.visible}`, {
+          [`x-ob--${osXBehavior}`]: osXBehavior,
+          [`y-ob--${osYBehavior}`]: osYBehavior
+        }]
       }, [
         showHeader
           ? h(TableHeaderComponent, {
@@ -12122,6 +12207,7 @@ export default defineVxeComponent({
             $columnIndex,
             _columnIndex,
             fixed: '',
+            source: 'table',
             type: 'body',
             level: rowLevel,
             rowid,
@@ -12227,14 +12313,24 @@ 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'
+          class: ['vxe-table--main-wrapper', `sx--${scrollbarXOpts.visible}`, `sy--${scrollbarYOpts.visible}`]
         }, [
           /**
            * 表头
@@ -12269,8 +12365,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()
       ])
@@ -12410,11 +12506,15 @@ export default defineVxeComponent({
         h('div', {
           key: 'tn',
           ref: refEmptyPlaceholder,
-          class: 'vxe-table--empty-placeholder'
+          class: 'vxe-table--empty-place-wrapper'
         }, [
           h('div', {
-            class: 'vxe-table--empty-content'
-          }, renderEmptyBody())
+            class: 'vxe-table--empty-placeholder'
+          }, [
+            h('div', {
+              class: 'vxe-table--empty-content'
+            }, renderEmptyBody())
+          ])
         ]),
         /**
          * 边框线
@@ -12727,6 +12827,18 @@ export default defineVxeComponent({
     watch(() => VxeUI.getLanguage(), () => {
       reLayoutFlag.value++
     })
+    watch(() => {
+      const scrollbarXOpts = computeScrollbarXOpts.value
+      return scrollbarXOpts.visible
+    }, () => {
+      reLayoutFlag.value++
+    })
+    watch(() => {
+      const scrollbarYOpts = computeScrollbarYOpts.value
+      return scrollbarYOpts.visible
+    }, () => {
+      reLayoutFlag.value++
+    })
     watch(reLayoutFlag, () => {
       $xeTable.recalculate(true)
     })

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
@@ -702,29 +702,40 @@ export function calcTreeLine (params: VxeTableDefines.CellRenderBodyParams, prev
 
 export function clearTableDefaultStatus ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
   const { props, internalData } = $xeTable
+
   internalData.initStatus = false
-  $xeTable.clearSort()
-  $xeTable.clearCurrentRow()
-  $xeTable.clearCurrentColumn()
-  $xeTable.clearRadioRow()
-  $xeTable.clearRadioReserve()
-  $xeTable.clearCheckboxRow()
-  $xeTable.clearCheckboxReserve()
-  $xeTable.clearRowExpand()
-  $xeTable.clearTreeExpand()
-  $xeTable.clearTreeExpandReserve()
-  $xeTable.clearPendingRow()
+  const actionList = [
+    $xeTable.clearSort(),
+    $xeTable.clearCurrentRow(),
+    $xeTable.clearCurrentColumn(),
+    $xeTable.clearRadioRow(),
+    $xeTable.clearRadioReserve(),
+    $xeTable.clearCheckboxRow(),
+    $xeTable.clearCheckboxReserve(),
+    $xeTable.clearRowExpand(),
+    $xeTable.clearTreeExpand(),
+    $xeTable.clearTreeExpandReserve(),
+    $xeTable.clearPendingRow()
+  ]
   if ($xeTable.clearFilter) {
-    $xeTable.clearFilter()
+    actionList.push(
+      $xeTable.clearFilter()
+    )
   }
   if ($xeTable.clearSelected && (props.keyboardConfig || props.mouseConfig)) {
-    $xeTable.clearSelected()
+    actionList.push(
+      $xeTable.clearSelected()
+    )
   }
   if ($xeTable.clearCellAreas && props.mouseConfig) {
-    $xeTable.clearCellAreas()
-    $xeTable.clearCopyCellArea()
+    actionList.push(
+      $xeTable.clearCellAreas(),
+      $xeTable.clearCopyCellArea()
+    )
   }
-  return $xeTable.clearScroll()
+  return Promise.all(actionList).then(() => {
+    return $xeTable.clearScroll()
+  })
 }
 
 export function clearTableAllStatus ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {

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,
@@ -108,6 +136,51 @@ $btnThemeList: (
   overflow-x: scroll;
 }
 
+// 禁用滚动条
+.vxe-table--main-wrapper {
+  &.sx--hidden {
+    & > .vxe-table--header-wrapper {
+      & > .vxe-table--header-inner-wrapper {
+        overflow-x: hidden;
+      }
+    }
+    & > .vxe-table--body-wrapper {
+      & > .vxe-table--body-inner-wrapper {
+        overflow-x: hidden;
+      }
+    }
+    & > .vxe-table--footer-wrapper {
+      & > .vxe-table--footer-inner-wrapper {
+        overflow-x: hidden;
+      }
+    }
+  }
+  &.sy--hidden {
+    & > .vxe-table--body-wrapper {
+      & > .vxe-table--body-inner-wrapper {
+        overflow-y: hidden;
+      }
+    }
+  }
+}
+.vxe-table--fixed-left-wrapper,
+.vxe-table--fixed-right-wrapper {
+  &.sx--hidden {
+    & > .vxe-table--body-wrapper {
+      & > .vxe-table--body-inner-wrapper {
+        overflow-x: hidden;
+      }
+    }
+  }
+  &.sy--hidden {
+    & > .vxe-table--body-wrapper {
+      & > .vxe-table--body-inner-wrapper {
+        overflow-y: hidden;
+      }
+    }
+  }
+}
+
 .vxe-loading--custom-wrapper {
   display: none;
   position: absolute;
@@ -640,6 +713,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 +1778,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;
     }
@@ -2103,11 +2186,16 @@ $btnThemeList: (
     display: none;
     visibility: hidden;
   }
-  .vxe-table--empty-placeholder {
+  .vxe-table--empty-place-wrapper {
     display: none;
     position: absolute;
+    width: 100%;
     top: 0;
     z-index: 5;
+    overflow: hidden;
+  }
+  .vxe-table--empty-placeholder {
+    display: flex;
   }
   .vxe-table--empty-content {
     display: block;
@@ -2116,7 +2204,7 @@ $btnThemeList: (
   }
   &.is--empty {
     .vxe-table--empty-block,
-    .vxe-table--empty-placeholder {
+    .vxe-table--empty-place-wrapper{
       display: flex;
     }
   }