vxe-table 3.10.8 → 3.10.10

package/lib/table/src/methods.js

@@ -2188,85 +2188,132 @@ const Methods = {
    * 设置为固定列
    */
   setColumnFixed(fieldOrColumn, fixed) {
-    const {
-      isMaxFixedColumn,
-      columnOpts
-    } = this;
-    const column = (0, _util.handleFieldOrColumn)(this, fieldOrColumn);
-    const targetColumn = (0, _util.getRootColumn)(this, column);
-    if (targetColumn && targetColumn.fixed !== fixed) {
-      // 是否超过最大固定列数量
-      if (!targetColumn.fixed && isMaxFixedColumn) {
-        if (_ui.VxeUI.modal) {
-          _ui.VxeUI.modal.message({
-            status: 'error',
-            content: getI18n('vxe.table.maxFixedCol', [columnOpts.maxFixedSize])
-          });
+    const $xeTable = this;
+    let status = false;
+    const cols = _xeUtils.default.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 = (0, _util.handleFieldOrColumn)($xeTable, item);
+      const targetColumn = (0, _util.getRootColumn)($xeTable, column);
+      if (targetColumn && targetColumn.fixed !== fixed) {
+        // 是否超过最大固定列数量
+        if (!targetColumn.fixed && isMaxFixedColumn) {
+          if (_ui.VxeUI.modal) {
+            _ui.VxeUI.modal.message({
+              status: 'error',
+              content: getI18n('vxe.table.maxFixedCol', [columnOpts.maxFixedSize])
+            });
+          }
+          return $xeTable.$nextTick();
+        }
+        _xeUtils.default.eachTree([targetColumn], column => {
+          column.fixed = fixed;
+        });
+        $xeTable.saveCustomStore('update:fixed');
+        if (!status) {
+          status = true;
         }
-        return this.$nextTick();
       }
-      _xeUtils.default.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) {
-    const column = (0, _util.handleFieldOrColumn)(this, fieldOrColumn);
-    const targetColumn = (0, _util.getRootColumn)(this, column);
-    if (targetColumn && targetColumn.fixed) {
-      _xeUtils.default.eachTree([targetColumn], column => {
-        column.fixed = null;
-      });
-      this.saveCustomStore('update:fixed');
-      return this.refreshColumn();
+    const $xeTable = this;
+    let status = false;
+    const cols = _xeUtils.default.isArray(fieldOrColumn) ? fieldOrColumn : [fieldOrColumn];
+    cols.forEach(item => {
+      const column = (0, _util.handleFieldOrColumn)($xeTable, item);
+      const targetColumn = (0, _util.getRootColumn)($xeTable, column);
+      if (targetColumn && targetColumn.fixed) {
+        _xeUtils.default.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) {
-    const column = (0, _util.handleFieldOrColumn)(this, fieldOrColumn);
-    if (column && column.visible) {
-      column.visible = false;
-      return this.handleCustom();
+    const $xeTable = this;
+    let status = false;
+    const cols = _xeUtils.default.isArray(fieldOrColumn) ? fieldOrColumn : [fieldOrColumn];
+    cols.forEach(item => {
+      const column = (0, _util.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) {
-    const column = (0, _util.handleFieldOrColumn)(this, fieldOrColumn);
-    if (column && !column.visible) {
-      column.visible = true;
-      return this.handleCustom();
+    const $xeTable = this;
+    let status = false;
+    const cols = _xeUtils.default.isArray(fieldOrColumn) ? fieldOrColumn : [fieldOrColumn];
+    cols.forEach(item => {
+      const column = (0, _util.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, width) {
-    const column = (0, _util.handleFieldOrColumn)(this, fieldOrColumn);
-    if (column) {
-      const colWidth = _xeUtils.default.toInteger(width);
-      let rdWidth = colWidth;
-      if ((0, _dom.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.default.isArray(fieldOrColumn) ? fieldOrColumn : [fieldOrColumn];
+    cols.forEach(item => {
+      const column = (0, _util.handleFieldOrColumn)($xeTable, item);
+      if (column) {
+        const colWidth = _xeUtils.default.toInteger(width);
+        let rdWidth = colWidth;
+        if ((0, _dom.isScale)(width)) {
+          const tableBody = $xeTable.$refs.tableBody;
+          const bodyElem = tableBody ? tableBody.$el : 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) {
     const column = (0, _util.handleFieldOrColumn)(this, fieldOrColumn);
@@ -6735,41 +6782,103 @@ const Methods = {
     }
     this.closeTooltip();
   },
-  handleScrollEvent(evnt, isRollY, isRollX, params) {
+  handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, params) {
     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 : 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 = Object.assign({
+      scrollTop,
+      scrollLeft,
       bodyHeight,
       bodyWidth,
       scrollHeight,
       scrollWidth,
       isX: isRollX,
-      isY: isRollY
+      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);
   },
   /**
@@ -6806,8 +6915,6 @@ const Methods = {
     const bodyElem = tableBody.$el;
     const headerElem = tableHeader ? tableHeader.$el : null;
     const footerElem = tableFooter ? tableFooter.$el : null;
-    $xeTable.lastScrollLeft = scrollLeft;
-    $xeTable.lastScrollTime = Date.now();
     (0, _dom.setScrollLeft)(bodyElem, scrollLeft);
     (0, _dom.setScrollLeft)(headerElem, scrollLeft);
     (0, _dom.setScrollLeft)(footerElem, scrollLeft);
@@ -6821,15 +6928,11 @@ const Methods = {
     } = 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.default.debounce(function () {
@@ -6846,8 +6949,6 @@ const Methods = {
     const bodyElem = tableBody.$el;
     const leftElem = leftBody ? leftBody.$el : null;
     const rightElem = rightBody ? rightBody.$el : null;
-    $xeTable.lastScrollTop = scrollTop;
-    $xeTable.lastScrollTime = Date.now();
     (0, _dom.setScrollTop)(bodyElem, scrollTop);
     (0, _dom.setScrollTop)(leftElem, scrollTop);
     (0, _dom.setScrollTop)(rightElem, scrollTop);
@@ -6861,15 +6962,11 @@ const Methods = {
     } = 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: ''
     });
   },
   /**
@@ -7116,22 +7213,41 @@ const Methods = {
    * @param {Number} scrollTop 上距离
    */
   scrollTo(scrollLeft, scrollTop) {
+    const $xeTable = this;
     const {
       $refs
     } = this;
     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.default.isNumber(scrollLeft)) {
-      (0, _dom.setScrollLeft)(tableFooterElem || tableBodyElem, scrollLeft);
+      const xHandleEl = $xeTable.$refs.refScrollXHandleElem;
+      if (xHandleEl) {
+        (0, _dom.setScrollLeft)(xHandleEl, scrollLeft);
+      } else {
+        (0, _dom.setScrollLeft)(tableBodyElem, scrollLeft);
+        (0, _dom.setScrollLeft)(tableHeaderElem, scrollLeft);
+        (0, _dom.setScrollLeft)(tableFooterElem, scrollLeft);
+      }
     }
     if (_xeUtils.default.isNumber(scrollTop)) {
-      (0, _dom.setScrollTop)(rightBodyElem || tableBodyElem, scrollTop);
+      const yHandleEl = $xeTable.$refs.refScrollYHandleElem;
+      if (yHandleEl) {
+        (0, _dom.setScrollTop)(yHandleEl, scrollTop);
+      } else {
+        (0, _dom.setScrollTop)(tableBodyElem, scrollTop);
+        (0, _dom.setScrollTop)(leftBodyElem, scrollTop);
+        (0, _dom.setScrollTop)(rightBodyElem, scrollTop);
+      }
     }
     if (this.scrollXLoad || this.scrollYLoad) {
       return new Promise(resolve => setTimeout(() => resolve(this.$nextTick()), 50));