vxe-table 3.10.8 → 3.10.10

package/packages/table/src/methods.ts

@@ -1808,80 +1808,137 @@ const Methods = {
    * 设置为固定列
    */
   setColumnFixed (fieldOrColumn: any, fixed: any) {
-    const { isMaxFixedColumn, columnOpts } = this
-    const column = handleFieldOrColumn(this, fieldOrColumn)
-    const targetColumn = getRootColumn(this, column)
-    if (targetColumn && targetColumn.fixed !== fixed) {
-      // 是否超过最大固定列数量
-      if (!targetColumn.fixed && isMaxFixedColumn) {
-        if (VxeUI.modal) {
-          VxeUI.modal.message({
-            status: 'error',
-            content: getI18n('vxe.table.maxFixedCol', [columnOpts.maxFixedSize])
-          })
+    const $xeTable = this
+
+    let status = false
+    const cols = XEUtils.isArray(fieldOrColumn) ? fieldOrColumn : [fieldOrColumn]
+    const columnOpts = $xeTable.computeColumnOpts
+    const isMaxFixedColumn = $xeTable.computeIsMaxFixedColumn
+    for (let i = 0; i < cols.length; i++) {
+      const item = cols[i]
+      const column = handleFieldOrColumn($xeTable, item)
+      const targetColumn = getRootColumn($xeTable, column as any)
+      if (targetColumn && targetColumn.fixed !== fixed) {
+        // 是否超过最大固定列数量
+        if (!targetColumn.fixed && isMaxFixedColumn) {
+          if (VxeUI.modal) {
+            VxeUI.modal.message({
+              status: 'error',
+              content: getI18n('vxe.table.maxFixedCol', [columnOpts.maxFixedSize])
+            })
+          }
+          return $xeTable.$nextTick()
+        }
+        XEUtils.eachTree([targetColumn], (column) => {
+          column.fixed = fixed
+        })
+        $xeTable.saveCustomStore('update:fixed')
+        if (!status) {
+          status = true
         }
-        return this.$nextTick()
       }
-      XEUtils.eachTree([targetColumn], (column) => {
-        column.fixed = fixed
-      })
-      this.saveCustomStore('update:fixed')
-      return this.refreshColumn()
     }
-    return this.$nextTick()
+    if (status) {
+      return $xeTable.refreshColumn()
+    }
+    return $xeTable.$nextTick()
   },
   /**
    * 取消指定固定列
    */
   clearColumnFixed (fieldOrColumn: any) {
-    const column = handleFieldOrColumn(this, fieldOrColumn)
-    const targetColumn = getRootColumn(this, column)
-    if (targetColumn && targetColumn.fixed) {
-      XEUtils.eachTree([targetColumn], (column) => {
-        column.fixed = null
-      })
-      this.saveCustomStore('update:fixed')
-      return this.refreshColumn()
+    const $xeTable = this
+
+    let status = false
+    const cols = XEUtils.isArray(fieldOrColumn) ? fieldOrColumn : [fieldOrColumn]
+    cols.forEach(item => {
+      const column = handleFieldOrColumn($xeTable, item)
+      const targetColumn = getRootColumn($xeTable, column as any)
+      if (targetColumn && targetColumn.fixed) {
+        XEUtils.eachTree([targetColumn], (column) => {
+          column.fixed = null
+        })
+        $xeTable.saveCustomStore('update:fixed')
+        if (!status) {
+          status = true
+        }
+      }
+    })
+    if (status) {
+      return $xeTable.refreshColumn()
     }
-    return this.$nextTick()
+    return $xeTable.$nextTick()
   },
   /**
    * 隐藏指定列
    */
   hideColumn (fieldOrColumn: any) {
-    const column = handleFieldOrColumn(this, fieldOrColumn)
-    if (column && column.visible) {
-      column.visible = false
-      return this.handleCustom()
+    const $xeTable = this
+
+    let status = false
+    const cols = XEUtils.isArray(fieldOrColumn) ? fieldOrColumn : [fieldOrColumn]
+    cols.forEach(item => {
+      const column = handleFieldOrColumn($xeTable, item)
+      if (column && column.visible) {
+        column.visible = false
+        if (!status) {
+          status = true
+        }
+      }
+    })
+    if (status) {
+      return $xeTable.handleCustom()
     }
-    return this.$nextTick()
+    return $xeTable.$nextTick()
   },
   /**
    * 显示指定列
    */
   showColumn (fieldOrColumn: any) {
-    const column = handleFieldOrColumn(this, fieldOrColumn)
-    if (column && !column.visible) {
-      column.visible = true
-      return this.handleCustom()
+    const $xeTable = this
+
+    let status = false
+    const cols = XEUtils.isArray(fieldOrColumn) ? fieldOrColumn : [fieldOrColumn]
+    cols.forEach(item => {
+      const column = handleFieldOrColumn($xeTable, item)
+      if (column && !column.visible) {
+        column.visible = true
+        if (!status) {
+          status = true
+        }
+      }
+    })
+    if (status) {
+      return $xeTable.handleCustom()
     }
-    return this.$nextTick()
+    return $xeTable.$nextTick()
   },
   setColumnWidth (fieldOrColumn: any, width: any) {
-    const column = handleFieldOrColumn(this, fieldOrColumn)
-    if (column) {
-      const colWidth = XEUtils.toInteger(width)
-      let rdWidth = colWidth
-      if (isScale(width)) {
-        const { tableBody } = this.$refs
-        const tableBodyElem = tableBody ? tableBody.$el : null
-        const bodyWidth = tableBodyElem ? tableBodyElem.clientWidth - 1 : 0
-        rdWidth = Math.floor(colWidth * bodyWidth)
+    const $xeTable = this
+
+    let status = false
+    const cols = XEUtils.isArray(fieldOrColumn) ? fieldOrColumn : [fieldOrColumn]
+    cols.forEach(item => {
+      const column = handleFieldOrColumn($xeTable, item)
+      if (column) {
+        const colWidth = XEUtils.toInteger(width)
+        let rdWidth = colWidth
+        if (isScale(width)) {
+          const tableBody = $xeTable.$refs.tableBody
+          const bodyElem = tableBody ? tableBody.$el as HTMLDivElement : null
+          const bodyWidth = bodyElem ? bodyElem.clientWidth - 1 : 0
+          rdWidth = Math.floor(colWidth * bodyWidth)
+        }
+        column.resizeWidth = rdWidth
+        if (!status) {
+          status = true
+        }
       }
-      column.resizeWidth = rdWidth
-      return this.refreshColumn()
+    })
+    if (status) {
+      return $xeTable.refreshColumn()
     }
-    return this.$nextTick()
+    return $xeTable.$nextTick()
   },
   getColumnWidth (fieldOrColumn: any) {
     const column = handleFieldOrColumn(this, fieldOrColumn)
@@ -5594,41 +5651,101 @@ const Methods = {
     }
     this.closeTooltip()
   },
-  handleScrollEvent (evnt: Event, isRollY: boolean, isRollX: boolean, params: any) {
+  handleScrollEvent (evnt: Event, isRollY: boolean, isRollX: boolean, scrollTop: number, scrollLeft: number, params: any) {
     const $xeTable = this
     const props = $xeTable
+    const reactData = $xeTable
+    const internalData = $xeTable
 
     const { highlightHoverRow } = props
+    const { lastScrollLeft, lastScrollTop } = internalData
     const tableBody = $xeTable.$refs.tableBody
     const bodyElem = tableBody ? tableBody.$el as HTMLDivElement : null
     const rowOpts = $xeTable.computeRowOpts
     const validTip = $xeTable.$refs.validTip
     const tooltip = $xeTable.$refs.tooltip
-    if (rowOpts.isHover || highlightHoverRow) {
-      $xeTable.clearHoverRow()
-    }
-    if (validTip && validTip.visible) {
-      validTip.close()
-    }
-    if (tooltip && tooltip.visible) {
-      tooltip.close()
-    }
-    if (isRollX) {
-      $xeTable.checkScrolling()
-    }
     const bodyHeight = bodyElem ? bodyElem.clientHeight : 0
     const bodyWidth = bodyElem ? bodyElem.clientWidth : 0
     const scrollHeight = bodyElem ? bodyElem.scrollHeight : 0
     const scrollWidth = bodyElem ? bodyElem.scrollWidth : 0
+    let isTop = false
+    let isBottom = false
+    let isLeft = false
+    let isRight = false
+    let direction = ''
+    let isTopBoundary = false
+    let isBottomBoundary = false
+    let isLeftBoundary = false
+    let isRightBoundary = false
+    if (isRollX) {
+      const xThreshold = $xeTable.computeScrollXThreshold
+      isLeft = scrollLeft <= 0
+      if (!isLeft) {
+        isRight = scrollLeft + bodyWidth >= scrollWidth
+      }
+      if (scrollLeft > lastScrollLeft) {
+        direction = 'right'
+        if (scrollLeft + bodyWidth >= scrollWidth - xThreshold) {
+          isRightBoundary = true
+        }
+      } else {
+        direction = 'left'
+        if (scrollLeft <= xThreshold) {
+          isLeftBoundary = true
+        }
+      }
+      $xeTable.checkScrolling()
+      internalData.lastScrollLeft = scrollLeft
+      reactData.lastScrollTime = Date.now()
+    } else {
+      const yThreshold = $xeTable.computeScrollYThreshold
+      isTop = scrollTop <= 0
+      if (!isTop) {
+        isBottom = scrollTop + bodyHeight >= scrollHeight
+      }
+      if (scrollTop > lastScrollTop) {
+        direction = 'bottom'
+        if (scrollTop + bodyHeight >= scrollHeight - yThreshold) {
+          isBottomBoundary = true
+        }
+      } else {
+        direction = 'top'
+        if (scrollTop <= yThreshold) {
+          isTopBoundary = true
+        }
+      }
+      internalData.lastScrollTop = scrollTop
+      reactData.lastScrollTime = Date.now()
+    }
     const evntParams = {
+      scrollTop,
+      scrollLeft,
       bodyHeight,
       bodyWidth,
       scrollHeight,
       scrollWidth,
       isX: isRollX,
       isY: isRollY,
+      isTop,
+      isBottom,
+      isLeft,
+      isRight,
+      direction,
       ...params
     }
+    if (rowOpts.isHover || highlightHoverRow) {
+      $xeTable.clearHoverRow()
+    }
+    if (validTip && validTip.visible) {
+      validTip.close()
+    }
+    if (tooltip && tooltip.visible) {
+      tooltip.close()
+    }
+
+    if (isBottomBoundary || isTopBoundary || isRightBoundary || isLeftBoundary) {
+      $xeTable.dispatchEvent('scroll-boundary', evntParams, evnt)
+    }
     $xeTable.dispatchEvent('scroll', evntParams, evnt)
   },
   /**
@@ -5657,8 +5774,6 @@ const Methods = {
     const bodyElem = tableBody.$el as HTMLDivElement
     const headerElem = tableHeader ? tableHeader.$el as HTMLDivElement : null
     const footerElem = tableFooter ? tableFooter.$el as HTMLDivElement : null
-    $xeTable.lastScrollLeft = scrollLeft
-    $xeTable.lastScrollTime = Date.now()
     setScrollLeft(bodyElem, scrollLeft)
     setScrollLeft(headerElem, scrollLeft)
     setScrollLeft(footerElem, scrollLeft)
@@ -5670,15 +5785,11 @@ const Methods = {
     const { scrollTop, scrollLeft } = wrapperEl
     const isRollX = true
     const isRollY = false
-    $xeTable.lastScrollLeft = scrollLeft
-    $xeTable.lastScrollTime = Date.now()
     $xeTable.handleSyncScrollX(scrollLeft)
     $xeTable.triggerScrollXEvent(evnt)
-    $xeTable.handleScrollEvent(evnt, isRollY, isRollX, {
+    $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
       type: 'table',
-      fixed: '',
-      scrollTop,
-      scrollLeft
+      fixed: ''
     })
   },
   debounceScrollYCalculate: XEUtils.debounce(function () {
@@ -5693,8 +5804,6 @@ const Methods = {
     const bodyElem = tableBody.$el as HTMLDivElement
     const leftElem = leftBody ? leftBody.$el as HTMLDivElement : null
     const rightElem = rightBody ? rightBody.$el as HTMLDivElement : null
-    $xeTable.lastScrollTop = scrollTop
-    $xeTable.lastScrollTime = Date.now()
     setScrollTop(bodyElem, scrollTop)
     setScrollTop(leftElem, scrollTop)
     setScrollTop(rightElem, scrollTop)
@@ -5706,15 +5815,11 @@ const Methods = {
     const { scrollTop, scrollLeft } = wrapperEl
     const isRollX = false
     const isRollY = true
-    $xeTable.lastScrollTop = scrollTop
-    $xeTable.lastScrollTime = Date.now()
     $xeTable.handleSyncScrollY(scrollTop)
     $xeTable.triggerScrollYEvent(evnt)
-    $xeTable.handleScrollEvent(evnt, isRollY, isRollX, {
+    $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
       type: 'table',
-      fixed: '',
-      scrollTop,
-      scrollLeft
+      fixed: ''
     })
   },
   /**
@@ -5911,16 +6016,34 @@ const Methods = {
    * @param {Number} scrollTop 上距离
    */
   scrollTo (scrollLeft: any, scrollTop: any) {
+    const $xeTable = this
+
     const { $refs } = this
-    const { tableBody, rightBody, tableFooter } = $refs
+    const { tableBody, tableHeader, leftBody, rightBody, tableFooter } = $refs
     const tableBodyElem = tableBody ? tableBody.$el : null
+    const leftBodyElem = leftBody ? leftBody.$el : null
     const rightBodyElem = rightBody ? rightBody.$el : null
+    const tableHeaderElem = tableHeader ? tableHeader.$el : null
     const tableFooterElem = tableFooter ? tableFooter.$el : null
     if (XEUtils.isNumber(scrollLeft)) {
-      setScrollLeft(tableFooterElem || tableBodyElem, scrollLeft)
+      const xHandleEl = $xeTable.$refs.refScrollXHandleElem
+      if (xHandleEl) {
+        setScrollLeft(xHandleEl, scrollLeft)
+      } else {
+        setScrollLeft(tableBodyElem, scrollLeft)
+        setScrollLeft(tableHeaderElem, scrollLeft)
+        setScrollLeft(tableFooterElem, scrollLeft)
+      }
     }
     if (XEUtils.isNumber(scrollTop)) {
-      setScrollTop(rightBodyElem || tableBodyElem, scrollTop)
+      const yHandleEl = $xeTable.$refs.refScrollYHandleElem
+      if (yHandleEl) {
+        setScrollTop(yHandleEl, scrollTop)
+      } else {
+        setScrollTop(tableBodyElem, scrollTop)
+        setScrollTop(leftBodyElem, scrollTop)
+        setScrollTop(rightBodyElem, scrollTop)
+      }
     }
     if (this.scrollXLoad || this.scrollYLoad) {
       return new Promise(resolve => setTimeout(() => resolve(this.$nextTick()), 50))

package/packages/table/src/table.ts

@@ -384,12 +384,32 @@ export default {
     computeSXOpts () {
       return Object.assign({}, getConfig().table.scrollX, this.scrollX)
     },
+    computeScrollXThreshold () {
+      const $xeTable = this
+
+      const sXOpts = $xeTable.computeSXOpts
+      const { threshold } = sXOpts
+      if (threshold) {
+        return XEUtils.toNumber(threshold)
+      }
+      return 0
+    },
     sYOpts () {
       return this.computeSYOpts
     },
     computeSYOpts () {
       return Object.assign({}, getConfig().table.scrollY, this.scrollY)
     },
+    computeScrollYThreshold () {
+      const $xeTable = this
+
+      const sYOpts = $xeTable.computeSYOpts
+      const { threshold } = sYOpts
+      if (threshold) {
+        return XEUtils.toNumber(threshold)
+      }
+      return 0
+    },
     rowHeightMaps () {
       return {
         default: 48,