vxe-table 3.19.39 → 3.20.0-beta.1

package/packages/table/src/cell.ts

@@ -491,7 +491,7 @@ export const Cell = {
     ])
   },
   renderDeepCell (h: CreateElement, params: VxeTableDefines.CellRenderBodyParams & { $table: VxeTableConstructor & VxeTablePrivateMethods }) {
-    return Cell.renderDeepNodeBtn(h, params, Cell.renderDefaultCell.call(this, h, params))
+    return Cell.renderDeepNodeBtn(h, params, Cell.renderDefaultCell(h, params))
   },
   renderDefaultFooter (h: CreateElement, params: VxeTableDefines.CellRenderFooterParams & { $table: VxeTableConstructor & VxeTablePrivateMethods }) {
     return getFooterContent(h, params)
@@ -1278,7 +1278,7 @@ export const Cell = {
         }, [getDefaultCellLabel(cellParams)])
       ])
     }
-    return Cell.renderDefaultCell.call($table, h, cellParams)
+    return Cell.renderDefaultCell(h, cellParams)
   }
 } as any
 

package/packages/table/src/methods.ts

@@ -1,5 +1,5 @@
 import XEUtils from 'xe-utils'
-import { getTpImg, isPx, isScale, hasClass, addClass, removeClass, getEventTargetNode, getPaddingTopBottomSize, setScrollTop, setScrollLeft, toCssUnit, hasControlKey, checkTargetElement } from '../../ui/src/dom'
+import { getTpImg, isPx, isScale, hasClass, addClass, removeClass, scrollTopTo, getEventTargetNode, getPaddingTopBottomSize, setScrollTop, setScrollLeft, toCssUnit, hasControlKey, checkTargetElement } from '../../ui/src/dom'
 import { getLastZIndex, nextZIndex, hasChildrenList, getFuncText, isEnableConf, formatText, eqEmptyValue } from '../../ui/src/utils'
 import { VxeUI } from '../../ui'
 import Cell from './cell'
@@ -9,7 +9,8 @@ import { moveRowAnimateToTb, clearRowAnimate, moveColAnimateToLr, clearColAnimat
 import { warnLog, errLog } from '../../ui/src/log'
 import { getCrossTableDragRowInfo } from './store'
 
-import type { VxeTableDefines, VxeColumnPropTypes, VxeTableEmits, ValueOf, TableReactData, VxeTableConstructor, VxeToolbarConstructor, VxeToolbarInstance, TableInternalData, VxeGridConstructor, VxeTablePrivateMethods, VxeTooltipInstance, VxeTablePropTypes, VxeGridPrivateMethods } from '../../../types'
+import type { VxeTooltipInstance, ValueOf } from 'vxe-pc-ui'
+import type { VxeTableDefines, VxeColumnPropTypes, VxeTableEmits, TableReactData, VxeTableConstructor, VxeToolbarConstructor, VxeToolbarInstance, TableInternalData, VxeGridConstructor, VxeTablePrivateMethods, VxeTablePropTypes, VxeGridPrivateMethods } from '../../../types'
 
 const { getConfig, getI18n, renderer, formats, interceptor, createEvent } = VxeUI
 
@@ -4061,28 +4062,6 @@ const wheelScrollLeftTo = (scrollLeft: number, cb: (offsetLeft: number) => void)
   })
 }
 
-const wheelScrollTopTo = (diffNum: number, cb: (progress: number) => void) => {
-  const duration = Math.abs(diffNum)
-  const startTime = performance.now()
-  let countTop = 0
-  const step = (timestamp: number) => {
-    let progress = (timestamp - startTime) / duration
-    if (progress < 0) {
-      progress = 0
-    } else if (progress > 1) {
-      progress = 1
-    }
-    const easedProgress = Math.pow(progress, 2)
-    const offsetTop = Math.floor((diffNum * easedProgress)) - countTop
-    countTop += offsetTop
-    cb(offsetTop)
-    if (progress < 1) {
-      requestAnimationFrame(step)
-    }
-  }
-  requestAnimationFrame(step)
-}
-
 const syncGanttScrollTop = ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, scrollTop: number) => {
   const internalData = $xeTable as unknown as TableInternalData
 
@@ -7416,8 +7395,8 @@ const tableMethods: any = {
     const { actived } = editStore
     if (isActivated && !filterStore.visible) {
       if (!(actived.row || actived.column)) {
-        if (keyboardConfig && keyboardOpts.isClip && mouseConfig && mouseOpts.area && this.handlePasteCellAreaEvent) {
-          this.handlePasteCellAreaEvent(evnt)
+        if (keyboardConfig && keyboardOpts.isClip && mouseConfig && mouseOpts.area && $xeTable.handlePeClAreaEvent) {
+          $xeTable.handlePeClAreaEvent(evnt)
         }
       }
       $xeTable.dispatchEvent('paste', {}, evnt)
@@ -7430,8 +7409,8 @@ const tableMethods: any = {
     const { actived } = editStore
     if (isActivated && !filterStore.visible) {
       if (!(actived.row || actived.column)) {
-        if (keyboardConfig && keyboardOpts.isClip && mouseConfig && mouseOpts.area && this.handleCopyCellAreaEvent) {
-          this.handleCopyCellAreaEvent(evnt)
+        if (keyboardConfig && keyboardOpts.isClip && mouseConfig && mouseOpts.area && $xeTable.handleCyClAreaEvent) {
+          $xeTable.handleCyClAreaEvent(evnt)
         }
       }
       $xeTable.dispatchEvent('copy', {}, evnt)
@@ -7444,8 +7423,8 @@ const tableMethods: any = {
     const { actived } = editStore
     if (isActivated && !filterStore.visible) {
       if (!(actived.row || actived.column)) {
-        if (keyboardConfig && keyboardOpts.isClip && mouseConfig && mouseOpts.area && this.handleCutCellAreaEvent) {
-          this.handleCutCellAreaEvent(evnt)
+        if (keyboardConfig && keyboardOpts.isClip && mouseConfig && mouseOpts.area && $xeTable.handleCutCellAreaEvent) {
+          $xeTable.handleCutCellAreaEvent(evnt)
         }
       }
       $xeTable.dispatchEvent('cut', {}, evnt)
@@ -7635,12 +7614,13 @@ const tableMethods: any = {
     }
   },
   openTooltip (target: HTMLElement, content: string | number) {
-    const { $refs } = this
-    const commTip = $refs.refCommTooltip
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+
+    const commTip = $xeTable.$refs.refCommTooltip as VxeTooltipInstance
     if (commTip) {
       return commTip.open(target, content)
     }
-    return this.$nextTick()
+    return $xeTable.$nextTick()
   },
   /**
    * 关闭 tooltip
@@ -7668,23 +7648,31 @@ const tableMethods: any = {
     if (commTip) {
       commTip.close()
     }
-    return this.$nextTick()
+    return $xeTable.$nextTick()
   },
   /**
    * 判断列头复选框是否被选中
    */
   isAllCheckboxChecked () {
-    return this.isAllSelected
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+    const reactData = $xeTable as unknown as TableReactData
+
+    return reactData.isAllSelected
   },
   /**
    * 判断列头复选框是否被半选
    */
   isAllCheckboxIndeterminate () {
-    return !this.isAllSelected && this.isIndeterminate
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+    const reactData = $xeTable as unknown as TableReactData
+
+    return !reactData.isAllSelected && reactData.isIndeterminate
   },
   isCheckboxIndeterminate () {
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+
     warnLog('vxe.error.delFunc', ['isCheckboxIndeterminate', 'isAllCheckboxIndeterminate'])
-    return this.isAllCheckboxIndeterminate()
+    return $xeTable.isAllCheckboxIndeterminate()
   },
   /**
    * 获取复选框半选状态的行数据
@@ -8254,8 +8242,11 @@ const tableMethods: any = {
     return null
   },
   clearRadioReserve () {
-    this.radioReserveRow = null
-    return this.$nextTick()
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+    const internalData = $xeTable as unknown as TableInternalData
+
+    internalData.radioReserveRow = null
+    return $xeTable.$nextTick()
   },
   /**
    * 获取复选框保留选中的行
@@ -8300,13 +8291,20 @@ const tableMethods: any = {
     return reserveSelection
   },
   clearCheckboxReserve () {
-    this.checkboxReserveRowMap = {}
-    return this.$nextTick()
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+    const internalData = $xeTable as unknown as TableInternalData
+
+    internalData.checkboxReserveRowMap = {}
+    return $xeTable.$nextTick()
   },
   handleCheckboxReserveRow (row: any, checked: any) {
-    const { checkboxReserveRowMap, checkboxOpts } = this
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+    const internalData = $xeTable as unknown as TableInternalData
+
+    const { checkboxReserveRowMap } = internalData
+    const checkboxOpts = $xeTable.computeCheckboxOpts
     if (checkboxOpts.reserve) {
-      const rowid = getRowid(this, row)
+      const rowid = getRowid($xeTable, row)
       if (checked) {
         checkboxReserveRowMap[rowid] = row
       } else if (checkboxReserveRowMap[rowid]) {
@@ -8315,7 +8313,7 @@ const tableMethods: any = {
     }
   },
   handleCheckAllEvent (evnt: any, value: any) {
-    const $xeTable = this
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
 
     handleCheckedAllCheckboxRow($xeTable, value)
     if (evnt) {
@@ -11722,7 +11720,7 @@ const tableMethods: any = {
           fixed: ''
         })
       } else {
-        wheelScrollTopTo(scrollTop - currScrollTop, (offsetTop: number) => {
+        scrollTopTo(scrollTop - currScrollTop, (offsetTop: number) => {
           const currTopNum = bodyScrollElem.scrollTop + offsetTop
           internalData.inWheelScroll = true
           setScrollTop(yHandleEl, currTopNum)

package/packages/table/src/table.ts

@@ -2,7 +2,7 @@ import { CreateElement } from 'vue'
 import XEUtils from 'xe-utils'
 import { getFuncText, isEnableConf } from '../../ui/src/utils'
 import { initTpImg } from '../../ui/src/dom'
-import { createInternalData, createHandleGetRowId, getCalcHeight, hasDeepKey } from './util'
+import { createReactData, createInternalData, createHandleGetRowId, getCalcHeight, hasDeepKey } from './util'
 import { VxeUI } from '../../ui'
 import methods from './methods'
 import TableBodyComponent from './body'
@@ -546,257 +546,7 @@ export default {
   data () {
     const xID = XEUtils.uniqueId()
 
-    const reactData: TableReactData = {
-      // 低性能的静态列
-      staticColumns: [],
-      // 渲染的列分组
-      tableGroupColumn: [],
-      // 可视区渲染的列
-      tableColumn: [],
-      // 渲染中的数据
-      tableData: [],
-      // 是否启用了横向 X 可视渲染方式加载
-      scrollXLoad: false,
-      // 是否启用了纵向 Y 可视渲染方式加载
-      scrollYLoad: false,
-      // 是否存在纵向滚动条
-      overflowY: true,
-      // 是否存在横向滚动条
-      overflowX: false,
-      // 纵向滚动条的宽度
-      scrollbarWidth: 0,
-      // 横向滚动条的高度
-      scrollbarHeight: 0,
-      // 最后滚动时间戳
-      lastScrollTime: 0,
-      // 行高
-      rowHeight: 0,
-      // 表格父容器的高度
-      parentHeight: 0,
-      // 是否使用分组表头
-      isGroup: false,
-      isAllOverflow: false,
-      // 复选框属性，是否全选
-      isAllSelected: false,
-      // 复选框属性，有选中且非全选状态
-      isIndeterminate: false,
-      // 当前行
-      currentRow: null,
-      // 单选框属性，选中列
-      currentColumn: null,
-      // 单选框属性，选中行
-      selectRadioRow: null,
-      // 表尾合计数据
-      footerTableData: [],
-      // 行分组列信息
-      rowGroupColumn: null,
-      // 展开列信息
-      expandColumn: null,
-      checkboxColumn: null,
-      radioColumn: null,
-      // 树节点列信息
-      treeNodeColumn: null,
-      hasFixedColumn: false,
-      // 刷新列标识，当列筛选被改变时，触发表格刷新数据
-      upDataFlag: 0,
-      // 刷新列标识，当列的特定属性被改变时，触发表格刷新列
-      reColumnFlag: 0,
-      // 初始化标识
-      initStore: {
-        filter: false,
-        import: false,
-        export: false,
-        custom: false
-      },
-      // 自定义列相关的信息
-      customStore: {
-        btnEl: null,
-        isAll: false,
-        isIndeterminate: false,
-        activeBtn: false,
-        activeWrapper: false,
-        visible: false,
-        maxHeight: 0,
-        oldSortMaps: {},
-        oldFixedMaps: {},
-        oldVisibleMaps: {}
-      },
-      customColumnList: [],
-      // 当前选中的筛选列
-      filterStore: {
-        isAllSelected: false,
-        isIndeterminate: false,
-        style: null,
-        column: null,
-        visible: false,
-        maxHeight: null
-      },
-      // 存放列相关的信息
-      columnStore: {
-        leftList: [],
-        centerList: [],
-        rightList: [],
-        resizeList: [],
-        pxList: [],
-        pxMinList: [],
-        autoMinList: [],
-        scaleList: [],
-        scaleMinList: [],
-        autoList: [],
-        remainList: []
-      },
-      // 存放快捷菜单的信息
-      ctxMenuStore: {
-        selected: null,
-        visible: false,
-        showChild: false,
-        selectChild: null,
-        list: [],
-        style: null
-      },
-      // 存放可编辑相关信息
-      editStore: {
-        indexs: {
-          columns: []
-        },
-        titles: {
-          columns: []
-        },
-        // 选中源
-        selected: {
-          row: null,
-          column: null
-        },
-        // 已复制源
-        copyed: {
-          cut: false,
-          rows: [],
-          columns: []
-        },
-        // 激活
-        actived: {
-          row: null,
-          column: null
-        },
-        // 当前被强制聚焦单元格，只会在鼠标点击后算聚焦
-        focused: {
-          row: null,
-          column: null
-        }
-      },
-      // 存放 tooltip 相关信息
-      tooltipStore: {
-        row: null,
-        column: null,
-        content: null,
-        visible: false,
-        type: null,
-        currOpts: {}
-      },
-      // 存放数据校验相关信息
-      validStore: {
-        visible: false
-      },
-      validErrorMaps: {},
-      // 导入相关信息
-      importStore: {
-        inited: false,
-        file: null,
-        type: '',
-        modeList: [],
-        typeList: [],
-        filename: '',
-        visible: false
-      },
-      importParams: {
-        mode: '',
-        types: null,
-        message: true
-      },
-      // 导出相关信息
-      exportStore: {
-        inited: false,
-        name: '',
-        modeList: [],
-        typeList: [],
-        columns: [],
-        isPrint: false,
-        hasFooter: false,
-        hasMerge: false,
-        hasTree: false,
-        hasColgroup: false,
-        visible: false
-      },
-      exportParams: {
-        filename: '',
-        sheetName: '',
-        mode: '',
-        type: '',
-        isColgroup: false,
-        isMerge: false,
-        isAllExpand: false,
-        useStyle: false,
-        original: false,
-        message: true,
-        isHeader: false,
-        isTitle: false,
-        isFooter: false
-      },
-
-      visiblwRowsFlag: 1,
-
-      isRowGroupStatus: false,
-      rowGroupList: [],
-      aggHandleFields: [],
-      aggHandleAggColumns: [],
-
-      rowGroupExpandedFlag: 1,
-      rowExpandedFlag: 1,
-      treeExpandedFlag: 1,
-      updateCheckboxFlag: 1,
-      pendingRowFlag: 1,
-      insertRowFlag: 1,
-      removeRowFlag: 1,
-
-      mergeHeadFlag: 1,
-      mergeBodyFlag: 1,
-      mergeFootFlag: 1,
-
-      rowHeightStore: {
-        large: 52,
-        default: 48,
-        medium: 44,
-        small: 40,
-        mini: 36
-      },
-
-      scrollVMLoading: false,
-      scrollYHeight: 0,
-      scrollYTop: 0,
-      isScrollYBig: false,
-      scrollXLeft: 0,
-      scrollXWidth: 0,
-      isScrollXBig: false,
-
-      lazScrollLoading: false,
-
-      rowExpandHeightFlag: 1,
-      calcCellHeightFlag: 1,
-      resizeHeightFlag: 1,
-      resizeWidthFlag: 1,
-
-      isCustomStatus: false,
-
-      isCrossDragRow: false,
-      dragRow: null,
-      isCrossDragCol: false,
-      dragCol: null,
-      dragTipText: '',
-
-      isDragResize: false,
-      isRowLoading: false,
-      isColLoading: false
-    }
+    const reactData = createReactData()
 
     return {
       xID,
@@ -846,7 +596,12 @@ export default {
       const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
       const props = $xeTable
 
-      return Object.assign({}, getConfig().table.validConfig, props.validConfig)
+      const opts = Object.assign({}, getConfig().table.validConfig, props.validConfig)
+      // 兼容老版本
+      if (XEUtils.isBoolean(opts.showMessage)) {
+        opts.showErrorMessage = opts.showMessage
+      }
+      return opts
     },
     sXOpts () {
       return this.computeVirtualXOpts
@@ -1855,7 +1610,7 @@ export default {
     if (rowOpts.height && !this.showOverflow) {
       warnLog('vxe.error.notProp', ['table.show-overflow'])
     }
-    if (!$xeTable.triggerCellAreaModnEvent) {
+    if (!$xeTable.triggerClAreaModnEvent) {
       if (props.areaConfig) {
         warnLog('vxe.error.notProp', ['area-config'])
       }
@@ -2156,6 +1911,7 @@ export default {
   },
   beforeDestroy () {
     const $xeTable = this
+    const reactData = $xeTable as unknown as TableReactData
 
     const teleportWrapperEl = $xeTable.$refs.refTeleportWrapper as HTMLDivElement
     if (teleportWrapperEl && teleportWrapperEl.parentElement) {
@@ -2187,6 +1943,8 @@ export default {
     globalEvents.off($xeTable, 'contextmenu')
 
     this.preventEvent(null, 'beforeDestroy')
+
+    XEUtils.assign(reactData, createReactData())
   },
   destroyed () {
     const $xeTable = this
@@ -2458,11 +2216,7 @@ export default {
           isContentMenu
             ? h(TableMenuPanelComponent, {
               key: 'tm',
-              ref: 'refTableMenu',
-              props: {
-                ctxMenuStore: this.ctxMenuStore,
-                ctxMenuOpts: this.ctxMenuOpts
-              }
+              ref: 'refTableMenu'
             })
             : renderEmptyElement($xeTable)
         ])
@@ -2555,7 +2309,7 @@ export default {
         /**
          * 校验提示
          */
-        VxeUITooltipComponent && this.editRules && validOpts.showMessage && (validOpts.message === 'default' ? !height : validOpts.message === 'tooltip')
+        VxeUITooltipComponent && this.editRules && validOpts.showErrorMessage && (validOpts.message === 'default' ? !height : validOpts.message === 'tooltip')
           ? h(VxeUITooltipComponent, {
             key: 'vtp',
             ref: 'refValidTooltip',