vxe-table 4.1.20 → 4.2.0-beta.2

package/packages/table/src/table.ts

@@ -1,7 +1,8 @@
 import { defineComponent, getCurrentInstance, h, createCommentVNode, ComponentPublicInstance, resolveComponent, ComponentOptions, reactive, ref, Ref, provide, inject, nextTick, onActivated, onDeactivated, onBeforeUnmount, onUnmounted, watch, computed, ComputedRef, onMounted } from 'vue'
 import XEUtils from 'xe-utils'
-import { browse, isPx, isScale, hasClass, addClass, removeClass, getEventTargetNode, getPaddingTopBottomSize, setScrollTop, setScrollLeft } from '../../tools/dom'
-import { warnLog, errLog, getLog, getLastZIndex, nextZIndex, hasChildrenList, getFuncText, isEnableConf, formatText, eqEmptyValue } from '../../tools/utils'
+import { browse, isPx, isScale, hasClass, addClass, removeClass, getEventTargetNode, getPaddingTopBottomSize, setScrollTop, setScrollLeft, isNodeElement } from '../../tools/dom'
+import { getLastZIndex, nextZIndex, hasChildrenList, getFuncText, isEnableConf, formatText, eqEmptyValue } from '../../tools/utils'
+import { warnLog, errLog, getLog } from '../../tools/log'
 import { createResizeEvent, XEResizeObserver } from '../../tools/resize'
 import { GlobalEvent, hasEventKey, EVENT_KEYS } from '../../tools/event'
 import { useSize } from '../../hooks/size'
@@ -161,6 +162,14 @@ export default defineComponent({
         insertList: [],
         removeList: []
       },
+      // 存放 tooltip 相关信息
+      tooltipStore: {
+        row: null,
+        column: null,
+        content: null,
+        visible: false,
+        currOpts: null
+      },
       // 存放数据校验相关信息
       validStore: {
         visible: false,
@@ -233,8 +242,6 @@ export default defineComponent({
         startIndex: 0,
         endIndex: 0
       },
-      // 存放 tooltip 相关信息
-      tooltipStore: {},
       // 表格宽度
       tableWidth: 0,
       // 表格高度
@@ -280,7 +287,6 @@ export default defineComponent({
       fullColumnIdData: {},
       fullColumnFieldData: {},
       inited: false,
-      tooltipActive: false,
       tooltipTimeout: null,
       initStatus: false,
       isActivated: false
@@ -361,22 +367,17 @@ export default defineComponent({
 
     let computeTooltipOpts = ref() as ComputedRef<VxeTablePropTypes.TooltipOpts>
 
-    const handleTooltipLeaveMethod = () => {
-      const tooltipOpts = computeTooltipOpts.value
-      setTimeout(() => {
-        if (!internalData.tooltipActive) {
-          tableMethods.closeTooltip()
-        }
-      }, tooltipOpts.leaveDelay)
-      return false
-    }
-
     computeTooltipOpts = computed(() => {
-      const opts: VxeTablePropTypes.TooltipOpts = Object.assign({ leaveDelay: 300 }, GlobalConfig.table.tooltipConfig, props.tooltipConfig)
-      if (opts.enterable) {
-        opts.leaveMethod = handleTooltipLeaveMethod
+      return Object.assign({}, GlobalConfig.tooltip, GlobalConfig.table.tooltipConfig, props.tooltipConfig)
+    })
+
+    const computeTipConfig = computed(() => {
+      const { tooltipStore } = reactData
+      const tooltipOpts = computeTooltipOpts.value
+      return {
+        ...tooltipOpts,
+        ...tooltipStore.currOpts
       }
-      return opts
     })
 
     const computeValidTipOpts = computed(() => {
@@ -1420,7 +1421,7 @@ export default defineComponent({
             }
           } else if (layout === 'body') {
             const emptyBlockElem = elemStore[`${name}-${layout}-emptyBlock`]
-            if (wrapperElem) {
+            if (isNodeElement(wrapperElem)) {
               if (customMaxHeight) {
                 wrapperElem.style.maxHeight = `${fixedType ? customMaxHeight - headerHeight - (showFooter ? 0 : scrollbarHeight) : customMaxHeight - headerHeight}px`
               } else {
@@ -1434,7 +1435,7 @@ export default defineComponent({
 
             // 如果是固定列
             if (fixedWrapperElem) {
-              if (wrapperElem) {
+              if (isNodeElement(wrapperElem)) {
                 wrapperElem.style.top = `${headerHeight}px`
               }
               fixedWrapperElem.style.height = `${(customHeight > 0 ? customHeight - headerHeight - footerHeight : tableHeight) + headerHeight + footerHeight - scrollbarHeight * (showFooter ? 2 : 1)}px`
@@ -1450,14 +1451,6 @@ export default defineComponent({
                   tableColumn = fixedColumn
                 } else {
                   tableColumn = visibleColumn
-                  // 检查固定列是否被合并，合并范围是否超出固定列
-                  // if (mergeList.length && !isMergeLeftFixedExceeded && fixedType === 'left') {
-                  //   tableColumn = fixedColumn
-                  // } else if (mergeList.length && !isMergeRightFixedExceeded && fixedType === 'right') {
-                  //   tableColumn = fixedColumn
-                  // } else {
-                  //   tableColumn = visibleColumn
-                  // }
                 }
               } else {
                 tableColumn = visibleColumn
@@ -1483,14 +1476,6 @@ export default defineComponent({
                   tableColumn = fixedColumn
                 } else {
                   tableColumn = visibleColumn
-                  // 检查固定列是否被合并，合并范围是否超出固定列
-                  // if (mergeFooterList.length && !isMergeFooterLeftFixedExceeded && fixedType === 'left') {
-                  //   tableColumn = fixedColumn
-                  // } else if (mergeFooterList.length && !isMergeFooterRightFixedExceeded && fixedType === 'right') {
-                  //   tableColumn = fixedColumn
-                  // } else {
-                  //   tableColumn = visibleColumn
-                  // }
                 }
               } else {
                 tableColumn = visibleColumn
@@ -1498,7 +1483,7 @@ export default defineComponent({
             }
             tWidth = tableColumn.reduce((previous, column) => previous + column.renderWidth, 0)
 
-            if (wrapperElem) {
+            if (isNodeElement(wrapperElem)) {
               // 如果是固定列
               if (fixedWrapperElem) {
                 wrapperElem.style.top = `${customHeight > 0 ? customHeight - footerHeight : tableHeight + headerHeight}px`
@@ -2387,11 +2372,29 @@ export default defineComponent({
         })
       },
       /**
-       * 手动处理数据
+       * 手动处理数据，用于手动排序与筛选
        * 对于手动更改了排序、筛选...等条件后需要重新处理数据时可能会用到
        */
       updateData () {
-        return tablePrivateMethods.handleTableData(true).then(tableMethods.updateFooter).then(() => tableMethods.recalculate())
+        const { scrollXLoad, scrollYLoad } = reactData
+        return tablePrivateMethods.handleTableData(true).then(() => {
+          tableMethods.updateFooter()
+          if (scrollXLoad || scrollYLoad) {
+            if (scrollXLoad) {
+              tablePrivateMethods.updateScrollXSpace()
+            }
+            if (scrollYLoad) {
+              tablePrivateMethods.updateScrollYSpace()
+            }
+            return tableMethods.refreshScroll()
+          }
+        }).then(() => {
+          tablePrivateMethods.updateCellAreas()
+          return tableMethods.recalculate(true)
+        }).then(() => {
+          // 存在滚动行为未结束情况
+          setTimeout(() => $xetable.recalculate(), 50)
+        })
       },
       /**
        * 重新加载数据，不会清空表格状态
@@ -2924,16 +2927,22 @@ export default defineComponent({
         const leftBodyElem = leftBody ? leftBody.$el as HTMLDivElement : null
         const rightBodyElem = rightBody ? rightBody.$el as HTMLDivElement : null
         const tableFooterElem = tableFooter ? tableFooter.$el as HTMLDivElement : null
-        // 还原滚动条位置
-        if (lastScrollLeft || lastScrollTop) {
-          return restoreScrollLocation($xetable, lastScrollLeft, lastScrollTop)
-        }
-        // 重置
-        setScrollTop(tableBodyElem, lastScrollTop)
-        setScrollTop(leftBodyElem, lastScrollTop)
-        setScrollTop(rightBodyElem, lastScrollTop)
-        setScrollLeft(tableFooterElem, lastScrollLeft)
-        return nextTick()
+        return new Promise(resolve => {
+          // 还原滚动条位置
+          if (lastScrollLeft || lastScrollTop) {
+            return restoreScrollLocation($xetable, lastScrollLeft, lastScrollTop).then(resolve).then(() => {
+              // 存在滚动行为未结束情况
+              setTimeout(resolve, 30)
+            })
+          }
+          // 重置
+          setScrollTop(tableBodyElem, lastScrollTop)
+          setScrollTop(leftBodyElem, lastScrollTop)
+          setScrollTop(rightBodyElem, lastScrollTop)
+          setScrollLeft(tableFooterElem, lastScrollLeft)
+          // 存在滚动行为未结束情况
+          setTimeout(resolve, 30)
+        })
       },
       /**
        * 计算单元格列宽，动态分配可用剩余空间
@@ -2969,7 +2978,7 @@ export default defineComponent({
        * 关闭 tooltip
        */
       closeTooltip () {
-        const { tooltipStore } = internalData
+        const { tooltipStore } = reactData
         const $tooltip = refTooltip.value
         const $commTip = refCommTooltip.value
         if (tooltipStore.visible) {
@@ -4119,6 +4128,7 @@ export default defineComponent({
       const isEsc = hasEventKey(evnt, EVENT_KEYS.ESCAPE)
       if (isEsc) {
         tablePrivateMethods.preventEvent(evnt, 'event.keydown', null, () => {
+          tableMethods.dispatchEvent('keydown-start', {}, evnt)
           if (keyboardConfig && mouseConfig && mouseOpts.area && $xetable.handleKeyboardEvent) {
             $xetable.handleKeyboardEvent(evnt)
           } else if (actived.row || filterStore.visible || ctxMenuStore.visible) {
@@ -4141,6 +4151,7 @@ export default defineComponent({
             }
           }
           tableMethods.dispatchEvent('keydown', {}, evnt)
+          tableMethods.dispatchEvent('keydown-end', {}, evnt)
         })
       }
     }
@@ -4436,10 +4447,16 @@ export default defineComponent({
       tableMethods.recalculate(true)
     }
 
-    const handleTargetEnterEvent = () => {
+    const handleTargetEnterEvent = (isClear: boolean) => {
+      const $tooltip = refTooltip.value
       clearTimeout(internalData.tooltipTimeout)
-      internalData.tooltipActive = true
-      tableMethods.closeTooltip()
+      if (isClear) {
+        tableMethods.closeTooltip()
+      } else {
+        if ($tooltip) {
+          $tooltip.setActived(true)
+        }
+      }
     }
 
     /**
@@ -4450,11 +4467,10 @@ export default defineComponent({
      */
     const handleTooltip = (evnt: MouseEvent, cell: any, overflowElem: any, tipElem: any, params: any) => {
       params.cell = cell
-      const { tooltipStore } = internalData
+      const { tooltipStore } = reactData
       const tooltipOpts = computeTooltipOpts.value
       const { column, row } = params
       const { showAll, contentMethod } = tooltipOpts
-      const $tooltip = refTooltip.value
       const customContent = contentMethod ? contentMethod(params) : null
       const useCustom = contentMethod && !XEUtils.eqNull(customContent)
       const content = useCustom ? customContent : (column.type === 'html' ? overflowElem.innerText : overflowElem.textContent).trim()
@@ -4463,11 +4479,15 @@ export default defineComponent({
         Object.assign(tooltipStore, {
           row,
           column,
-          visible: true
+          visible: true,
+          currOpts: null
+        })
+        nextTick(() => {
+          const $tooltip = refTooltip.value
+          if ($tooltip) {
+            $tooltip.open(isCellOverflow ? overflowElem : (tipElem || overflowElem), formatText(content))
+          }
         })
-        if ($tooltip) {
-          $tooltip.open(isCellOverflow ? overflowElem : (tipElem || overflowElem), formatText(content))
-        }
       }
       return nextTick()
     }
@@ -4909,26 +4929,29 @@ export default defineComponent({
       },
       triggerHeaderHelpEvent (evnt, params) {
         const { column } = params
-        const { titleHelp } = column
-        if (titleHelp.content || titleHelp.message) {
-          const { tooltipStore } = internalData
-          const $tooltip = refTooltip.value
-          const content = getFuncText(titleHelp.content || titleHelp.message)
-          handleTargetEnterEvent()
+        const titlePrefix = column.titlePrefix || column.titleHelp
+        if (titlePrefix.content || titlePrefix.message) {
+          const { tooltipStore } = reactData
+          const content = getFuncText(titlePrefix.content || titlePrefix.message)
+          handleTargetEnterEvent(true)
           tooltipStore.visible = true
-          if ($tooltip) {
-            $tooltip.open(evnt.currentTarget, content)
-          }
+          tooltipStore.currOpts = { ...titlePrefix, content: null }
+          nextTick(() => {
+            const $tooltip = refTooltip.value
+            if ($tooltip) {
+              $tooltip.open(evnt.currentTarget, content)
+            }
+          })
         }
       },
       /**
        * 触发表头 tooltip 事件
        */
       triggerHeaderTooltipEvent (evnt, params) {
-        const { tooltipStore } = internalData
+        const { tooltipStore } = reactData
         const { column } = params
         const titleElem = evnt.currentTarget
-        handleTargetEnterEvent()
+        handleTargetEnterEvent(true)
         if (tooltipStore.column !== column || !tooltipStore.visible) {
           handleTooltip(evnt, titleElem, titleElem, null, params)
         }
@@ -4939,12 +4962,12 @@ export default defineComponent({
       triggerBodyTooltipEvent (evnt, params) {
         const { editConfig } = props
         const { editStore } = reactData
-        const { tooltipStore } = internalData
+        const { tooltipStore } = reactData
         const editOpts = computeEditOpts.value
         const { actived } = editStore
         const { row, column } = params
         const cell = evnt.currentTarget as HTMLTableCellElement
-        handleTargetEnterEvent()
+        handleTargetEnterEvent(tooltipStore.column !== column || tooltipStore.row !== row)
         if (isEnableConf(editConfig)) {
           if ((editOpts.mode === 'row' && actived.row === row) || (actived.row === row && actived.column === column)) {
             return
@@ -4969,20 +4992,23 @@ export default defineComponent({
        */
       triggerFooterTooltipEvent (evnt, params) {
         const { column } = params
-        const { tooltipStore } = internalData
+        const { tooltipStore } = reactData
         const cell = evnt.currentTarget as HTMLTableCellElement
-        handleTargetEnterEvent()
+        handleTargetEnterEvent(tooltipStore.column !== column || tooltipStore.row)
         if (tooltipStore.column !== column || !tooltipStore.visible) {
           handleTooltip(evnt, cell, cell.querySelector('.vxe-cell--item') || cell.children[0], null, params)
         }
       },
       handleTargetLeaveEvent () {
         const tooltipOpts = computeTooltipOpts.value
-        internalData.tooltipActive = false
+        let $tooltip = refTooltip.value
+        if ($tooltip) {
+          $tooltip.setActived(false)
+        }
         if (tooltipOpts.enterable) {
           internalData.tooltipTimeout = setTimeout(() => {
-            const $tooltip = refTooltip.value
-            if ($tooltip && !$tooltip.reactData.isHover) {
+            $tooltip = refTooltip.value
+            if ($tooltip && !$tooltip.isActived()) {
               tableMethods.closeTooltip()
             }
           }, tooltipOpts.leaveDelay)
@@ -5683,16 +5709,26 @@ export default defineComponent({
         const radioOpts = computeRadioOpts.value
         const checkboxOpts = computeCheckboxOpts.value
         const expandOpts = computeExpandOpts.value
+        const rowOpts = computeRowOpts.value
 
         if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
-          if (!props.rowId && (checkboxOpts.reserve || checkboxOpts.checkRowKeys || radioOpts.reserve || radioOpts.checkRowKey || expandOpts.expandRowKeys || treeOpts.expandRowKeys)) {
-            warnLog('vxe.error.reqProp', ['row-id'])
+          // if (props.rowId) {
+          //   warnLog('vxe.error.delProp', ['rowId', 'row-config.keyField'])
+          // }
+          // if (props.rowKey) {
+          //   warnLog('vxe.error.delProp', ['rowId', 'row-config.useKey'])
+          // }
+          // if (props.columnKey) {
+          //   warnLog('vxe.error.delProp', ['rowId', 'column-config.useKey'])
+          // }
+          if (!(props.rowId || rowOpts.keyField) && (checkboxOpts.reserve || checkboxOpts.checkRowKeys || radioOpts.reserve || radioOpts.checkRowKey || expandOpts.expandRowKeys || treeOpts.expandRowKeys)) {
+            warnLog('vxe.error.reqProp', ['row-config.keyField'])
           }
           if (props.editConfig && (editOpts.showStatus || editOpts.showUpdateStatus || editOpts.showInsertStatus) && !props.keepSource) {
             warnLog('vxe.error.reqProp', ['keep-source'])
           }
-          if (treeConfig && treeOpts.line && (!props.rowKey || !showOverflow)) {
-            warnLog('vxe.error.reqProp', ['row-key | show-overflow'])
+          if (treeConfig && treeOpts.line && (!(props.rowKey || rowOpts.useKey) || !showOverflow)) {
+            warnLog('vxe.error.reqProp', ['row-config.useKey | show-overflow'])
           }
           if (treeConfig && props.stripe) {
             warnLog('vxe.error.noTree', ['stripe'])
@@ -5844,7 +5880,7 @@ export default defineComponent({
       const { loading, stripe, showHeader, height, treeConfig, mouseConfig, showFooter, highlightCell, highlightHoverRow, highlightHoverColumn, editConfig } = props
       const { isGroup, overflowX, overflowY, scrollXLoad, scrollYLoad, scrollbarHeight, tableData, tableColumn, tableGroupColumn, footerTableData, initStore, columnStore, filterStore } = reactData
       const { leftList, rightList } = columnStore
-      const tooltipOpts = computeTooltipOpts.value
+      const tipConfig = computeTipConfig.value
       const treeOpts = computeTreeOpts.value
       const rowOpts = computeRowOpts.value
       const columnOpts = computeColumnOpts.value
@@ -6020,7 +6056,7 @@ export default defineComponent({
          */
         hasUseTooltip ? h(resolveComponent('vxe-tooltip') as ComponentOptions, {
           ref: refTooltip,
-          ...tooltipOpts
+          ...tipConfig
         }) : createCommentVNode()
       ])
     }

package/packages/table/src/util.ts

@@ -44,14 +44,16 @@ export function getRowUniqueId () {
 // 行主键 key
 export function getRowkey ($xetable: VxeTableConstructor) {
   const { props } = $xetable
+  const { computeRowOpts } = $xetable.getComputeMaps()
   const { rowId } = props
-  return rowId || '_X_ID'
+  const rowOpts = computeRowOpts.value
+  return rowId || rowOpts.keyField || '_X_ID'
 }
 
 // 行主键 value
 export function getRowid ($xetable: VxeTableConstructor, row: any) {
-  const rowId = XEUtils.get(row, getRowkey($xetable))
-  return XEUtils.eqNull(rowId) ? '' : encodeURIComponent(rowId)
+  const rowid = XEUtils.get(row, getRowkey($xetable))
+  return XEUtils.eqNull(rowid) ? '' : encodeURIComponent(rowid)
 }
 
 export interface XEColumnInstance {

package/packages/textarea/index.ts

@@ -4,9 +4,10 @@ import { dynamicApp } from '../dynamics'
 
 export const Textarea = Object.assign(VxeTextareaComponent, {
   install: function (app: App) {
-    dynamicApp.component(VxeTextareaComponent.name, VxeTextareaComponent)
     app.component(VxeTextareaComponent.name, VxeTextareaComponent)
   }
 })
 
+dynamicApp.component(VxeTextareaComponent.name, VxeTextareaComponent)
+
 export default Textarea

package/packages/toolbar/index.ts

@@ -4,9 +4,10 @@ import { dynamicApp } from '../dynamics'
 
 export const Toolbar = Object.assign(VxeToolbarComponent, {
   install: function (app: App) {
-    dynamicApp.component(VxeToolbarComponent.name, VxeToolbarComponent)
     app.component(VxeToolbarComponent.name, VxeToolbarComponent)
   }
 })
 
+dynamicApp.component(VxeToolbarComponent.name, VxeToolbarComponent)
+
 export default Toolbar

package/packages/toolbar/src/toolbar.ts

@@ -4,7 +4,8 @@ import GlobalConfig from '../../v-x-e-table/src/conf'
 import { VXETable } from '../../v-x-e-table'
 import { useSize } from '../../hooks/size'
 import { getEventTargetNode } from '../../tools/dom'
-import { warnLog, errLog, formatText } from '../../tools/utils'
+import { formatText } from '../../tools/utils'
+import { warnLog, errLog } from '../../tools/log'
 import { GlobalEvent } from '../../tools/event'
 
 import { VxeGridConstructor, GridPrivateMethods, ToolbarMethods, VxeToolbarConstructor, VxeToolbarEmits, VxeToolbarPropTypes, VxeTableConstructor, ToolbarPrivateRef, VxeTableMethods, VxeTablePrivateMethods, ToolbarReactData, VxeTableDefines } from '../../../types/all'

package/packages/tools/dom.ts

@@ -89,6 +89,13 @@ export function setScrollLeft (elem: HTMLElement | null, scrollLeft: number) {
   }
 }
 
+// export function setScrollLeftAndTop (elem: HTMLElement | null, scrollLeft: number, scrollTop: number) {
+//   if (elem) {
+//     elem.scrollLeft = scrollLeft
+//     elem.scrollTop = scrollTop
+//   }
+// }
+
 export function updateCellTitle (overflowElem: any, column: any) {
   const content = column.type === 'html' ? overflowElem.innerText : overflowElem.textContent
   if (overflowElem.getAttribute('title') !== content) {
@@ -146,3 +153,7 @@ export function triggerEvent (targetElem: Element, type: string) {
     targetElem.dispatchEvent(new Event(type))
   }
 }
+
+export function isNodeElement (elem: Element) {
+  return elem && elem.nodeType === 1
+}

package/packages/tools/log.ts

@@ -0,0 +1,16 @@
+import GlobalConfig from '../v-x-e-table/src/conf'
+
+export function getLog (message: string, params?: any) {
+  return `[vxe-table v${process.env.VUE_APP_VXE_TABLE_VERSION}] ${GlobalConfig.i18n(message, params)}`
+}
+
+function outLog (type: 'log' | 'warn' | 'error') {
+  return function (message: string, params?: any) {
+    const msg = getLog(message, params)
+    console[type](msg)
+    return msg
+  }
+}
+
+export const warnLog = outLog('warn')
+export const errLog = outLog('error')

package/packages/tools/utils.ts

@@ -4,18 +4,6 @@ import GlobalConfig from '../v-x-e-table/src/conf'
 let zindexIndex = 0
 let lastZindex = 1
 
-export function getLog (message: string, params?: any) {
-  return `[vxe-table] ${GlobalConfig.i18n(message, params)}`
-}
-
-function outLog (type: 'log' | 'warn' | 'error') {
-  return function (message: string, params?: any) {
-    const msg = getLog(message, params)
-    console[type](msg)
-    return msg
-  }
-}
-
 export function isEnableConf (conf: any): boolean {
   return conf && conf.enabled !== false
 }
@@ -41,9 +29,6 @@ export function getLastZIndex () {
   return lastZindex
 }
 
-export const warnLog = outLog('warn')
-export const errLog = outLog('error')
-
 export function hasChildrenList (item: any) {
   return item && item.children && item.children.length > 0
 }

package/packages/tooltip/index.ts

@@ -6,9 +6,10 @@ import { dynamicApp } from '../dynamics'
 export const Tooltip = Object.assign(VxeTooltipComponent, {
   install: function (app: App) {
     VXETable.tooltip = true
-    dynamicApp.component(VxeTooltipComponent.name, VxeTooltipComponent)
     app.component(VxeTooltipComponent.name, VxeTooltipComponent)
   }
 })
 
+dynamicApp.component(VxeTooltipComponent.name, VxeTooltipComponent)
+
 export default Tooltip