vxe-table 3.19.6 → 3.19.8

package/packages/table/src/footer.ts

@@ -278,27 +278,18 @@ export default {
     const _vm = this as any
     const props = _vm
     const $xeTable = _vm.$parent as VxeTableConstructor & VxeTablePrivateMethods
-    const tableProps = $xeTable
     const tableReactData = $xeTable as unknown as TableReactData
     const tableInternalData = $xeTable as unknown as TableInternalData
 
     const { xID } = $xeTable
 
     const { fixedType, fixedColumn, tableColumn } = props
-    const { spanMethod, footerSpanMethod, showFooterOverflow: allColumnFooterOverflow } = tableProps
     const { visibleColumn, fullColumnIdData } = tableInternalData
     const { isGroup, isColLoading, overflowX, scrollXLoad, dragCol } = tableReactData
+    const isFooterRenderOptimize = $xeTable.computeIsFooterRenderOptimize
 
     let renderColumnList = tableColumn as VxeTableDefines.ColumnInfo[]
-    let isOptimizeMode = false
-    // 如果是使用优化模式
-    if (scrollXLoad && allColumnFooterOverflow) {
-      if (spanMethod || footerSpanMethod) {
-        // 如果不支持优化模式
-      } else {
-        isOptimizeMode = true
-      }
-    }
+    const isOptimizeMode = isFooterRenderOptimize
 
     if (!isOptimizeMode || (!isColLoading && (fixedType || !overflowX))) {
       renderColumnList = visibleColumn

package/packages/table/src/header.ts

@@ -462,27 +462,19 @@ export default {
     const { fixedType, fixedColumn, tableColumn } = props
     const { headerColumn } = _vm
 
-    const { mouseConfig, showHeaderOverflow: allColumnHeaderOverflow, spanMethod, footerSpanMethod } = tableProps
+    const { mouseConfig } = tableProps
     const { isGroup, isColLoading, overflowX, scrollXLoad, dragCol } = tableReactData
     const { visibleColumn, fullColumnIdData } = tableInternalData
 
     const mouseOpts = $xeTable.computeMouseOpts
+    const isHeaderRenderOptimize = $xeTable.computeIsHeaderRenderOptimize
     let renderHeaderList = headerColumn as VxeTableDefines.ColumnInfo[][]
     let renderColumnList = tableColumn as VxeTableDefines.ColumnInfo[]
-    let isOptimizeMode = false
+    const isOptimizeMode = isHeaderRenderOptimize
 
     if (isGroup) {
       renderColumnList = visibleColumn
     } else {
-      // 如果是使用优化模式
-      if (scrollXLoad && allColumnHeaderOverflow) {
-        if (spanMethod || footerSpanMethod) {
-          // 如果不支持优化模式
-        } else {
-          isOptimizeMode = true
-        }
-      }
-
       if (!isOptimizeMode || (!isColLoading && (fixedType || !overflowX))) {
         renderColumnList = visibleColumn
       }

package/packages/table/src/methods.ts

@@ -530,8 +530,7 @@ function handleVirtualTreeExpand ($xeTable: VxeTableConstructor & VxeTablePrivat
     updateAfterDataIndex($xeTable)
     return $xeTable.$nextTick()
   }).then(() => {
-    updateTreeLineStyle($xeTable)
-    return handleLazyRecalculate($xeTable, true, true, true)
+    return handleRecalculateStyle($xeTable, true, true, true)
   }).then(() => {
     updateTreeLineStyle($xeTable)
     setTimeout(() => {
@@ -998,8 +997,8 @@ function updateStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
   const reactData = $xeTable as unknown as TableReactData
   const internalData = $xeTable as unknown as TableInternalData
 
-  const { showHeaderOverflow: allColumnHeaderOverflow, showFooterOverflow: allColumnFooterOverflow, mouseConfig, spanMethod, footerSpanMethod } = props
-  const { isGroup, currentRow, tableColumn, scrollXLoad, scrollYLoad, overflowX, scrollbarWidth, overflowY, scrollbarHeight, scrollXWidth, columnStore, editStore, isAllOverflow, expandColumn, isColLoading } = reactData
+  const { mouseConfig } = props
+  const { isGroup, currentRow, tableColumn, overflowX, scrollbarWidth, overflowY, scrollbarHeight, scrollXWidth, columnStore, editStore, isColLoading } = reactData
   const { visibleColumn, tableHeight, elemStore, customHeight, customMinHeight, customMaxHeight, tHeaderHeight, tFooterHeight } = internalData
   const $xeGanttView = internalData.xeGanttView
   const el = $xeTable.$refs.refElem as HTMLDivElement
@@ -1007,12 +1006,15 @@ function updateStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
     return
   }
   const containerList = ['main', 'left', 'right']
+  const { leftList, rightList } = columnStore
   let osbWidth = overflowY ? scrollbarWidth : 0
   let osbHeight = overflowX ? scrollbarHeight : 0
   const emptyPlaceholderElem = $xeTable.$refs.refEmptyPlaceholder as HTMLDivElement
+  const isHeaderRenderOptimize = $xeTable.computeIsHeaderRenderOptimize
+  const isBodyRenderOptimize = $xeTable.computeIsBodyRenderOptimize
+  const isFooterRenderOptimize = $xeTable.computeIsFooterRenderOptimize
   const scrollbarOpts = $xeTable.computeScrollbarOpts
   const mouseOpts = $xeTable.computeMouseOpts
-  const expandOpts = $xeTable.computeExpandOpts
   const bodyWrapperElem = getRefElem(elemStore['main-body-wrapper'])
   const bodyTableElem = getRefElem(elemStore['main-body-table'])
   if (emptyPlaceholderElem) {
@@ -1134,7 +1136,7 @@ function updateStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
     let fixedColumn: VxeTableDefines.ColumnInfo[] = []
     let fixedWrapperElem: HTMLDivElement
     if (fixedType) {
-      fixedColumn = isFixedLeft ? columnStore.leftList : columnStore.rightList
+      fixedColumn = isFixedLeft ? leftList : rightList
       fixedWrapperElem = (isFixedLeft ? $xeTable.$refs.refLeftContainer : $xeTable.$refs.refRightContainer) as HTMLDivElement
     }
     layoutList.forEach(layout => {
@@ -1145,20 +1147,11 @@ function updateStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
         // 表头体样式处理
         // 横向滚动渲染
         let renderColumnList = tableColumn
-        let isOptimizeMode = false
+        const isOptimizeMode = isHeaderRenderOptimize
 
         if (isGroup) {
           renderColumnList = visibleColumn
         } else {
-          // 如果是使用优化模式
-          if (scrollXLoad && allColumnHeaderOverflow) {
-            if (spanMethod || footerSpanMethod) {
-              // 如果不支持优化模式
-            } else {
-              isOptimizeMode = true
-            }
-          }
-
           if (!isOptimizeMode || (!isColLoading && (fixedType || !overflowX))) {
             renderColumnList = visibleColumn
           }
@@ -1215,16 +1208,7 @@ function updateStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
         }
 
         let renderColumnList = tableColumn
-
-        let isOptimizeMode = false
-        // 如果是使用优化模式
-        if (scrollXLoad || scrollYLoad || isAllOverflow) {
-          if ((expandColumn && expandOpts.mode !== 'fixed') || spanMethod || footerSpanMethod) {
-            // 如果不支持优化模式
-          } else {
-            isOptimizeMode = true
-          }
-        }
+        const isOptimizeMode = isBodyRenderOptimize
 
         if (fixedType) {
           renderColumnList = visibleColumn
@@ -1258,15 +1242,7 @@ function updateStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
         }
       } else if (layout === 'footer') {
         let renderColumnList = tableColumn
-        let isOptimizeMode = false
-        // 如果是使用优化模式
-        if (scrollXLoad && allColumnFooterOverflow) {
-          if (spanMethod || footerSpanMethod) {
-            // 如果不支持优化模式
-          } else {
-            isOptimizeMode = true
-          }
-        }
+        const isOptimizeMode = isFooterRenderOptimize
 
         if (!isOptimizeMode || (!isColLoading && (fixedType || !overflowX))) {
           renderColumnList = visibleColumn
@@ -2513,20 +2489,31 @@ function autoCellWidth ($xeTable: VxeTableConstructor & VxeTablePrivateMethods)
 /**
  * 计算自适应行高
  */
-const calcCellAutoHeight = (rowRest: VxeTableDefines.RowCacheItem, wrapperEl: HTMLDivElement) => {
-  const cellElemList = wrapperEl.querySelectorAll(`.vxe-cell--wrapper[rowid="${rowRest.rowid}"]`)
+const calcCellAutoHeight = ($xeTable: VxeTableConstructor, rowRest: VxeTableDefines.RowCacheItem, wrapperEl: HTMLDivElement) => {
+  const reactData = $xeTable as unknown as TableReactData
+
+  const { scrollXLoad } = reactData
+  const wrapperElemList = wrapperEl.querySelectorAll(`.vxe-cell--wrapper[rowid="${rowRest.rowid}"]`)
   let colHeight = rowRest.height
   let firstCellStyle: CSSStyleDeclaration | null = null
   let topBottomPadding = 0
-  for (let i = 0; i < cellElemList.length; i++) {
-    const wrapperElem = cellElemList[i] as HTMLElement
+  for (let i = 0; i < wrapperElemList.length; i++) {
+    const wrapperElem = wrapperElemList[i] as HTMLElement
     const cellElem = wrapperElem.parentElement as HTMLTableCellElement
     if (!firstCellStyle) {
+      const cellStyle = cellElem.style
+      const orHeight = cellStyle.height
+      if (!scrollXLoad) {
+        cellStyle.height = ''
+      }
       firstCellStyle = getComputedStyle(cellElem)
       topBottomPadding = firstCellStyle ? Math.ceil(XEUtils.toNumber(firstCellStyle.paddingTop) + XEUtils.toNumber(firstCellStyle.paddingBottom)) : 0
+      if (!scrollXLoad) {
+        cellStyle.height = orHeight
+      }
     }
     const cellHeight = wrapperElem ? wrapperElem.clientHeight : 0
-    colHeight = Math.max(colHeight, Math.ceil(cellHeight + topBottomPadding))
+    colHeight = scrollXLoad ? Math.max(colHeight, Math.ceil(cellHeight + topBottomPadding)) : Math.ceil(cellHeight + topBottomPadding)
   }
   return colHeight
 }
@@ -2547,13 +2534,15 @@ const calcCellHeight = ($xeTable: VxeTableConstructor) => {
   const el = $xeTable.$refs.refElem as HTMLDivElement
   if (!isAllOverflow && (scrollYLoad || scrollXLoad || (treeConfig && treeOpts.showLine)) && el) {
     const { handleGetRowId } = createHandleGetRowId($xeTable)
+    el.setAttribute('data-calc-row', 'Y')
     tableData.forEach(row => {
       const rowid = handleGetRowId(row)
       const rowRest = fullAllDataRowIdData[rowid]
       if (rowRest) {
-        const height = calcCellAutoHeight(rowRest, el)
+        const height = calcCellAutoHeight($xeTable, rowRest, el)
         rowRest.height = Math.max(defaultRowHeight, scrollXLoad ? Math.max(rowRest.height, height) : height)
       }
+      el.removeAttribute('data-calc-row')
     })
     reactData.calcCellHeightFlag++
   }
@@ -6371,7 +6360,9 @@ const Methods = {
         return
       }
       const handleRsHeight = () => {
-        const resizeHeight = calcCellAutoHeight(rowRest, el)
+        el.setAttribute('data-calc-row', 'Y')
+        const resizeHeight = calcCellAutoHeight($xeTable, rowRest, el)
+        el.removeAttribute('data-calc-row')
         const resizeParams = { ...params, resizeHeight, resizeRow: row }
         reactData.isDragResize = false
         internalData._lastResizeTime = Date.now()
@@ -6457,7 +6448,7 @@ const Methods = {
         const rowid = XEUtils.isString(row) || XEUtils.isNumber(row) ? row : handleGetRowId(row)
         const rowRest = fullAllDataRowIdData[rowid]
         if (rowRest) {
-          rowRest.resizeHeight = calcCellAutoHeight(rowRest, el)
+          rowRest.resizeHeight = calcCellAutoHeight($xeTable, rowRest, el)
         }
         el.removeAttribute('data-calc-row')
       })
@@ -11648,7 +11639,7 @@ const Methods = {
     const reactData = $xeTable as unknown as TableReactData
     const internalData = $xeTable as unknown as TableInternalData
 
-    const { isAllOverflow, scrollYLoad, expandColumn } = reactData
+    const { isAllOverflow, overflowY, scrollYLoad, scrollYHeight, expandColumn } = reactData
     const { scrollYStore, elemStore, isResizeCellHeight, afterFullData, fullAllDataRowIdData, rowExpandedMaps } = internalData
     const $xeGanttView = internalData.xeGanttView
     const { startIndex } = scrollYStore
@@ -11663,13 +11654,13 @@ const Methods = {
     const rightbodyTableElem = getRefElem(elemStore['right-body-table'])
     const containerList = ['main', 'left', 'right']
     let ySpaceTop = 0
-    let scrollYHeight = 0
+    let sYHeight = scrollYHeight
     let isScrollYBig = false
     if (scrollYLoad) {
       const isCustomCellHeight = isResizeCellHeight || cellOpts.height || rowOpts.height
       if (!isCustomCellHeight && !expandColumn && isAllOverflow) {
-        scrollYHeight = afterFullData.length * defaultRowHeight
-        if (scrollYHeight > maxYHeight) {
+        sYHeight = afterFullData.length * defaultRowHeight
+        if (sYHeight > maxYHeight) {
           isScrollYBig = true
         }
         ySpaceTop = Math.max(0, startIndex * defaultRowHeight)
@@ -11682,18 +11673,21 @@ const Methods = {
         const lastRow = afterFullData[afterFullData.length - 1]
         rowid = getRowid($xeTable, lastRow)
         rowRest = fullAllDataRowIdData[rowid] || {}
-        scrollYHeight = (rowRest.oTop || 0) + (rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight)
-        // 是否展开行
-        if (expandColumn && rowExpandedMaps[rowid]) {
-          scrollYHeight += rowRest.expandHeight || expandOpts.height || 0
+        // 如果为空时还没计算完数据，保持原高度不变
+        if (rowRest.oTop) {
+          sYHeight = (rowRest.oTop || 0) + (rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight)
+          // 是否展开行
+          if (expandColumn && rowExpandedMaps[rowid]) {
+            sYHeight += rowRest.expandHeight || expandOpts.height || 0
+          }
         }
-        if (scrollYHeight > maxYHeight) {
+        if (sYHeight > maxYHeight) {
           isScrollYBig = true
         }
       }
     } else {
       if (bodyTableElem) {
-        scrollYHeight = bodyTableElem.clientHeight
+        sYHeight = bodyTableElem.clientHeight
       }
     }
     let clientHeight = 0
@@ -11701,7 +11695,7 @@ const Methods = {
       clientHeight = bodyScrollElem.clientHeight
     }
     // 虚拟渲染
-    let ySpaceHeight = scrollYHeight
+    let ySpaceHeight = sYHeight
     let scrollYTop = ySpaceTop
     if (isScrollYBig) {
       // 触底
@@ -11712,6 +11706,9 @@ const Methods = {
       }
       ySpaceHeight = maxYHeight
     }
+    if (!(scrollYLoad && overflowY)) {
+      scrollYTop = 0
+    }
 
     if (leftBodyTableElem) {
       leftBodyTableElem.style.transform = `translate(0px, ${scrollYTop}px)`
@@ -11742,7 +11739,7 @@ const Methods = {
       rowExpandYSpaceEl.style.height = ySpaceHeight ? `${ySpaceHeight}px` : ''
     }
     reactData.scrollYTop = scrollYTop
-    reactData.scrollYHeight = scrollYHeight
+    reactData.scrollYHeight = ySpaceHeight
     reactData.isScrollYBig = isScrollYBig
 
     calcScrollbar($xeTable)

package/packages/table/src/table.ts

@@ -1299,6 +1299,89 @@ export default {
       }
       return leftWidth
     },
+    computeBodyMergeCoverFixed () {
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+      const reactData = $xeTable as unknown as TableReactData
+      const internalData = $xeTable as unknown as TableInternalData
+
+      const { columnStore, mergeBodyFlag } = reactData
+      const { mergeBodyList, visibleColumn } = internalData
+      const { leftList, rightList } = columnStore
+      const rscIndex = visibleColumn.length - rightList.length
+      if (mergeBodyFlag && (leftList.length || rightList.length)) {
+        const lecIndex = leftList.length
+        for (let i = 0; i < mergeBodyList.length; i++) {
+          const { col, colspan } = mergeBodyList[i]
+          if (col < lecIndex || (col + colspan) > rscIndex) {
+            return true
+          }
+        }
+      }
+      return false
+    },
+    computeIsHeaderRenderOptimize () {
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+      const props = $xeTable
+      const reactData = $xeTable as unknown as TableReactData
+
+      const { spanMethod, footerSpanMethod, showHeaderOverflow: allColumnHeaderOverflow } = props
+      const { isGroup, scrollXLoad } = reactData
+      let isOptimizeMode = false
+      if (isGroup) {
+        // 分组表头
+      } else {
+        // 如果是使用优化模式
+        if (scrollXLoad && allColumnHeaderOverflow) {
+          if (spanMethod || footerSpanMethod) {
+            // 如果不支持优化模式
+          } else {
+            isOptimizeMode = true
+          }
+        }
+      }
+      return isOptimizeMode
+    },
+    computeIsBodyRenderOptimize () {
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+      const props = $xeTable
+      const reactData = $xeTable as unknown as TableReactData
+
+      const { spanMethod, footerSpanMethod } = props
+      const { scrollXLoad, scrollYLoad, isAllOverflow, expandColumn } = reactData
+      const bodyMergeCoverFixed = $xeTable.computeBodyMergeCoverFixed
+      const expandOpts = $xeTable.computeExpandOpts
+      let isOptimizeMode = false
+      // 如果是使用优化模式
+      if (scrollXLoad || scrollYLoad || isAllOverflow) {
+        // 如果是展开行，内联模式，不支持优化
+        // 如果是方法合并，不支持优化
+        // 如果固定列且配置式合并，不支持优化
+        if ((expandColumn && expandOpts.mode !== 'fixed') || bodyMergeCoverFixed || spanMethod || footerSpanMethod) {
+          // 如果不支持优化模式
+        } else {
+          isOptimizeMode = true
+        }
+      }
+      return isOptimizeMode
+    },
+    computeIsFooterRenderOptimize () {
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+      const props = $xeTable
+      const reactData = $xeTable as unknown as TableReactData
+
+      const { spanMethod, footerSpanMethod, showFooterOverflow: allColumnFooterOverflow } = props
+      const { scrollXLoad } = reactData
+      let isOptimizeMode = false
+      // 如果是使用优化模式
+      if (scrollXLoad && allColumnFooterOverflow) {
+        if (spanMethod || footerSpanMethod) {
+          // 如果不支持优化模式
+        } else {
+          isOptimizeMode = true
+        }
+      }
+      return isOptimizeMode
+    },
     exportOpts () {
       return this.computeExportOpts
     },
@@ -1709,12 +1792,12 @@ export default {
     if (props.resizable) {
       warnLog('vxe.error.delProp', ['resizable', 'column-config.resizable'])
     }
-    if (props.virtualXConfig && props.scrollX) {
-      warnLog('vxe.error.notSupportProp', ['virtual-x-config', 'scroll-x', 'scroll-x=null'])
-    }
-    if (props.virtualYConfig && props.scrollY) {
-      warnLog('vxe.error.notSupportProp', ['virtual-y-config', 'scroll-y', 'scroll-y=null'])
-    }
+    // if (props.virtualXConfig && props.scrollX) {
+    //   warnLog('vxe.error.notSupportProp', ['virtual-x-config', 'scroll-x', 'scroll-x=null'])
+    // }
+    // if (props.virtualYConfig && props.scrollY) {
+    //   warnLog('vxe.error.notSupportProp', ['virtual-y-config', 'scroll-y', 'scroll-y=null'])
+    // }
     if (props.aggregateConfig && props.rowGroupConfig) {
       warnLog('vxe.error.notSupportProp', ['aggregate-config', 'row-group-config', 'row-group-config=null'])
     }

package/packages/ui/index.ts

@@ -18,7 +18,7 @@ VxeUI.setConfig({
     delayHover: 250,
     autoResize: true,
     padding: true,
-    minHeight: 144,
+    // minHeight: null,
     // keepSource: false,
     // showOverflow: null,
     // showHeaderOverflow: null,