vxe-table 4.15.3 → 4.15.5

package/packages/table/src/table.ts

@@ -4,7 +4,7 @@ import XEUtils from 'xe-utils'
 import { initTpImg, getTpImg, isPx, isScale, hasClass, addClass, removeClass, getEventTargetNode, getPaddingTopBottomSize, setScrollTop, setScrollLeft, toCssUnit, hasControlKey } from '../../ui/src/dom'
 import { getLastZIndex, nextZIndex, hasChildrenList, getFuncText, isEnableConf, formatText, eqEmptyValue } from '../../ui/src/utils'
 import { VxeUI } from '../../ui'
-import { getRowUniqueId, clearTableAllStatus, getColumnList, toFilters, hasDeepKey, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleRowidOrRow, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, getRootColumn, getRefElem, getColReMinWidth, createHandleUpdateRowId, createHandleGetRowId, getCalcHeight, getCellRestHeight } from './util'
+import { createInternalData, getRowUniqueId, clearTableAllStatus, getColumnList, toFilters, hasDeepKey, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleRowidOrRow, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, getRootColumn, getRefElem, getColReMinWidth, createHandleUpdateRowId, createHandleGetRowId, getCalcHeight, getCellRestHeight } from './util'
 import { getSlotVNs } from '../../ui/src/vn'
 import { moveRowAnimateToTb, clearRowAnimate, moveColAnimateToLr, clearColAnimate } from './anime'
 import { warnLog, errLog } from '../../ui/src/log'
@@ -21,7 +21,7 @@ import TableExportPanelComponent from '../module/export/export-panel'
 import TableMenuPanelComponent from '../module/menu/panel'
 
 import type { VxeTooltipInstance, VxeTabsConstructor, VxeTabsPrivateMethods, ValueOf, VxeComponentSlotType } from 'vxe-pc-ui'
-import type { VxeGridConstructor, VxeGridPrivateMethods, VxeTableConstructor, TableReactData, TableInternalData, VxeTablePropTypes, VxeToolbarConstructor, TablePrivateMethods, VxeTablePrivateRef, VxeTablePrivateComputed, VxeTablePrivateMethods, TableMethods, VxeTableMethods, VxeTableDefines, VxeTableEmits, VxeTableProps, VxeColumnPropTypes, VxeTableCustomPanelConstructor } from '../../../types'
+import type { VxeGridConstructor, VxeGridPrivateMethods, VxeTableConstructor, TableReactData, VxeTablePropTypes, VxeToolbarConstructor, TablePrivateMethods, VxeTablePrivateRef, VxeTablePrivateComputed, VxeTablePrivateMethods, TableMethods, VxeTableMethods, VxeTableDefines, VxeTableEmits, VxeTableProps, VxeColumnPropTypes, VxeTableCustomPanelConstructor } from '../../../types'
 
 const { getConfig, getIcon, getI18n, renderer, formats, createEvent, globalResize, interceptor, hooks, globalEvents, GLOBAL_EVENT_KEYS, useFns, renderEmptyElement } = VxeUI
 
@@ -298,123 +298,7 @@ export default defineVxeComponent({
       isColLoading: false
     })
 
-    const internalData: TableInternalData = {
-      tZindex: 0,
-      currKeyField: '',
-      isCurrDeepKey: false,
-      elemStore: {},
-      // 存放横向 X 虚拟滚动相关的信息
-      scrollXStore: {
-        preloadSize: 0,
-        offsetSize: 0,
-        visibleSize: 0,
-        visibleStartIndex: 0,
-        visibleEndIndex: 0,
-        startIndex: 0,
-        endIndex: 0
-      },
-      // 存放纵向 Y 虚拟滚动相关信息
-      scrollYStore: {
-        preloadSize: 0,
-        offsetSize: 0,
-        visibleSize: 0,
-        visibleStartIndex: 0,
-        visibleEndIndex: 0,
-        startIndex: 0,
-        endIndex: 0
-      },
-      // 表格宽度
-      tableWidth: 0,
-      // 表格高度
-      tableHeight: 0,
-      // 表头高度
-      headerHeight: 0,
-      // 表尾高度
-      footerHeight: 0,
-      customHeight: 0,
-      customMinHeight: 0,
-      customMaxHeight: 0,
-      // 当前 hover 行
-      hoverRow: null,
-      // 最后滚动位置
-      lastScrollLeft: 0,
-      lastScrollTop: 0,
-      // 单选框属性，已选中保留的行
-      radioReserveRow: null,
-      // 复选框属性，已选中保留的行集合
-      checkboxReserveRowMap: {},
-      // 行数据，已展开保留的行集合
-      rowExpandedReserveRowMap: {},
-      // 树结构数据，已展开保留的行集合
-      treeExpandedReserveRowMap: {},
-      // 树结构数据，不确定状态的集合
-      treeIndeterminateRowMaps: {},
-      // 列表完整数据、条件处理后
-      tableFullData: [],
-      afterFullData: [],
-      afterTreeFullData: [],
-      afterGroupFullData: [],
-      // 列表条件处理后数据集合
-      afterFullRowMaps: {},
-      // 树结构完整数据、条件处理后
-      tableFullTreeData: [],
-      // 行分组全量数据、条件处理后
-      tableFullGroupData: [],
-      tableSynchData: [],
-      tableSourceData: [],
-      // 收集的列配置（带分组）
-      collectColumn: [],
-      // 完整所有列（不带分组）
-      tableFullColumn: [],
-      // 渲染所有列
-      visibleColumn: [],
-      // 全量数据集（包括当前和已删除）
-      fullAllDataRowIdData: {},
-      // 数据集（仅当前）
-      fullDataRowIdData: {},
-      // 数据集（仅可视）
-      visibleDataRowIdData: {},
-      // 渲染中缓存数据
-      sourceDataRowIdData: {},
-      fullColumnIdData: {},
-      fullColumnFieldData: {},
-
-      // 合并单元格的数据
-      mergeBodyList: [],
-      mergeBodyMaps: {},
-      // 合并表尾的数据
-      mergeFooterList: [],
-      mergeFooterMaps: {},
-      // 已合并单元格数据集合
-      mergeBodyCellMaps: {},
-      // 已合并表尾数据集合
-      mergeFooterCellMaps: {},
-      // 已展开的行集合
-      rowExpandedMaps: {},
-      // 懒加载中的展开行的集合
-      rowExpandLazyLoadedMaps: {},
-      // 已展开的分组行
-      rowGroupExpandedMaps: {},
-      // 已展开树节点集合
-      treeExpandedMaps: {},
-      // 懒加载中的树节点的集合
-      treeExpandLazyLoadedMaps: {},
-      // 复选框属性，已选中的行集合
-      selectCheckboxMaps: {},
-      // 已标记的对象集
-      pendingRowMaps: {},
-      // 已新增的临时行
-      insertRowMaps: {},
-      // 已删除行
-      removeRowMaps: {},
-
-      cvCacheMaps: {},
-
-      inited: false,
-      tooltipTimeout: null,
-      initStatus: false,
-      isActivated: false
-    }
+    const internalData = createInternalData()
 
     let tableMethods = {} as TableMethods
     let tablePrivateMethods = {} as TablePrivateMethods
@@ -1991,12 +1875,17 @@ export default defineVxeComponent({
     const calcCellAutoHeight = (rowRest: VxeTableDefines.RowCacheItem, wrapperEl: HTMLDivElement) => {
       const cellElemList = 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 cellElem = cellElemList[i] as HTMLElement
-        const tdEl = cellElem.parentElement as HTMLTableCellElement
-        const topBottomPadding = Math.ceil(XEUtils.toNumber(tdEl.style.paddingTop) + XEUtils.toNumber(tdEl.style.paddingBottom))
-        const cellHeight = cellElem ? cellElem.clientHeight : 0
-        colHeight = Math.max(colHeight - topBottomPadding, Math.ceil(cellHeight))
+        const wrapperElem = cellElemList[i] as HTMLElement
+        const cellElem = wrapperElem.parentElement as HTMLTableCellElement
+        if (!firstCellStyle) {
+          firstCellStyle = getComputedStyle(cellElem)
+          topBottomPadding = firstCellStyle ? Math.ceil(XEUtils.toNumber(firstCellStyle.paddingTop) + XEUtils.toNumber(firstCellStyle.paddingBottom)) : 0
+        }
+        const cellHeight = wrapperElem ? wrapperElem.clientHeight : 0
+        colHeight = Math.max(colHeight, Math.ceil(cellHeight + topBottomPadding))
       }
       return colHeight
     }
@@ -3536,9 +3425,7 @@ export default defineVxeComponent({
       internalData.cvCacheMaps = {}
       reactData.isRowLoading = true
       reactData.scrollVMLoading = false
-      // internalData.treeExpandedMaps = {}
       reactData.treeExpandedFlag++
-      // internalData.rowExpandedMaps = {}
       reactData.rowExpandedFlag++
       internalData.insertRowMaps = {}
       reactData.insertRowFlag++
@@ -5476,6 +5363,25 @@ export default defineVxeComponent({
         })
         return rest
       },
+      recalcRowHeight (rowOrId) {
+        const { fullAllDataRowIdData } = internalData
+        const rows = XEUtils.isArray(rowOrId) ? rowOrId : [rowOrId]
+        const el = refElem.value
+        if (el) {
+          const { handleGetRowId } = createHandleGetRowId($xeTable)
+          el.setAttribute('data-calc-row', 'Y')
+          rows.forEach(row => {
+            const rowid = XEUtils.isString(row) || XEUtils.isNumber(row) ? row : handleGetRowId(row)
+            const rowRest = fullAllDataRowIdData[rowid]
+            if (rowRest) {
+              rowRest.resizeHeight = calcCellAutoHeight(rowRest, el)
+            }
+            el.removeAttribute('data-calc-row')
+          })
+          reactData.calcCellHeightFlag++
+        }
+        return nextTick()
+      },
       setRowHeight (rowOrId, height) {
         const { fullAllDataRowIdData } = internalData
         let status = false
@@ -8440,6 +8346,7 @@ export default defineVxeComponent({
         evnt.stopPropagation()
         evnt.preventDefault()
         const { row } = params
+        const { showOverflow } = props
         const { overflowX, scrollbarWidth, overflowY, scrollbarHeight } = reactData
         const { elemStore, fullAllDataRowIdData } = internalData
         const osbWidth = overflowY ? scrollbarWidth : 0
@@ -8468,7 +8375,10 @@ export default defineVxeComponent({
           return
         }
         const defaultRowHeight = computeDefaultRowHeight.value
-        const currCellHeight = rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight
+        let currCellHeight = rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight
+        if (!showOverflow) {
+          currCellHeight = tdEl.clientHeight
+        }
         const tableRect = tableEl.getBoundingClientRect()
         const trRect = trEl.getBoundingClientRect()
         const targetOffsetY = dragClientY - trRect.y - trEl.clientHeight
@@ -11889,7 +11799,7 @@ export default defineVxeComponent({
       if (value && value.length >= 50000) {
         warnLog('vxe.error.errLargeData', ['loadData(data), reloadData(data)'])
       }
-      loadTableData(value, false).then(() => {
+      loadTableData(value, true).then(() => {
         const { scrollXLoad, scrollYLoad, expandColumn } = reactData
         const expandOpts = computeExpandOpts.value
         internalData.inited = true
@@ -11943,29 +11853,22 @@ export default defineVxeComponent({
       })
     })
 
-    const reScrollFlag = ref(0)
+    const reLayoutFlag = ref(0)
     watch(computeSize, () => {
-      reScrollFlag.value++
+      reLayoutFlag.value++
     })
     watch(() => props.showHeader, () => {
-      reScrollFlag.value++
+      reLayoutFlag.value++
     })
     watch(() => props.showFooter, () => {
-      reScrollFlag.value++
+      reLayoutFlag.value++
     })
     watch(() => reactData.overflowX, () => {
-      reScrollFlag.value++
+      reLayoutFlag.value++
     })
     watch(() => reactData.overflowY, () => {
-      reScrollFlag.value++
-    })
-    watch(reScrollFlag, () => {
-      nextTick(() => {
-        tableMethods.recalculate(true).then(() => tableMethods.refreshScroll())
-      })
+      reLayoutFlag.value++
     })
-
-    const reLayoutFlag = ref(0)
     watch(() => props.height, () => {
       reLayoutFlag.value++
     })
@@ -11982,7 +11885,7 @@ export default defineVxeComponent({
       reLayoutFlag.value++
     })
     watch(reLayoutFlag, () => {
-      nextTick(() => tableMethods.recalculate(true))
+      $xeTable.recalculate(true)
     })
 
     const footFlag = ref(0)
@@ -11993,7 +11896,7 @@ export default defineVxeComponent({
       footFlag.value++
     })
     watch(footFlag, () => {
-      tableMethods.updateFooter()
+      $xeTable.updateFooter()
     })
 
     watch(() => props.syncResize, (value) => {
@@ -12354,10 +12257,7 @@ export default defineVxeComponent({
       if ($xeTable.closeMenu) {
         $xeTable.closeMenu()
       }
-      tablePrivateMethods.preventEvent(null, 'beforeUnmount', { $table: $xeTable })
-    })
 
-    onUnmounted(() => {
       globalEvents.off($xeTable, 'paste')
       globalEvents.off($xeTable, 'copy')
       globalEvents.off($xeTable, 'cut')
@@ -12367,7 +12267,13 @@ export default defineVxeComponent({
       globalEvents.off($xeTable, 'keydown')
       globalEvents.off($xeTable, 'resize')
       globalEvents.off($xeTable, 'contextmenu')
+
+      tablePrivateMethods.preventEvent(null, 'beforeUnmount', { $table: $xeTable })
+    })
+
+    onUnmounted(() => {
       tablePrivateMethods.preventEvent(null, 'unmounted', { $table: $xeTable })
+      XEUtils.assign(internalData, createInternalData())
     })
 
     nextTick(() => {

package/packages/table/src/util.ts

@@ -4,7 +4,127 @@ import { ColumnInfo } from './columnInfo'
 import { isPx, isScale, queryElement } from '../../ui/src/dom'
 import { eqEmptyValue } from '../../ui/src/utils'
 
-import type { VxeTableConstructor, VxeTablePrivateMethods, VxeTableDefines, VxeTablePropTypes } from '../../../types'
+import type { VxeTableConstructor, VxeTablePrivateMethods, VxeTableDefines, VxeTablePropTypes, TableInternalData } from '../../../types'
+
+export function createInternalData (): TableInternalData {
+  return {
+    tZindex: 0,
+    currKeyField: '',
+    isCurrDeepKey: false,
+    elemStore: {},
+    // 存放横向 X 虚拟滚动相关的信息
+    scrollXStore: {
+      preloadSize: 0,
+      offsetSize: 0,
+      visibleSize: 0,
+      visibleStartIndex: 0,
+      visibleEndIndex: 0,
+      startIndex: 0,
+      endIndex: 0
+    },
+    // 存放纵向 Y 虚拟滚动相关信息
+    scrollYStore: {
+      preloadSize: 0,
+      offsetSize: 0,
+      visibleSize: 0,
+      visibleStartIndex: 0,
+      visibleEndIndex: 0,
+      startIndex: 0,
+      endIndex: 0
+    },
+    // 表格宽度
+    tableWidth: 0,
+    // 表格高度
+    tableHeight: 0,
+    // 表头高度
+    headerHeight: 0,
+    // 表尾高度
+    footerHeight: 0,
+    customHeight: 0,
+    customMinHeight: 0,
+    customMaxHeight: 0,
+    // 当前 hover 行
+    hoverRow: null,
+    // 最后滚动位置
+    lastScrollLeft: 0,
+    lastScrollTop: 0,
+    // 单选框属性，已选中保留的行
+    radioReserveRow: null,
+    // 复选框属性，已选中保留的行集合
+    checkboxReserveRowMap: {},
+    // 行数据，已展开保留的行集合
+    rowExpandedReserveRowMap: {},
+    // 树结构数据，已展开保留的行集合
+    treeExpandedReserveRowMap: {},
+    // 树结构数据，不确定状态的集合
+    treeIndeterminateRowMaps: {},
+    // 列表完整数据、条件处理后
+    tableFullData: [],
+    afterFullData: [],
+    afterTreeFullData: [],
+    afterGroupFullData: [],
+    // 列表条件处理后数据集合
+    afterFullRowMaps: {},
+    // 树结构完整数据、条件处理后
+    tableFullTreeData: [],
+    // 行分组全量数据、条件处理后
+    tableFullGroupData: [],
+    tableSynchData: [],
+    tableSourceData: [],
+    // 收集的列配置（带分组）
+    collectColumn: [],
+    // 完整所有列（不带分组）
+    tableFullColumn: [],
+    // 渲染所有列
+    visibleColumn: [],
+    // 全量数据集（包括当前和已删除）
+    fullAllDataRowIdData: {},
+    // 数据集（仅当前）
+    fullDataRowIdData: {},
+    // 数据集（仅可视）
+    visibleDataRowIdData: {},
+    // 渲染中缓存数据
+    sourceDataRowIdData: {},
+    fullColumnIdData: {},
+    fullColumnFieldData: {},
+
+    // 合并单元格的数据
+    mergeBodyList: [],
+    mergeBodyMaps: {},
+    // 合并表尾的数据
+    mergeFooterList: [],
+    mergeFooterMaps: {},
+    // 已合并单元格数据集合
+    mergeBodyCellMaps: {},
+    // 已合并表尾数据集合
+    mergeFooterCellMaps: {},
+    // 已展开的行集合
+    rowExpandedMaps: {},
+    // 懒加载中的展开行的集合
+    rowExpandLazyLoadedMaps: {},
+    // 已展开的分组行
+    rowGroupExpandedMaps: {},
+    // 已展开树节点集合
+    treeExpandedMaps: {},
+    // 懒加载中的树节点的集合
+    treeExpandLazyLoadedMaps: {},
+    // 复选框属性，已选中的行集合
+    selectCheckboxMaps: {},
+    // 已标记的对象集
+    pendingRowMaps: {},
+    // 已新增的临时行
+    insertRowMaps: {},
+    // 已删除行
+    removeRowMaps: {},
+
+    cvCacheMaps: {},
+
+    inited: false,
+    tooltipTimeout: null,
+    initStatus: false,
+    isActivated: false
+  }
+}
 
 const getAllConvertColumns = (columns: any, parentColumn?: any) => {
   const result: any[] = []
@@ -551,18 +671,9 @@ export function rowToVisible ($xeTable: VxeTableConstructor & VxeTablePrivateMet
         if (!isCustomCellHeight && showOverflow) {
           return $xeTable.scrollTo(null, ($xeTable.findRowIndexOf(afterFullData, row) - 1) * defaultRowHeight)
         }
-        let scrollTop = 0
         const rowRest = fullAllDataRowIdData[rowid] || {}
         const rHeight = rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight
-        for (let i = 0; i < afterFullData.length; i++) {
-          const currRow = afterFullData[i]
-          const currRowid = getRowid($xeTable, currRow)
-          if (currRow === row || currRowid === rowid) {
-            break
-          }
-          const currRowRest = fullAllDataRowIdData[currRowid] || {}
-          scrollTop += currRowRest.resizeHeight || cellOpts.height || rowOpts.height || currRowRest.height || defaultRowHeight
-        }
+        const scrollTop = rowRest.oTop
         if (scrollTop < bodyScrollTop) {
           return $xeTable.scrollTo(null, scrollTop - leftFixedWidth - 1)
         }

package/packages/toolbar/src/toolbar.ts

@@ -1,4 +1,4 @@
-import { h, ref, computed, inject, createCommentVNode, VNode, reactive, nextTick, PropType } from 'vue'
+import { h, ref, computed, inject, createCommentVNode, VNode, reactive, nextTick, PropType, onUnmounted } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { VxeUI } from '../../ui'
@@ -10,6 +10,12 @@ import type { VxeGridConstructor, GridPrivateMethods, ToolbarMethods, ToolbarInt
 
 const { getConfig, getIcon, getI18n, renderer, commands, createEvent, useFns } = VxeUI
 
+function createInternalData (): ToolbarInternalData {
+  return {
+    connectTable: null
+  }
+}
+
 export default defineVxeComponent({
   name: 'VxeToolbar',
   props: {
@@ -64,9 +70,7 @@ export default defineVxeComponent({
       columns: []
     })
 
-    const internalData: ToolbarInternalData = {
-      connectTable: null
-    }
+    const internalData = createInternalData()
 
     const refElem = ref<HTMLDivElement>()
 
@@ -708,6 +712,10 @@ export default defineVxeComponent({
       }
     })
 
+    onUnmounted(() => {
+      XEUtils.assign(internalData, createInternalData())
+    })
+
     return $xeToolbar
   },
   render () {

package/styles/cssvar.scss

@@ -1,3 +1 @@
-/*已废弃*/
-
 @use './base.scss';