vxe-table 3.4.14-beta.1 → 3.4.15

package/packages/pager/src/pager.js

@@ -45,6 +45,11 @@ export default {
       default: null
     }
   },
+  data () {
+    return {
+      inpCurrPage: this.currentPage
+    }
+  },
   computed: {
     isSizes () {
       return this.layouts.some(name => name === 'Sizes')
@@ -75,6 +80,11 @@ export default {
       })
     }
   },
+  watch: {
+    currentPage (value) {
+      this.inpCurrPage = value
+    }
+  },
   render (h) {
     const { $scopedSlots, $xegrid, vSize, align, className } = this
     const childNodes = []
@@ -240,13 +250,14 @@ export default {
         h('input', {
           class: 'vxe-pager--goto',
           domProps: {
-            value: this.currentPage
+            value: this.inpCurrPage
           },
           attrs: {
             type: 'text',
             autocomplete: 'off'
           },
           on: {
+            input: this.jumpInputEvent,
             keydown: this.jumpKeydownEvent,
             blur: this.triggerJumpEvent
           }
@@ -373,6 +384,9 @@ export default {
         this.$emit('page-change', { type: 'size', pageSize, currentPage: Math.min(this.currentPage, this.getPageCount(this.total, pageSize)) })
       }
     },
+    jumpInputEvent (evnt) {
+      this.inpCurrPage = evnt.target.value
+    },
     jumpKeydownEvent (evnt) {
       if (evnt.keyCode === 13) {
         this.triggerJumpEvent(evnt)

package/packages/table/src/body.js

@@ -3,7 +3,7 @@ import GlobalConfig from '../../v-x-e-table/src/conf'
 import VXETable from '../../v-x-e-table'
 import { UtilTools, DomTools, isEnableConf } from '../../tools'
 import { getOffsetSize, calcTreeLine, mergeBodyMethod, removeScrollListener, restoreScrollListener } from './util'
-import { browse } from '../../tools/src/dom'
+import { setScrollTop } from '../../tools/src/dom'
 
 const renderType = 'body'
 
@@ -401,7 +401,7 @@ function renderRows (h, _vm, $xetable, fixedType, tableData, tableColumn) {
  * 同步滚动条
  */
 let scrollProcessTimeout
-function syncBodyScroll (scrollTop, elem1, elem2) {
+function syncBodyScroll (_vm, fixedType, scrollTop, elem1, elem2) {
   if (elem1 || elem2) {
     if (elem1) {
       removeScrollListener(elem1)
@@ -412,9 +412,27 @@ function syncBodyScroll (scrollTop, elem1, elem2) {
       elem2.scrollTop = scrollTop
     }
     clearTimeout(scrollProcessTimeout)
-    scrollProcessTimeout = setTimeout(function () {
+    scrollProcessTimeout = setTimeout(() => {
+      const { tableBody, leftBody, rightBody } = _vm.$refs
+      const bodyElem = tableBody.$el
+      const leftElem = leftBody ? leftBody.$el : null
+      const rightElem = rightBody ? rightBody.$el : null
       restoreScrollListener(elem1)
       restoreScrollListener(elem2)
+      // 检查滚动条是的同步
+      let targetTop = bodyElem.scrollTop
+      if (fixedType === 'left') {
+        if (leftElem) {
+          targetTop = leftElem.scrollTop
+        }
+      } else if (fixedType === 'right') {
+        if (rightElem) {
+          targetTop = rightElem.scrollTop
+        }
+      }
+      setScrollTop(bodyElem, targetTop)
+      setScrollTop(leftElem, targetTop)
+      setScrollTop(rightElem, targetTop)
     }, 300)
   }
 }
@@ -621,10 +639,10 @@ export default {
       }
       if (leftElem && fixedType === 'left') {
         scrollTop = leftElem.scrollTop
-        syncBodyScroll(scrollTop, bodyElem, rightElem)
+        syncBodyScroll($xetable, fixedType, scrollTop, bodyElem, rightElem)
       } else if (rightElem && fixedType === 'right') {
         scrollTop = rightElem.scrollTop
-        syncBodyScroll(scrollTop, bodyElem, leftElem)
+        syncBodyScroll($xetable, fixedType, scrollTop, bodyElem, leftElem)
       } else {
         if (isRollX) {
           if (headerElem) {
@@ -637,7 +655,7 @@ export default {
         if (leftElem || rightElem) {
           $xetable.checkScrolling()
           if (isRollY) {
-            syncBodyScroll(scrollTop, leftElem, rightElem)
+            syncBodyScroll($xetable, fixedType, scrollTop, leftElem, rightElem)
           }
         }
       }
@@ -689,15 +707,15 @@ export default {
             wheelYInterval = wheelYInterval - (wheelYTotal - wheelYSize)
           }
           const { scrollTop, clientHeight, scrollHeight } = bodyElem
-          const targerTop = scrollTop + (wheelYInterval * (isTopWheel ? -1 : 1))
-          bodyElem.scrollTop = targerTop
+          const targetTop = scrollTop + (wheelYInterval * (isTopWheel ? -1 : 1))
+          bodyElem.scrollTop = targetTop
           if (leftElem) {
-            leftElem.scrollTop = targerTop
+            leftElem.scrollTop = targetTop
           }
           if (rightElem) {
-            rightElem.scrollTop = targerTop
+            rightElem.scrollTop = targetTop
           }
-          if (isTopWheel ? targerTop < scrollHeight - clientHeight : targerTop >= 0) {
+          if (isTopWheel ? targetTop < scrollHeight - clientHeight : targetTop >= 0) {
             this.wheelTime = setTimeout(handleSmooth, 10)
           }
           this.wheelYTotal = wheelYTotal
@@ -728,8 +746,8 @@ export default {
       const { tableBody } = $refs
       const bodyElem = tableBody.$el
 
-      const deltaTop = browse.firefox ? deltaY * 40 : deltaY
-      const deltaLeft = browse.firefox ? deltaX * 40 : deltaX
+      const deltaTop = deltaY
+      const deltaLeft = deltaX
       const isTopWheel = deltaTop < 0
       // 如果滚动位置已经是顶部或底部，则不需要触发
       if (isTopWheel ? scrollBodyElem.scrollTop <= 0 : scrollBodyElem.scrollTop >= scrollBodyElem.scrollHeight - scrollBodyElem.clientHeight) {

package/packages/table/src/methods.js

@@ -9,7 +9,7 @@ import { browse, getPaddingTopBottomSize, setScrollTop, setScrollLeft } from '..
 import { formats } from '../../v-x-e-table/src/formats'
 
 const { getRowid, getRowkey, setCellValue, hasChildrenList, getColumnList } = UtilTools
-const { calcHeight, hasClass, addClass, removeClass, getEventTargetNode } = DomTools
+const { calcHeight, hasClass, addClass, removeClass, getEventTargetNode, isNodeElement } = DomTools
 
 const isWebkit = browse['-webkit'] && !browse.edge
 const debounceScrollYDuration = browse.msie ? 80 : 20
@@ -294,11 +294,30 @@ const Methods = {
     })
   },
   /**
-   * 手动处理数据
+   * 手动处理数据，用于手动排序与筛选
    * 对于手动更改了排序、筛选...等条件后需要重新处理数据时可能会用到
    */
   updateData () {
-    return this.handleTableData(true).then(this.updateFooter).then(this.recalculate)
+    const { scrollXLoad, scrollYLoad } = this
+    return this.handleTableData(true).then(() => {
+      this.updateFooter()
+      this.checkSelectionStatus()
+      if (scrollXLoad || scrollYLoad) {
+        if (scrollXLoad) {
+          this.updateScrollXSpace()
+        }
+        if (scrollYLoad) {
+          this.updateScrollYSpace()
+        }
+        return this.refreshScroll()
+      }
+    }).then(() => {
+      this.updateCellAreas()
+      return this.recalculate(true)
+    }).then(() => {
+      // 存在滚动行为未结束情况
+      setTimeout(() => this.recalculate(), 50)
+    })
   },
   handleTableData (force) {
     const { scrollYLoad, scrollYStore, fullDataRowIdData, afterFullData } = this
@@ -1688,15 +1707,22 @@ const Methods = {
     const leftBodyElem = leftBody ? leftBody.$el : null
     const rightBodyElem = rightBody ? rightBody.$el : null
     const tableFooterElem = tableFooter ? tableFooter.$el : null
-    // 还原滚动条位置
-    if (lastScrollLeft || lastScrollTop) {
-      return restoreScrollLocation(this, lastScrollLeft, lastScrollTop)
-    }
-    // 重置
-    setScrollTop(tableBodyElem, lastScrollTop)
-    setScrollTop(leftBodyElem, lastScrollTop)
-    setScrollTop(rightBodyElem, lastScrollTop)
-    setScrollLeft(tableFooterElem, lastScrollLeft)
+    return new Promise(resolve => {
+      // 还原滚动条位置
+      if (lastScrollLeft || lastScrollTop) {
+        return restoreScrollLocation(this, lastScrollLeft, lastScrollTop).then(() => {
+          // 存在滚动行为未结束情况
+          setTimeout(resolve, 30)
+        })
+      }
+      // 重置
+      setScrollTop(tableBodyElem, lastScrollTop)
+      setScrollTop(leftBodyElem, lastScrollTop)
+      setScrollTop(rightBodyElem, lastScrollTop)
+      setScrollLeft(tableFooterElem, lastScrollLeft)
+      // 存在滚动行为未结束情况
+      setTimeout(resolve, 30)
+    })
   },
   /**
    * 计算单元格列宽，动态分配可用剩余空间
@@ -1965,7 +1991,7 @@ const Methods = {
           }
         } 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 {
@@ -1981,7 +2007,7 @@ const Methods = {
           if (fixedWrapperElem) {
             const isRightFixed = fixedType === 'right'
             const fixedColumn = columnStore[`${fixedType}List`]
-            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`
@@ -2045,7 +2071,7 @@ const Methods = {
           }
           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`
@@ -2532,18 +2558,29 @@ const Methods = {
     }, tooltipOpts.leaveDelay)
     return false
   },
-  handleTargetEnterEvent () {
+  handleTargetEnterEvent (isClear) {
+    const $tooltip = this.$refs.tooltip
     clearTimeout(this.tooltipTimeout)
     this.tooltipActive = true
-    this.closeTooltip()
+    if (isClear) {
+      this.closeTooltip()
+    } else {
+      if ($tooltip) {
+        $tooltip.setActived(true)
+      }
+    }
   },
   handleTargetLeaveEvent () {
     const tooltipOpts = this.tooltipOpts
+    let $tooltip = this.$refs.tooltip
     this.tooltipActive = false
+    if ($tooltip) {
+      $tooltip.setActived(false)
+    }
     if (tooltipOpts.enterable) {
       this.tooltipTimeout = setTimeout(() => {
-        const tooltip = this.$refs.tooltip
-        if (tooltip && !tooltip.isHover) {
+        $tooltip = this.$refs.tooltip
+        if ($tooltip && !$tooltip.isActived()) {
           this.closeTooltip()
         }
       }, tooltipOpts.leaveDelay)
@@ -2556,12 +2593,12 @@ const Methods = {
     const { titleHelp } = column
     if (titleHelp.content || titleHelp.message) {
       const { $refs, tooltipStore } = this
-      const tooltip = $refs.tooltip
+      const $tooltip = $refs.tooltip
       const content = UtilTools.getFuncText(titleHelp.content || titleHelp.message)
-      this.handleTargetEnterEvent()
+      this.handleTargetEnterEvent(true)
       tooltipStore.visible = true
-      if (tooltip) {
-        tooltip.open(evnt.currentTarget, content)
+      if ($tooltip) {
+        $tooltip.open(evnt.currentTarget, content)
       }
     }
   },
@@ -2572,7 +2609,7 @@ const Methods = {
     const { tooltipStore } = this
     const { column } = params
     const titleElem = evnt.currentTarget
-    this.handleTargetEnterEvent()
+    this.handleTargetEnterEvent(tooltipStore.column !== column || tooltipStore.row)
     if (tooltipStore.column !== column || !tooltipStore.visible) {
       this.handleTooltip(evnt, titleElem, titleElem, null, params)
     }
@@ -2585,7 +2622,7 @@ const Methods = {
     const { actived } = editStore
     const { row, column } = params
     const cell = evnt.currentTarget
-    this.handleTargetEnterEvent()
+    this.handleTargetEnterEvent(tooltipStore.column !== column || tooltipStore.row !== row)
     if (isEnableConf(editConfig)) {
       if ((editOpts.mode === 'row' && actived.row === row) || (actived.row === row && actived.column === column)) {
         return
@@ -2612,7 +2649,7 @@ const Methods = {
     const { column } = params
     const { tooltipStore } = this
     const cell = evnt.currentTarget
-    this.handleTargetEnterEvent()
+    this.handleTargetEnterEvent(true)
     if (tooltipStore.column !== column || !tooltipStore.visible) {
       this.handleTooltip(evnt, cell, cell.querySelector('.vxe-cell--item') || cell.children[0], null, params)
     }

package/packages/tools/src/dom.js

@@ -80,6 +80,17 @@ export function setScrollLeft (elem, scrollLeft) {
   }
 }
 
+// export function setScrollLeftAndTop (elem, scrollLeft, scrollTop) {
+//   if (elem) {
+//     elem.scrollLeft = scrollLeft
+//     elem.scrollTop = scrollTop
+//   }
+// }
+
+function isNodeElement (elem) {
+  return elem && elem.nodeType === 1
+}
+
 export const DomTools = {
   browse,
   isPx (val) {
@@ -225,7 +236,8 @@ export const DomTools = {
       }
     }
     return num
-  }
+  },
+  isNodeElement
 }
 
 export default DomTools

package/packages/tooltip/src/tooltip.js

@@ -26,6 +26,20 @@ function updateTipStyle (_vm) {
   }
 }
 
+function showTip (_vm) {
+  const { $el, tipStore, zIndex } = _vm
+  const parentNode = $el.parentNode
+  if (!parentNode) {
+    document.body.appendChild($el)
+  }
+  _vm.updateValue(true)
+  _vm.updateZindex()
+  tipStore.placement = 'top'
+  tipStore.style = { width: 'auto', left: 0, top: 0, zIndex: zIndex || _vm.tipZindex }
+  tipStore.arrowStyle = { left: '50%' }
+  return _vm.updatePlacement()
+}
+
 export default {
   name: 'VxeTooltip',
   mixins: [vSize],
@@ -38,15 +52,16 @@ export default {
     zIndex: [String, Number],
     isArrow: { type: Boolean, default: true },
     enterable: Boolean,
+    enterDelay: { type: Number, default: () => GlobalConfig.tooltip.enterDelay },
     leaveDelay: { type: Number, default: () => GlobalConfig.tooltip.leaveDelay },
     leaveMethod: Function
   },
   data () {
     return {
       isUpdate: false,
-      isHover: false,
       visible: false,
       message: '',
+      tipActive: false,
       tipTarget: null,
       tipZindex: 0,
       tipStore: {
@@ -67,6 +82,13 @@ export default {
       this.isUpdate = false
     }
   },
+  created () {
+    this.showDelayTip = XEUtils.debounce(() => {
+      if (this.tipActive) {
+        showTip(this)
+      }
+    }, this.enterDelay, { leading: false, trailing: true })
+  },
   mounted () {
     const { $el, trigger, content, value } = this
     const parentNode = $el.parentNode
@@ -111,7 +133,7 @@ export default {
     }
   },
   render (h) {
-    const { $scopedSlots, vSize, theme, message, isHover, isArrow, visible, tipStore, enterable } = this
+    const { $scopedSlots, vSize, theme, message, tipActive, isArrow, visible, tipStore, enterable } = this
     let on
     if (enterable) {
       on = {
@@ -126,7 +148,7 @@ export default {
         'is--enterable': enterable,
         'is--visible': visible,
         'is--arrow': isArrow,
-        'is--hover': isHover
+        'is--actived': tipActive
       }],
       style: tipStore.style,
       ref: 'tipWrapper',
@@ -147,15 +169,16 @@ export default {
     },
     close () {
       this.tipTarget = null
+      this.tipActive = false
       Object.assign(this.tipStore, {
         style: {},
         placement: '',
         arrowStyle: null
       })
-      this.update(false)
+      this.updateValue(false)
       return this.$nextTick()
     },
-    update (value) {
+    updateValue (value) {
       if (value !== this.visible) {
         this.visible = value
         this.isUpdate = true
@@ -170,23 +193,18 @@ export default {
       }
     },
     toVisible (target, message) {
-      this.targetActive = true
       if (target) {
-        const { $el, tipStore, zIndex } = this
-        const parentNode = $el.parentNode
-        if (!parentNode) {
-          document.body.appendChild($el)
-        }
+        const { trigger, enterDelay } = this
+        this.tipActive = true
+        this.tipTarget = target
         if (message) {
           this.message = message
         }
-        this.tipTarget = target
-        this.update(true)
-        this.updateZindex()
-        tipStore.placement = 'top'
-        tipStore.style = { width: 'auto', left: 0, top: 0, zIndex: zIndex || this.tipZindex }
-        tipStore.arrowStyle = { left: '50%' }
-        return this.updatePlacement()
+        if (enterDelay && trigger === 'hover') {
+          this.showDelayTip()
+        } else {
+          return showTip(this)
+        }
       }
       return this.$nextTick()
     },
@@ -199,6 +217,12 @@ export default {
         }
       })
     },
+    isActived () {
+      return this.tipActive
+    },
+    setActived (actived) {
+      this.tipActive = !!actived
+    },
     clickEvent () {
       this[this.visible ? 'close' : 'open']()
     },
@@ -207,10 +231,10 @@ export default {
     },
     targetMouseleaveEvent () {
       const { trigger, enterable, leaveDelay } = this
-      this.targetActive = false
+      this.tipActive = false
       if (enterable && trigger === 'hover') {
         setTimeout(() => {
-          if (!this.isHover) {
+          if (!this.tipActive) {
             this.close()
           }
         }, leaveDelay)
@@ -219,15 +243,15 @@ export default {
       }
     },
     wrapperMouseenterEvent () {
-      this.isHover = true
+      this.tipActive = true
     },
     wrapperMouseleaveEvent (evnt) {
       const { leaveMethod, trigger, enterable, leaveDelay } = this
-      this.isHover = false
+      this.tipActive = false
       if (!leaveMethod || leaveMethod({ $event: evnt }) !== false) {
         if (enterable && trigger === 'hover') {
           setTimeout(() => {
-            if (!this.targetActive) {
+            if (!this.tipActive) {
               this.close()
             }
           }, leaveDelay)

package/packages/v-x-e-table/src/conf.js

@@ -228,6 +228,7 @@ export default {
     // size: null,
     trigger: 'hover',
     theme: 'dark',
+    enterDelay: 500,
     leaveDelay: 300
   },
   pager: {