vxe-table 3.15.0-beta.4 → 3.15.0

package/packages/table/src/methods.ts

@@ -1531,10 +1531,8 @@ function autoCellWidth ($xeTable: VxeTableConstructor & VxeTablePrivateMethods)
   const internalData = $xeTable as unknown as TableInternalData
 
   const { elemStore } = internalData
-  const scrollbarOpts = $xeTable.computeScrollbarOpts
-  const tableBody = $xeTable.$refs.refTableBody
-  const bodyElem = tableBody ? (tableBody as any).$el as HTMLDivElement : null
-  if (!bodyElem) {
+  const bodyWrapperElem = getRefElem(elemStore['main-body-wrapper'])
+  if (!bodyWrapperElem) {
     return
   }
   const yHandleEl = $xeTable.$refs.refScrollYHandleElem as HTMLDivElement
@@ -1547,7 +1545,7 @@ function autoCellWidth ($xeTable: VxeTableConstructor & VxeTablePrivateMethods)
   }
   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
@@ -1615,9 +1613,9 @@ function autoCellWidth ($xeTable: VxeTableConstructor & VxeTablePrivateMethods)
   })
   if (fit) {
     /**
-         * 偏移量算法
-         * 如果所有列足够放的情况下，从最后动态列开始分配
-         */
+     * 偏移量算法
+     * 如果所有列足够放的情况下，从最后动态列开始分配
+     */
     const dynamicList = scaleList.concat(scaleMinList).concat(pxMinList).concat(autoMinList).concat(remainList)
     let dynamicSize = dynamicList.length - 1
     if (dynamicSize > 0) {
@@ -1631,29 +1629,10 @@ function autoCellWidth ($xeTable: VxeTableConstructor & VxeTablePrivateMethods)
       }
     }
   }
-  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($xeTable)
   updateHeight($xeTable)
-  reactData.parentHeight = Math.max(internalData.headerHeight + footerHeight + 20, $xeTable.getParentHeight())
-  if (overflowX) {
-    $xeTable.checkScrolling()
-  }
 }
 
 const calcCellAutoHeight = (rowRest: VxeTableDefines.RowCacheItem, wrapperEl: HTMLDivElement) => {
@@ -2033,7 +2012,9 @@ function computeScrollLoad ($xeTable: VxeTableConstructor & VxeTablePrivateMetho
     }
     // 计算 Y 逻辑
     const rowHeight = computeRowHeight($xeTable)
-    ;(scrollYStore as any).rowHeight = rowHeight
+
+    ;(scrollYStore as any).rowHeight = rowHeight // 已废弃
+
     reactData.rowHeight = rowHeight
     const { toVisibleIndex: toYVisibleIndex, visibleSize: visibleYSize } = handleVirtualYVisible($xeTable)
     if (scrollYLoad) {
@@ -2050,12 +2031,49 @@ function computeScrollLoad ($xeTable: VxeTableConstructor & VxeTablePrivateMetho
     } else {
       $xeTable.updateScrollYSpace()
     }
-    $xeTable.$nextTick(() => {
-      updateStyle($xeTable)
-    })
   })
 }
 
+function calcScrollbar ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
+  const reactData = $xeTable as unknown as TableReactData
+  const internalData = $xeTable as unknown as TableInternalData
+
+  const { scrollXWidth, scrollYHeight } = reactData
+  const { elemStore } = internalData
+  const scrollbarOpts = $xeTable.computeScrollbarOpts
+  const bodyWrapperElem = getRefElem(elemStore['main-body-wrapper'])
+  const headerTableElem = getRefElem(elemStore['main-header-table'])
+  const footerTableElem = getRefElem(elemStore['main-footer-table'])
+  const xHandleEl = $xeTable.$refs.refScrollXHandleElem as HTMLDivElement
+  const yHandleEl = $xeTable.$refs.refScrollYHandleElem as HTMLDivElement
+  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)
+    }
+    reactData.overflowX = overflowX
+
+    const headerHeight = headerTableElem ? headerTableElem.clientHeight : 0
+    const footerHeight = footerTableElem ? footerTableElem.clientHeight : 0
+    internalData.tableHeight = bodyWrapperElem.offsetHeight
+    internalData.headerHeight = headerHeight
+    internalData.footerHeight = footerHeight
+
+    reactData.parentHeight = Math.max(internalData.headerHeight + footerHeight + 20, $xeTable.getParentHeight())
+  }
+  if (overflowX) {
+    $xeTable.checkScrolling()
+  }
+}
+
 function handleRecalculateLayout ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, reFull: boolean) {
   const internalData = $xeTable as unknown as TableInternalData
 
@@ -2074,21 +2092,22 @@ function handleRecalculateLayout ($xeTable: VxeTableConstructor & VxeTablePrivat
   }
   calcCellWidth($xeTable)
   autoCellWidth($xeTable)
+  calcScrollbar($xeTable)
   updateStyle($xeTable)
-  if (reFull) {
-    updateRowOffsetTop($xeTable)
-  }
   updateRowExpandStyle($xeTable)
   return computeScrollLoad($xeTable).then(() => {
-    if (reFull === true) {
-      // 初始化时需要在列计算之后再执行优化运算，达到最优显示效果
-      calcCellWidth($xeTable)
+    // 初始化时需要在列计算之后再执行优化运算，达到最优显示效果
+    calcCellWidth($xeTable)
+    if (reFull) {
       autoCellWidth($xeTable)
-      updateStyle($xeTable)
-      if (reFull) {
-        updateRowOffsetTop($xeTable)
-      }
-      updateRowExpandStyle($xeTable)
+    }
+    calcScrollbar($xeTable)
+    updateStyle($xeTable)
+    if (reFull) {
+      updateRowOffsetTop($xeTable)
+    }
+    updateRowExpandStyle($xeTable)
+    if (reFull) {
       return computeScrollLoad($xeTable)
     }
   })
@@ -3010,6 +3029,7 @@ const Methods = {
             }
             reactData.isRowLoading = false
             calcCellHeight($xeTable)
+            updateRowOffsetTop($xeTable)
             // 是否变更虚拟滚动
             if (oldScrollYLoad === sYLoad) {
               restoreScrollLocation($xeTable, targetScrollLeft, targetScrollTop)
@@ -5041,6 +5061,7 @@ const Methods = {
       }
     }
     return $xeTable.$nextTick().then(() => {
+      updateRowOffsetTop($xeTable)
       return { status }
     })
   },
@@ -9250,12 +9271,12 @@ const Methods = {
         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

package/packages/table/src/table.ts

@@ -790,7 +790,7 @@ export default {
       return Object.assign({}, getConfig().table.currentColumnConfig, props.currentColumnConfig)
     },
     computeCellOpts () {
-      const $xeTable = this
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
       const props = $xeTable
 
       const cellOpts = Object.assign({}, getConfig().table.cellConfig, props.cellConfig)
@@ -800,7 +800,7 @@ export default {
       return cellOpts
     },
     computeHeaderCellOpts () {
-      const $xeTable = this
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
       const props = $xeTable
 
       const headerCellOpts = Object.assign({}, getConfig().table.headerCellConfig, props.headerCellConfig)
@@ -810,7 +810,7 @@ export default {
       return headerCellOpts
     },
     computeFooterCellOpts () {
-      const $xeTable = this
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
       const props = $xeTable
 
       const footerCellOpts = Object.assign({}, getConfig().table.footerCellConfig, props.footerCellConfig)
@@ -856,7 +856,7 @@ export default {
       return this.computeSeqOpts
     },
     computeSeqOpts () {
-      const $xeTable = this
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
       const props = $xeTable
 
       return Object.assign({ startIndex: 0 }, getConfig().table.seqConfig, props.seqConfig)
@@ -865,7 +865,7 @@ export default {
       return this.computeRadioOpts
     },
     computeRadioOpts () {
-      const $xeTable = this
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
       const props = $xeTable
 
       return Object.assign({}, getConfig().table.radioConfig, props.radioConfig)
@@ -874,7 +874,7 @@ export default {
       return this.computeCheckboxOpts
     },
     computeCheckboxOpts () {
-      const $xeTable = this
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
       const props = $xeTable
 
       return Object.assign({}, getConfig().table.checkboxConfig, props.checkboxConfig)
@@ -883,7 +883,7 @@ export default {
       return this.computeTooltipOpts
     },
     computeTooltipOpts () {
-      const $xeTable = this
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
       const props = $xeTable
 
       return Object.assign({}, getConfig().tooltip, getConfig().table.tooltipConfig, props.tooltipConfig)
@@ -892,15 +892,15 @@ export default {
       return { ...this.tooltipOpts }
     },
     computeTableTipConfig () {
-      const $xeTable = this
-      const reactData = $xeTable
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+      const reactData = $xeTable as unknown as TableReactData
 
       const { tooltipStore } = reactData
       const tooltipOpts = $xeTable.computeTooltipOpts
       return Object.assign({}, tooltipOpts, tooltipStore.currOpts)
     },
     computeValidTipConfig () {
-      const $xeTable = this
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
 
       const tooltipOpts = $xeTable.computeTooltipOpts
       return Object.assign({}, tooltipOpts)
@@ -960,7 +960,7 @@ export default {
       return this.computeHeaderMenu
     },
     computeHeaderMenu () {
-      const $xeTable = this
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
 
       const menuOpts = $xeTable.computeMenuOpts
       const headerOpts = menuOpts.header
@@ -970,7 +970,7 @@ export default {
       return this.computeBodyMenu
     },
     computeBodyMenu () {
-      const $xeTable = this
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
 
       const menuOpts = $xeTable.computeMenuOpts
       const bodyOpts = menuOpts.body
@@ -980,7 +980,7 @@ export default {
       return this.computeFooterMenu
     },
     computeFooterMenu () {
-      const $xeTable = this
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
 
       const menuOpts = $xeTable.computeMenuOpts
       const footerOpts = menuOpts.footer
@@ -990,21 +990,21 @@ export default {
       return this.computeIsMenu
     },
     computeIsMenu () {
-      const $xeTable = this
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
       const props = $xeTable
 
       const menuOpts = $xeTable.computeMenuOpts
       const headerMenu = $xeTable.computeHeaderMenu
       const bodyMenu = $xeTable.computeBodyMenu
       const footerMenu = $xeTable.computeFooterMenu
-      return !!((props.contextMenu || props.menuConfig) && isEnableConf(menuOpts) && (headerMenu.length || bodyMenu.length || footerMenu.length))
+      return !!(((props as any).contextMenu || props.menuConfig) && isEnableConf(menuOpts) && (headerMenu.length || bodyMenu.length || footerMenu.length))
     },
     ctxMenuList () {
       return this.computeMenuList
     },
     computeMenuList () {
-      const $xeTable = this
-      const reactData = $xeTable as TableReactData
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+      const reactData = $xeTable as unknown as TableReactData
 
       const { ctxMenuStore } = reactData
       const rest: any[] = []
@@ -1022,8 +1022,8 @@ export default {
       return Object.assign({}, getConfig().table.menuConfig, this.contextMenu, this.menuConfig)
     },
     computeLeftFixedWidth () {
-      const $xeTable = this
-      const reactData = $xeTable as TableReactData
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+      const reactData = $xeTable as unknown as TableReactData
 
       const { columnStore } = reactData
       const { leftList } = columnStore
@@ -1035,8 +1035,8 @@ export default {
       return leftWidth
     },
     computeRightFixedWidth () {
-      const $xeTable = this
-      const reactData = $xeTable as TableReactData
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+      const reactData = $xeTable as unknown as TableReactData
 
       const { columnStore } = reactData
       const { rightList } = columnStore
@@ -2034,7 +2034,8 @@ export default {
               theme: tableTipConfig.theme,
               enterable: tableTipConfig.enterable,
               enterDelay: tableTipConfig.enterDelay,
-              leaveDelay: tableTipConfig.leaveDelay
+              leaveDelay: tableTipConfig.leaveDelay,
+              useHTML: tableTipConfig.useHTML
             }
           })
           : renderEmptyElement($xeTable),

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;