vxe-table 3.17.7 → 3.17.9

package/lib/table/src/methods.js

@@ -458,6 +458,8 @@ function cacheColumnMap($xeTable) {
   reactData.rowGroupColumn = rowGroupColumn;
   reactData.treeNodeColumn = treeNodeColumn;
   reactData.expandColumn = expandColumn;
+  reactData.checkboxColumn = checkboxColumn;
+  reactData.radioColumn = radioColumn;
   reactData.isAllOverflow = isAllOverflow;
 }
 function updateScrollXStatus($xeTable, fullColumn) {
@@ -1240,56 +1242,72 @@ function updateStyle($xeTable) {
   const {
     visibleColumn,
     tableHeight,
-    headerHeight,
-    footerHeight,
     elemStore,
     customHeight,
     customMinHeight,
-    customMaxHeight
+    customMaxHeight,
+    tHeaderHeight,
+    tFooterHeight
   } = internalData;
+  const $xeGanttView = internalData.xeGanttView;
   const el = $xeTable.$refs.refElem;
-  if (!el) {
+  if (!el || !el.clientHeight) {
     return;
   }
   const containerList = ['main', 'left', 'right'];
-  const osbWidth = overflowY ? scrollbarWidth : 0;
-  const osbHeight = overflowX ? scrollbarHeight : 0;
+  let osbWidth = overflowY ? scrollbarWidth : 0;
+  let osbHeight = overflowX ? scrollbarHeight : 0;
   const emptyPlaceholderElem = $xeTable.$refs.refEmptyPlaceholder;
+  const scrollbarOpts = $xeTable.computeScrollbarOpts;
   const mouseOpts = $xeTable.computeMouseOpts;
   const expandOpts = $xeTable.computeExpandOpts;
   const bodyWrapperElem = (0, _util.getRefElem)(elemStore['main-body-wrapper']);
   const bodyTableElem = (0, _util.getRefElem)(elemStore['main-body-table']);
   if (emptyPlaceholderElem) {
-    emptyPlaceholderElem.style.top = `${headerHeight}px`;
+    emptyPlaceholderElem.style.top = `${tHeaderHeight}px`;
     emptyPlaceholderElem.style.height = bodyWrapperElem ? `${bodyWrapperElem.offsetHeight - osbHeight}px` : '';
   }
-  let bodyHeight = 0;
+  const scrollbarXToTop = $xeTable.computeScrollbarXToTop;
+  const scrollbarYToLeft = $xeTable.computeScrollbarYToLeft;
+  let xScrollbarVisible = overflowX ? 'visible' : 'hidden';
+  if ($xeGanttView) {
+    osbHeight = scrollbarHeight;
+    xScrollbarVisible = 'visible';
+  } else if (scrollbarOpts.x && scrollbarOpts.x.visible === false) {
+    osbHeight = 0;
+    xScrollbarVisible = 'hidden';
+  }
+  let yScrollbarVisible = overflowY ? 'visible' : 'hidden';
+  if (scrollbarOpts.y && scrollbarOpts.y.visible === false || $xeGanttView && !scrollbarYToLeft) {
+    osbWidth = 0;
+    yScrollbarVisible = 'hidden';
+  }
+  let tbHeight = 0;
   let bodyMaxHeight = 0;
-  const bodyMinHeight = customMinHeight - headerHeight - footerHeight - osbHeight;
+  const bodyMinHeight = customMinHeight - tHeaderHeight - tFooterHeight - osbHeight;
   if (customMaxHeight) {
-    bodyMaxHeight = Math.max(bodyMinHeight, customMaxHeight - headerHeight - footerHeight - osbHeight);
+    bodyMaxHeight = Math.max(bodyMinHeight, customMaxHeight - tHeaderHeight - tFooterHeight - osbHeight);
   }
   if (customHeight) {
-    bodyHeight = customHeight - headerHeight - footerHeight - osbHeight;
+    tbHeight = customHeight - tHeaderHeight - tFooterHeight - osbHeight;
   }
-  if (!bodyHeight) {
+  if (!tbHeight) {
     if (bodyTableElem) {
-      bodyHeight = bodyTableElem.clientHeight;
+      tbHeight = bodyTableElem.clientHeight;
     }
   }
-  if (bodyHeight) {
+  if (tbHeight) {
     if (bodyMaxHeight) {
-      bodyHeight = Math.min(bodyMaxHeight, bodyHeight);
+      tbHeight = Math.min(bodyMaxHeight, tbHeight);
     }
-    bodyHeight = Math.max(bodyMinHeight, bodyHeight);
+    tbHeight = Math.max(bodyMinHeight, tbHeight);
   }
-  const scrollbarXToTop = $xeTable.$refs.computeScrollbarXToTop;
   const xLeftCornerEl = $xeTable.$refs.refScrollXLeftCornerElem;
   const xRightCornerEl = $xeTable.$refs.refScrollXRightCornerElem;
   const scrollXVirtualEl = $xeTable.$refs.refScrollXVirtualElem;
   if (scrollXVirtualEl) {
     scrollXVirtualEl.style.height = `${osbHeight}px`;
-    scrollXVirtualEl.style.visibility = overflowX ? 'visible' : 'hidden';
+    scrollXVirtualEl.style.visibility = xScrollbarVisible;
   }
   const xWrapperEl = $xeTable.$refs.refScrollXWrapperElem;
   if (xWrapperEl) {
@@ -1307,30 +1325,31 @@ function updateStyle($xeTable) {
   const scrollYVirtualEl = $xeTable.$refs.refScrollYVirtualElem;
   if (scrollYVirtualEl) {
     scrollYVirtualEl.style.width = `${osbWidth}px`;
-    scrollYVirtualEl.style.height = `${bodyHeight + headerHeight + footerHeight}px`;
-    scrollYVirtualEl.style.visibility = overflowY ? 'visible' : 'hidden';
+    scrollYVirtualEl.style.height = `${tbHeight + tHeaderHeight + tFooterHeight}px`;
+    scrollYVirtualEl.style.visibility = yScrollbarVisible;
   }
   const yTopCornerEl = $xeTable.$refs.refScrollYTopCornerElem;
   if (yTopCornerEl) {
-    yTopCornerEl.style.height = `${headerHeight}px`;
-    yTopCornerEl.style.display = overflowY && headerHeight ? 'block' : '';
+    yTopCornerEl.style.height = `${tHeaderHeight}px`;
+    yTopCornerEl.style.display = overflowY && tHeaderHeight ? 'block' : '';
   }
   const yWrapperEl = $xeTable.$refs.refScrollYWrapperElem;
   if (yWrapperEl) {
-    yWrapperEl.style.height = `${bodyHeight}px`;
-    yWrapperEl.style.top = `${headerHeight}px`;
+    yWrapperEl.style.height = `${tbHeight}px`;
+    yWrapperEl.style.top = `${tHeaderHeight}px`;
   }
   const yBottomCornerEl = $xeTable.$refs.refScrollYBottomCornerElem;
   if (yBottomCornerEl) {
-    yBottomCornerEl.style.height = `${footerHeight}px`;
-    yBottomCornerEl.style.top = `${headerHeight + bodyHeight}px`;
-    yBottomCornerEl.style.display = overflowY && footerHeight ? 'block' : '';
+    yBottomCornerEl.style.height = `${tFooterHeight}px`;
+    yBottomCornerEl.style.top = `${tHeaderHeight + tbHeight}px`;
+    yBottomCornerEl.style.display = overflowY && tFooterHeight ? 'block' : '';
   }
   const rowExpandEl = $xeTable.$refs.refRowExpandElem;
   if (rowExpandEl) {
-    rowExpandEl.style.height = `${bodyHeight}px`;
-    rowExpandEl.style.top = `${headerHeight}px`;
+    rowExpandEl.style.height = `${tbHeight}px`;
+    rowExpandEl.style.top = `${tHeaderHeight}px`;
   }
+  internalData.tBodyHeight = tbHeight;
   containerList.forEach((name, index) => {
     const fixedType = index > 0 ? name : '';
     const layoutList = ['header', 'body', 'footer'];
@@ -1390,7 +1409,7 @@ function updateStyle($xeTable) {
           }
         }
         if (currScrollElem) {
-          currScrollElem.style.height = `${headerHeight}px`;
+          currScrollElem.style.height = `${tHeaderHeight}px`;
         }
         if (tableElem) {
           tableElem.style.width = tWidth ? `${tWidth}px` : '';
@@ -1398,15 +1417,15 @@ function updateStyle($xeTable) {
       } else if (layout === 'body') {
         if (currScrollElem) {
           currScrollElem.style.maxHeight = customMaxHeight ? `${bodyMaxHeight}px` : '';
-          currScrollElem.style.height = customHeight ? `${bodyHeight}px` : '';
+          currScrollElem.style.height = customHeight ? `${tbHeight}px` : '';
           currScrollElem.style.minHeight = `${bodyMinHeight}px`;
         }
         // 如果是固定列
         if (fixedWrapperElem) {
           if (wrapperElem) {
-            wrapperElem.style.top = `${headerHeight}px`;
+            wrapperElem.style.top = `${tHeaderHeight}px`;
           }
-          fixedWrapperElem.style.height = `${customHeight > 0 ? customHeight : tableHeight + headerHeight + footerHeight + osbHeight}px`;
+          fixedWrapperElem.style.height = `${customHeight > 0 ? customHeight : tableHeight + tHeaderHeight + tFooterHeight + osbHeight}px`;
           fixedWrapperElem.style.width = `${fixedColumn.reduce((previous, column) => previous + column.renderWidth, 0)}px`;
         }
         let renderColumnList = tableColumn;
@@ -1478,11 +1497,11 @@ function updateStyle($xeTable) {
           }
         }
         if (currScrollElem) {
-          currScrollElem.style.height = `${footerHeight}px`;
+          currScrollElem.style.height = `${tFooterHeight}px`;
           // 如果是固定列
           if (fixedWrapperElem) {
             if (wrapperElem) {
-              wrapperElem.style.top = `${customHeight > 0 ? customHeight - footerHeight - osbHeight : tableHeight + headerHeight}px`;
+              wrapperElem.style.top = `${customHeight > 0 ? customHeight - tFooterHeight - osbHeight : tableHeight + tHeaderHeight}px`;
             }
           }
         }
@@ -1498,6 +1517,9 @@ function updateStyle($xeTable) {
   if (mouseConfig && mouseOpts.selected && editStore.selected.row && editStore.selected.column) {
     $xeTable.addCellSelectedClass();
   }
+  if ($xeGanttView) {
+    $xeGanttView.handleUpdateStyle();
+  }
   return $xeTable.$nextTick();
 }
 function checkValidate($xeTable, type) {
@@ -3213,12 +3235,13 @@ function calcScrollbar($xeTable) {
       reactData.scrollbarHeight = scrollbarOpts.height || xHandleEl.offsetHeight - xHandleEl.clientHeight || 14;
     }
     reactData.overflowX = overflowX;
-    const headerHeight = headerTableElem ? headerTableElem.clientHeight : 0;
-    const footerHeight = footerTableElem ? footerTableElem.clientHeight : 0;
+    const hHeight = headerTableElem ? headerTableElem.clientHeight : 0;
+    const fHeight = footerTableElem ? footerTableElem.clientHeight : 0;
     internalData.tableHeight = bodyWrapperElem.offsetHeight;
-    internalData.headerHeight = headerHeight;
-    internalData.footerHeight = footerHeight;
-    reactData.parentHeight = Math.max(internalData.headerHeight + footerHeight + 20, $xeTable.getParentHeight());
+    internalData.tHeaderHeight = hHeight;
+    internalData.tFooterHeight = fHeight;
+    reactData.overflowX = overflowX;
+    reactData.parentHeight = Math.max(hHeight + fHeight + 20, $xeTable.getParentHeight());
   }
   if (overflowX) {
     $xeTable.checkScrolling();
@@ -3277,6 +3300,7 @@ function handleLazyRecalculate($xeTable, reFull, reWidth, reHeight) {
       rceTimeout,
       rceRunTime
     } = internalData;
+    const $xeGanttView = internalData.xeGanttView;
     const resizeOpts = $xeTable.computeResizeOpts;
     const refreshDelay = resizeOpts.refreshDelay || 20;
     const el = $xeTable.$refs.refElem;
@@ -3296,12 +3320,18 @@ function handleLazyRecalculate($xeTable, reFull, reWidth, reHeight) {
     } else {
       resolve(handleRecalculateStyle($xeTable, reFull, reWidth, reHeight));
     }
+    if ($xeGanttView) {
+      $xeGanttView.handleLazyRecalculate();
+    }
     internalData.rceTimeout = setTimeout(() => {
       internalData.rceTimeout = undefined;
       handleRecalculateStyle($xeTable, reFull, reWidth, reHeight);
     }, refreshDelay);
   });
 }
+function handleResizeEvent($xeTable) {
+  handleLazyRecalculate($xeTable, true, true, true);
+}
 function handleUpdateAggValues($xeTable) {
   const reactData = $xeTable;
   const internalData = $xeTable;
@@ -4104,11 +4134,6 @@ function lazyScrollYData($xeTable) {
 function checkLastSyncScroll($xeTable, isRollX, isRollY) {
   const reactData = $xeTable;
   const internalData = $xeTable;
-  const {
-    scrollXLoad,
-    scrollYLoad,
-    isAllOverflow
-  } = reactData;
   const {
     lcsTimeout
   } = internalData;
@@ -4116,6 +4141,11 @@ function checkLastSyncScroll($xeTable, isRollX, isRollY) {
     clearTimeout(lcsTimeout);
   }
   internalData.lcsTimeout = setTimeout(() => {
+    const {
+      scrollXLoad,
+      scrollYLoad,
+      isAllOverflow
+    } = reactData;
     internalData.lcsRunTime = Date.now();
     internalData.lcsTimeout = undefined;
     internalData.intoRunScroll = false;
@@ -4186,6 +4216,20 @@ const wheelScrollTopTo = (diffNum, cb) => {
   };
   requestAnimationFrame(step);
 };
+const syncGanttScrollTop = ($xeTable, scrollTop) => {
+  const internalData = $xeTable;
+  const $xeGanttView = internalData.xeGanttView;
+  if ($xeGanttView) {
+    const ganttInternalData = $xeGanttView.internalData;
+    const {
+      elemStore: ganttElemStore
+    } = ganttInternalData;
+    const ganttBodyScrollElem = (0, _util.getRefElem)(ganttElemStore['main-body-scroll']);
+    if (ganttBodyScrollElem) {
+      ganttBodyScrollElem.scrollTop = scrollTop;
+    }
+  }
+};
 function updateHeight($xeTable) {
   const reactData = $xeTable;
   const internalData = $xeTable;
@@ -4532,6 +4576,7 @@ const Methods = {
       scrollYStore,
       fullDataRowIdData
     } = internalData;
+    const $xeGanttView = internalData.xeGanttView;
     let fullList = internalData.afterFullData;
     // 是否进行数据处理
     if (force) {
@@ -4552,6 +4597,9 @@ const Methods = {
     });
     reactData.tableData = tableData;
     internalData.visibleDataRowIdData = visibleDataRowIdMaps;
+    if ($xeGanttView) {
+      $xeGanttView.updateViewData();
+    }
     return $xeTable.$nextTick();
   },
   /**
@@ -6915,6 +6963,10 @@ const Methods = {
       }, 10);
     });
   },
+  handleResizeEvent() {
+    const $xeTable = this;
+    handleResizeEvent($xeTable);
+  },
   /**
    * 重新渲染布局
    * 刷新布局
@@ -7598,7 +7650,7 @@ const Methods = {
     const $xeTable = this;
     $xeTable.closeMenu();
     $xeTable.updateCellAreas();
-    handleLazyRecalculate($xeTable, true, true, true);
+    handleResizeEvent($xeTable);
     $xeTable.updateCellAreas();
   },
   /**
@@ -9026,13 +9078,19 @@ const Methods = {
     const props = $xeTable;
     const reactData = $xeTable;
     const {
+      treeConfig,
       highlightCurrentRow,
       highlightCurrentColumn,
-      editConfig
+      editConfig,
+      aggregateConfig,
+      rowGroupConfig
     } = props;
     const {
       editStore,
-      isDragResize
+      isDragResize,
+      expandColumn,
+      checkboxColumn,
+      radioColumn
     } = reactData;
     if (isDragResize) {
       return;
@@ -9078,15 +9136,15 @@ const Methods = {
     }, params);
     if (!triggerCheckbox && !triggerRadio) {
       // 如果是展开行
-      if (!triggerExpandNode && (expandOpts.trigger === 'row' || isExpandType && expandOpts.trigger === 'cell')) {
+      if (!triggerExpandNode && (expandColumn && expandOpts.trigger === 'row' || isExpandType && expandOpts.trigger === 'cell')) {
         $xeTable.triggerRowExpandEvent(evnt, params);
       }
       // 如果是树形表格
-      if (treeOpts.trigger === 'row' || treeNode && treeOpts.trigger === 'cell') {
+      if (treeConfig && (treeOpts.trigger === 'row' || treeNode && treeOpts.trigger === 'cell')) {
         $xeTable.triggerTreeExpandEvent(evnt, params);
       }
       // 如果是行分组
-      if (aggregateOpts.trigger === 'row' || rowGroupNode && aggregateOpts.trigger === 'cell') {
+      if ((aggregateConfig || rowGroupConfig) && (aggregateOpts.trigger === 'row' || rowGroupNode && aggregateOpts.trigger === 'cell')) {
         $xeTable.triggerRowGroupExpandEvent(evnt, params);
       }
     }
@@ -9106,11 +9164,11 @@ const Methods = {
           }
         }
         // 如果是单选框
-        if (!triggerRadio && (radioOpts.trigger === 'row' || isRadioType && radioOpts.trigger === 'cell')) {
+        if (!triggerRadio && (radioColumn && radioOpts.trigger === 'row' || isRadioType && radioOpts.trigger === 'cell')) {
           $xeTable.triggerRadioRowEvent(evnt, params);
         }
         // 如果是复选框
-        if (!triggerCheckbox && (checkboxOpts.trigger === 'row' || isCheckboxType && checkboxOpts.trigger === 'cell')) {
+        if (!triggerCheckbox && (checkboxColumn && checkboxOpts.trigger === 'row' || isCheckboxType && checkboxOpts.trigger === 'cell')) {
           $xeTable.handleToggleCheckRowEvent(evnt, params);
         }
       }
@@ -11686,6 +11744,7 @@ const Methods = {
       }
       (0, _dom.setScrollTop)(yHandleEl, scrollTop);
       (0, _dom.setScrollTop)(rowExpandEl, scrollTop);
+      syncGanttScrollTop($xeTable, scrollTop);
       if (scrollYLoad) {
         $xeTable.triggerScrollYEvent(evnt);
       }
@@ -11914,6 +11973,7 @@ const Methods = {
         (0, _dom.setScrollTop)(leftScrollElem, currTopNum);
         (0, _dom.setScrollTop)(rightScrollElem, currTopNum);
         (0, _dom.setScrollTop)(rowExpandEl, currTopNum);
+        syncGanttScrollTop($xeTable, currTopNum);
         if (scrollYLoad) {
           $xeTable.triggerScrollYEvent(evnt);
         }
@@ -11930,6 +11990,7 @@ const Methods = {
           (0, _dom.setScrollTop)(leftScrollElem, currTopNum);
           (0, _dom.setScrollTop)(rightScrollElem, currTopNum);
           (0, _dom.setScrollTop)(rowExpandEl, currTopNum);
+          syncGanttScrollTop($xeTable, currTopNum);
           if (scrollYLoad) {
             $xeTable.triggerScrollYEvent(evnt);
           }
@@ -12031,6 +12092,7 @@ const Methods = {
     (0, _dom.setScrollTop)(leftScrollElem, scrollTop);
     (0, _dom.setScrollTop)(rightScrollElem, scrollTop);
     (0, _dom.setScrollTop)(rowExpandEl, scrollTop);
+    syncGanttScrollTop($xeTable, scrollTop);
     if (scrollYLoad) {
       $xeTable.triggerScrollYEvent(evnt);
     }
@@ -12071,6 +12133,7 @@ const Methods = {
       elemStore,
       fullColumnIdData
     } = internalData;
+    const $xeGanttView = internalData.xeGanttView;
     const mouseOpts = $xeTable.computeMouseOpts;
     const tableBody = $xeTable.$refs.refTableBody;
     const tableBodyElem = tableBody ? tableBody.$el : null;
@@ -12131,10 +12194,13 @@ const Methods = {
       if (scrollXSpaceEl) {
         scrollXSpaceEl.style.width = `${ySpaceWidth}px`;
       }
+      calcScrollbar($xeTable);
       if (isScrollXBig && mouseOpts.area) {
         (0, _log.errLog)('vxe.error.notProp', ['mouse-config.area']);
       }
-      calcScrollbar($xeTable);
+      if ($xeGanttView) {
+        $xeGanttView.updateScrollXSpace();
+      }
       return $xeTable.$nextTick(() => {
         updateStyle($xeTable);
       });
@@ -12167,6 +12233,7 @@ const Methods = {
       fullAllDataRowIdData,
       rowExpandedMaps
     } = internalData;
+    const $xeGanttView = internalData.xeGanttView;
     const {
       startIndex
     } = scrollYStore;
@@ -12258,10 +12325,13 @@ const Methods = {
     reactData.scrollYTop = scrollYTop;
     reactData.scrollYHeight = scrollYHeight;
     reactData.isScrollYBig = isScrollYBig;
+    calcScrollbar($xeTable);
     if (isScrollYBig && mouseOpts.area) {
       (0, _log.errLog)('vxe.error.notProp', ['mouse-config.area']);
     }
-    calcScrollbar($xeTable);
+    if ($xeGanttView) {
+      $xeGanttView.updateScrollYSpace();
+    }
     return $xeTable.$nextTick().then(() => {
       updateStyle($xeTable);
     });
@@ -12659,12 +12729,23 @@ const Methods = {
     this.isActivated = false;
     return this.$nextTick();
   },
-  // 连接工具栏
+  /**
+   * 已废弃，被 connectToolbar 替换
+   * @deprecated
+   */
   connect($toolbar) {
+    return this.connectToolbar($toolbar);
+  },
+  /**
+   * 连接工具栏
+   * @param $toolbar
+   */
+  connectToolbar($toolbar) {
+    const $xeTable = this;
     if ($toolbar && $toolbar.syncUpdate) {
       $toolbar.syncUpdate({
         collectColumn: this.collectColumn,
-        $table: this
+        $table: $xeTable
       });
       this.$toolbar = $toolbar;
     } else {
@@ -12672,6 +12753,17 @@ const Methods = {
     }
     return this.$nextTick();
   },
+  handleConnectGanttView($ganttView) {
+    const $xeTable = this;
+    const internalData = $xeTable;
+    if ($ganttView && $ganttView.connectUpdate) {
+      $ganttView.connectUpdate({
+        $table: $xeTable
+      });
+      internalData.xeGanttView = $ganttView;
+    }
+    return $xeTable.$nextTick();
+  },
   /*************************
    * Publish methods
    *************************/