vxe-table 4.13.0-beta.4 → 4.13.0

package/packages/table/src/table.ts

@@ -1564,10 +1564,8 @@ export default defineComponent({
      */
     const autoCellWidth = () => {
       const { elemStore } = internalData
-      const scrollbarOpts = computeScrollbarOpts.value
-      const tableBody = refTableBody.value
-      const bodyElem = tableBody ? tableBody.$el as HTMLDivElement : null
-      if (!bodyElem) {
+      const bodyWrapperElem = getRefElem(elemStore['main-body-wrapper'])
+      if (!bodyWrapperElem) {
         return
       }
       const yHandleEl = refScrollYHandleElem.value
@@ -1580,7 +1578,7 @@ export default defineComponent({
       }
       let tWidth = 0
       const minCellWidth = 40 // 列宽最少限制 40px
-      const bodyWidth = bodyElem.clientWidth
+      const bodyWidth = bodyWrapperElem.clientWidth
       let remainWidth = bodyWidth
       let meanWidth = remainWidth / 100
       const { fit } = props
@@ -1664,29 +1662,10 @@ export default defineComponent({
           }
         }
       }
-      const tableHeight = bodyElem.offsetHeight
-      const overflowY = yHandleEl.scrollHeight > yHandleEl.clientHeight
-      reactData.scrollbarWidth = Math.max(scrollbarOpts.width || 0, yHandleEl.offsetWidth - yHandleEl.clientWidth)
-      reactData.overflowY = overflowY
       reactData.scrollXWidth = tWidth
-      internalData.tableHeight = tableHeight
-
-      const headerTableElem = getRefElem(elemStore['main-header-table'])
-      const footerTableElem = getRefElem(elemStore['main-footer-table'])
-      const headerHeight = headerTableElem ? headerTableElem.clientHeight : 0
-      const overflowX = tWidth > bodyWidth
-      const footerHeight = footerTableElem ? footerTableElem.clientHeight : 0
-      reactData.scrollbarHeight = Math.max(scrollbarOpts.height || 0, xHandleEl.offsetHeight - xHandleEl.clientHeight)
-      internalData.headerHeight = headerHeight
-      internalData.footerHeight = footerHeight
-      reactData.overflowX = overflowX
       reactData.resizeWidthFlag++
       updateColumnOffsetLeft()
       updateHeight()
-      reactData.parentHeight = Math.max(internalData.headerHeight + footerHeight + 20, $xeTable.getParentHeight())
-      if (overflowX) {
-        $xeTable.checkScrolling()
-      }
     }
 
     const calcCellAutoHeight = (rowRest: VxeTableDefines.RowCacheItem, wrapperEl: HTMLDivElement) => {
@@ -2775,7 +2754,9 @@ export default defineComponent({
         }
         // 计算 Y 逻辑
         const rowHeight = computeRowHeight()
-        ;(scrollYStore as any).rowHeight = rowHeight
+
+        ;(scrollYStore as any).rowHeight = rowHeight // 已废弃
+
         reactData.rowHeight = rowHeight
         const { toVisibleIndex: toYVisibleIndex, visibleSize: visibleYSize } = handleVirtualYVisible()
         if (scrollYLoad) {
@@ -2792,12 +2773,46 @@ export default defineComponent({
         } else {
           $xeTable.updateScrollYSpace()
         }
-        nextTick(() => {
-          updateStyle()
-        })
       })
     }
 
+    const calcScrollbar = () => {
+      const { scrollXWidth, scrollYHeight } = reactData
+      const { elemStore } = internalData
+      const scrollbarOpts = computeScrollbarOpts.value
+      const bodyWrapperElem = getRefElem(elemStore['main-body-wrapper'])
+      const headerTableElem = getRefElem(elemStore['main-header-table'])
+      const footerTableElem = getRefElem(elemStore['main-footer-table'])
+      const xHandleEl = refScrollXHandleElem.value
+      const yHandleEl = refScrollYHandleElem.value
+      let overflowY = false
+      let overflowX = false
+      if (bodyWrapperElem) {
+        overflowY = scrollYHeight > bodyWrapperElem.clientHeight
+        if (yHandleEl) {
+          reactData.scrollbarWidth = Math.max(scrollbarOpts.width || 0, yHandleEl.offsetWidth - yHandleEl.clientWidth)
+        }
+        reactData.overflowY = overflowY
+
+        overflowX = scrollXWidth > bodyWrapperElem.clientWidth
+        if (xHandleEl) {
+          reactData.scrollbarHeight = Math.max(scrollbarOpts.height || 0, xHandleEl.offsetHeight - xHandleEl.clientHeight)
+        }
+
+        const headerHeight = headerTableElem ? headerTableElem.clientHeight : 0
+        const footerHeight = footerTableElem ? footerTableElem.clientHeight : 0
+        internalData.tableHeight = bodyWrapperElem.offsetHeight
+        internalData.headerHeight = headerHeight
+        internalData.footerHeight = footerHeight
+
+        reactData.overflowX = overflowX
+        reactData.parentHeight = Math.max(internalData.headerHeight + footerHeight + 20, $xeTable.getParentHeight())
+      }
+      if (overflowX) {
+        $xeTable.checkScrolling()
+      }
+    }
+
     const handleRecalculateLayout = (reFull: boolean) => {
       const el = refElem.value
       internalData.rceRunTime = Date.now()
@@ -2814,18 +2829,22 @@ export default defineComponent({
       }
       calcCellWidth()
       autoCellWidth()
+      calcScrollbar()
       updateStyle()
       updateRowExpandStyle()
       return computeScrollLoad().then(() => {
-        if (reFull === true) {
-          // 初始化时需要在列计算之后再执行优化运算，达到最优显示效果
-          calcCellWidth()
+        // 初始化时需要在列计算之后再执行优化运算，达到最优显示效果
+        calcCellWidth()
+        if (reFull) {
           autoCellWidth()
-          updateStyle()
-          if (reFull) {
-            updateRowOffsetTop()
-          }
-          updateRowExpandStyle()
+        }
+        calcScrollbar()
+        updateStyle()
+        if (reFull) {
+          updateRowOffsetTop()
+        }
+        updateRowExpandStyle()
+        if (reFull) {
           return computeScrollLoad()
         }
       })
@@ -9606,12 +9625,12 @@ export default defineComponent({
             const firstRow = afterFullData[startIndex]
             let rowid = getRowid($xeTable, firstRow)
             let rowRest = fullAllDataRowIdData[rowid] || {}
-            ySpaceTop = rowRest.oTop
+            ySpaceTop = (rowRest.oTop || 0)
 
             const lastRow = afterFullData[afterFullData.length - 1]
             rowid = getRowid($xeTable, lastRow)
             rowRest = fullAllDataRowIdData[rowid] || {}
-            scrollYHeight = rowRest.oTop + (rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight)
+            scrollYHeight = (rowRest.oTop || 0) + (rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight)
             // 是否展开行
             if (expandColumn && rowExpandedMaps[rowid]) {
               scrollYHeight += rowRest.expandHeight || expandOpts.height || 0
@@ -9676,7 +9695,7 @@ export default defineComponent({
       updateScrollXData () {
         const { isAllOverflow } = reactData
         handleTableColumn()
-        $xeTable.updateScrollYSpace()
+        $xeTable.updateScrollXSpace()
         return nextTick().then(() => {
           handleTableColumn()
           $xeTable.updateScrollXSpace()
@@ -10356,7 +10375,8 @@ export default defineComponent({
               theme: tableTipConfig.theme,
               enterable: tableTipConfig.enterable,
               enterDelay: tableTipConfig.enterDelay,
-              leaveDelay: tableTipConfig.leaveDelay
+              leaveDelay: tableTipConfig.leaveDelay,
+              useHTML: tableTipConfig.useHTML
             }),
             /**
               * 校验提示

package/styles/components/table.scss

@@ -820,11 +820,25 @@
     }
   }
 }
+.vxe-header--column {
+  &:last-child {
+    & > .vxe-cell--col-resizable {
+      right: 0;
+    }
+  }
+}
 .vxe-table--fixed-right-wrapper {
   .vxe-cell--col-resizable {
     right: auto;
     left: -0.3em;
   }
+  .vxe-header--column {
+    &:last-child {
+      & > .vxe-cell--col-resizable {
+        left: 0;
+      }
+    }
+  }
 }
 
 .vxe-body--column {
@@ -1024,6 +1038,11 @@
       }
     }
   }
+  &.header-cell--area {
+    .vxe-table--header-wrapper {
+      user-select: none;
+    }
+  }
   &.body-cell--area {
     .vxe-table--body-wrapper {
       user-select: none;