vxe-table 3.17.7 → 3.17.8

package/es/table/module/export/mixin.js

@@ -1110,6 +1110,7 @@ export default {
             const reactData = $xeTable;
             const internalData = $xeTable;
             const $xeGrid = $xeTable.$xeGrid;
+            const $xeGantt = $xeTable.$xeGantt;
             const { treeConfig, showHeader, showFooter } = props;
             const { isGroup } = reactData;
             const { tableFullColumn, afterFullData, afterTreeFullData, collectColumn, mergeBodyList, mergeFooterList } = internalData;
@@ -1316,6 +1317,7 @@ export default {
                             const params = {
                                 $table: $xeTable,
                                 $grid: $xeGrid,
+                                $gantt: $xeGantt,
                                 sort: sortData.length ? sortData[0] : {},
                                 sorts: sortData,
                                 filters: gridReactData.filterData,
@@ -1325,7 +1327,7 @@ export default {
                             return Promise.resolve((beforeQueryAll || ajaxMethods)(params))
                                 .then(rest => {
                                 const listProp = resConfigs.list;
-                                handleOptions.data = (listProp ? (XEUtils.isFunction(listProp) ? listProp({ data: rest, $grid: $xeGrid }) : XEUtils.get(rest, listProp)) : rest) || [];
+                                handleOptions.data = (listProp ? (XEUtils.isFunction(listProp) ? listProp({ data: rest, $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt }) : XEUtils.get(rest, listProp)) : rest) || [];
                                 if (afterQueryAll) {
                                     afterQueryAll(params);
                                 }

package/es/table/src/methods.js

@@ -931,14 +931,15 @@ function updateStyle($xeTable) {
     const reactData = $xeTable;
     const internalData = $xeTable;
     const { showHeaderOverflow: allColumnHeaderOverflow, showFooterOverflow: allColumnFooterOverflow, mouseConfig, spanMethod, footerSpanMethod } = props;
-    const { isGroup, currentRow, tableColumn, scrollXLoad, scrollYLoad, overflowX, scrollbarWidth, overflowY, scrollbarHeight, scrollXWidth, columnStore, editStore, isAllOverflow, expandColumn, isColLoading } = reactData;
-    const { visibleColumn, tableHeight, headerHeight, footerHeight, elemStore, customHeight, customMinHeight, customMaxHeight } = internalData;
+    const { isGroup, currentRow, tableColumn, scrollXLoad, scrollYLoad, overflowX, scrollbarWidth, overflowY, scrollbarHeight, scrollXWidth, columnStore, editStore, isAllOverflow, expandColumn, isColLoading, tHeaderHeight, tFooterHeight } = reactData;
+    const { visibleColumn, tableHeight, elemStore, customHeight, customMinHeight, customMaxHeight } = 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;
+    let osbWidth = overflowY ? scrollbarWidth : 0;
     const osbHeight = overflowX ? scrollbarHeight : 0;
     const emptyPlaceholderElem = $xeTable.$refs.refEmptyPlaceholder;
     const mouseOpts = $xeTable.computeMouseOpts;
@@ -946,36 +947,45 @@ function updateStyle($xeTable) {
     const bodyWrapperElem = getRefElem(elemStore['main-body-wrapper']);
     const bodyTableElem = 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;
+    const xScrollbarVisible = overflowX ? 'visible' : 'hidden';
+    let yScrollbarVisible = overflowY ? 'visible' : 'hidden';
+    if ($xeGanttView) {
+        if (!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) {
@@ -993,30 +1003,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`;
     }
+    reactData.tBodyHeight = tbHeight;
     containerList.forEach((name, index) => {
         const fixedType = index > 0 ? name : '';
         const layoutList = ['header', 'body', 'footer'];
@@ -1080,7 +1091,7 @@ function updateStyle($xeTable) {
                     }
                 }
                 if (currScrollElem) {
-                    currScrollElem.style.height = `${headerHeight}px`;
+                    currScrollElem.style.height = `${tHeaderHeight}px`;
                 }
                 if (tableElem) {
                     tableElem.style.width = tWidth ? `${tWidth}px` : '';
@@ -1089,15 +1100,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;
@@ -1174,11 +1185,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`;
                         }
                     }
                 }
@@ -1194,6 +1205,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) {
@@ -2656,12 +2670,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());
+        reactData.tHeaderHeight = hHeight;
+        reactData.tFooterHeight = fHeight;
+        reactData.overflowX = overflowX;
+        reactData.parentHeight = Math.max(hHeight + fHeight + 20, $xeTable.getParentHeight());
     }
     if (overflowX) {
         $xeTable.checkScrolling();
@@ -2717,6 +2732,7 @@ function handleLazyRecalculate($xeTable, reFull, reWidth, reHeight) {
     const internalData = $xeTable;
     return new Promise(resolve => {
         const { rceTimeout, rceRunTime } = internalData;
+        const $xeGanttView = internalData.xeGanttView;
         const resizeOpts = $xeTable.computeResizeOpts;
         const refreshDelay = resizeOpts.refreshDelay || 20;
         const el = $xeTable.$refs.refElem;
@@ -2738,6 +2754,9 @@ 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);
@@ -3515,6 +3534,18 @@ 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 = getRefElem(ganttElemStore['main-body-scroll']);
+        if (ganttBodyScrollElem) {
+            ganttBodyScrollElem.scrollTop = scrollTop;
+        }
+    }
+};
 function updateHeight($xeTable) {
     const reactData = $xeTable;
     const internalData = $xeTable;
@@ -3821,6 +3852,7 @@ const Methods = {
         const internalData = $xeTable;
         const { scrollYLoad } = reactData;
         const { scrollYStore, fullDataRowIdData } = internalData;
+        const $xeGanttView = internalData.xeGanttView;
         let fullList = internalData.afterFullData;
         // 是否进行数据处理
         if (force) {
@@ -3841,6 +3873,9 @@ const Methods = {
         });
         reactData.tableData = tableData;
         internalData.visibleDataRowIdData = visibleDataRowIdMaps;
+        if ($xeGanttView) {
+            $xeGanttView.updateViewData();
+        }
         return $xeTable.$nextTick();
     },
     /**
@@ -9966,6 +10001,7 @@ const Methods = {
             }
             setScrollTop(yHandleEl, scrollTop);
             setScrollTop(rowExpandEl, scrollTop);
+            syncGanttScrollTop($xeTable, scrollTop);
             if (scrollYLoad) {
                 $xeTable.triggerScrollYEvent(evnt);
             }
@@ -10162,6 +10198,7 @@ const Methods = {
                 setScrollTop(leftScrollElem, currTopNum);
                 setScrollTop(rightScrollElem, currTopNum);
                 setScrollTop(rowExpandEl, currTopNum);
+                syncGanttScrollTop($xeTable, currTopNum);
                 if (scrollYLoad) {
                     $xeTable.triggerScrollYEvent(evnt);
                 }
@@ -10179,6 +10216,7 @@ const Methods = {
                     setScrollTop(leftScrollElem, currTopNum);
                     setScrollTop(rightScrollElem, currTopNum);
                     setScrollTop(rowExpandEl, currTopNum);
+                    syncGanttScrollTop($xeTable, currTopNum);
                     if (scrollYLoad) {
                         $xeTable.triggerScrollYEvent(evnt);
                     }
@@ -10258,6 +10296,7 @@ const Methods = {
         setScrollTop(leftScrollElem, scrollTop);
         setScrollTop(rightScrollElem, scrollTop);
         setScrollTop(rowExpandEl, scrollTop);
+        syncGanttScrollTop($xeTable, scrollTop);
         if (scrollYLoad) {
             $xeTable.triggerScrollYEvent(evnt);
         }
@@ -10287,6 +10326,7 @@ const Methods = {
         const internalData = $xeTable;
         const { scrollXLoad, overflowX, scrollXWidth } = reactData;
         const { visibleColumn, scrollXStore, elemStore, fullColumnIdData } = internalData;
+        const $xeGanttView = internalData.xeGanttView;
         const mouseOpts = $xeTable.computeMouseOpts;
         const tableBody = $xeTable.$refs.refTableBody;
         const tableBodyElem = tableBody ? tableBody.$el : null;
@@ -10348,10 +10388,13 @@ const Methods = {
             if (scrollXSpaceEl) {
                 scrollXSpaceEl.style.width = `${ySpaceWidth}px`;
             }
+            calcScrollbar($xeTable);
             if (isScrollXBig && mouseOpts.area) {
                 errLog('vxe.error.notProp', ['mouse-config.area']);
             }
-            calcScrollbar($xeTable);
+            if ($xeGanttView) {
+                $xeGanttView.updateScrollXSpace();
+            }
             return $xeTable.$nextTick(() => {
                 updateStyle($xeTable);
             });
@@ -10373,6 +10416,7 @@ const Methods = {
         const internalData = $xeTable;
         const { isAllOverflow, scrollYLoad, expandColumn } = reactData;
         const { scrollYStore, elemStore, isResizeCellHeight, afterFullData, fullAllDataRowIdData, rowExpandedMaps } = internalData;
+        const $xeGanttView = internalData.xeGanttView;
         const { startIndex } = scrollYStore;
         const mouseOpts = $xeTable.computeMouseOpts;
         const expandOpts = $xeTable.computeExpandOpts;
@@ -10465,10 +10509,13 @@ const Methods = {
         reactData.scrollYTop = scrollYTop;
         reactData.scrollYHeight = scrollYHeight;
         reactData.isScrollYBig = isScrollYBig;
+        calcScrollbar($xeTable);
         if (isScrollYBig && mouseOpts.area) {
             errLog('vxe.error.notProp', ['mouse-config.area']);
         }
-        calcScrollbar($xeTable);
+        if ($xeGanttView) {
+            $xeGanttView.updateScrollYSpace();
+        }
         return $xeTable.$nextTick().then(() => {
             updateStyle($xeTable);
         });
@@ -10824,10 +10871,21 @@ 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 });
+            $toolbar.syncUpdate({ collectColumn: this.collectColumn, $table: $xeTable });
             this.$toolbar = $toolbar;
         }
         else {
@@ -10835,6 +10893,15 @@ 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
      *************************/

package/es/table/src/props.js

@@ -1,6 +1,6 @@
 import { VxeUI } from '../../ui';
 const { getConfig } = VxeUI;
-export default {
+export const tableProps = {
     /** 基本属性 */
     id: [String, Function],
     // 数据

package/es/table/src/table.js

@@ -7,7 +7,7 @@ import methods from './methods';
 import TableBodyComponent from './body';
 import TableHeaderComponent from './header';
 import TableFooterComponent from './footer';
-import tableProps from './props';
+import { tableProps } from './props';
 import { getSlotVNs } from '../../ui/src/vn';
 import { warnLog, errLog } from '../../ui/src/log';
 import TableCustomPanelComponent from '../module/custom/panel';
@@ -489,6 +489,12 @@ export default {
             scrollbarHeight: 0,
             // 行高
             rowHeight: 0,
+            // 表头高度
+            tHeaderHeight: 0,
+            // 表体高度
+            tBodyHeight: 0,
+            // 表尾高度
+            tFooterHeight: 0,
             // 表格父容器的高度
             parentHeight: 0,
             // 是否使用分组表头

package/es/table/src/util.js

@@ -33,10 +33,6 @@ export function createInternalData() {
         tableWidth: 0,
         // 表格高度
         tableHeight: 0,
-        // 表头高度
-        headerHeight: 0,
-        // 表尾高度
-        footerHeight: 0,
         customHeight: 0,
         customMinHeight: 0,
         customMaxHeight: 0,

package/es/toolbar/src/toolbar.js

@@ -332,7 +332,7 @@ export default {
                     }
                     else {
                         const gCommandOpts = commands.get(code);
-                        const params = { code, button: item, $table: $table, $grid: $xeGrid, $event };
+                        const params = { code, button: item, $table: $table, $grid: $xeGrid, $gantt: null, $event };
                         if (gCommandOpts) {
                             const tCommandMethod = gCommandOpts.tableCommandMethod || gCommandOpts.commandMethod;
                             if (tCommandMethod) {
@@ -362,7 +362,7 @@ export default {
                     }
                     else {
                         const gCommandOpts = commands.get(code);
-                        const params = { code, button: null, tool: item, $table: $table, $grid: $xeGrid, $event };
+                        const params = { code, button: null, tool: item, $table: $table, $grid: $xeGrid, $gantt: null, $event };
                         if (gCommandOpts) {
                             const tCommandMethod = gCommandOpts.tableCommandMethod || gCommandOpts.commandMethod;
                             if (tCommandMethod) {

package/es/ui/index.js

@@ -1,6 +1,6 @@
 import { VxeUI } from '@vxe-ui/core';
 import { getFuncText } from './src/utils';
-export const version = "3.17.7";
+export const version = "3.17.8";
 VxeUI.version = version;
 VxeUI.tableVersion = version;
 VxeUI.setConfig({
@@ -227,8 +227,16 @@ VxeUI.setConfig({
             oSize: 0
         },
         scrollbarConfig: {
-        // width: 14,
-        // height: 14
+            // width: 14,
+            // height: 14,
+            x: {
+                // position: 'bottom',
+                visible: true
+            },
+            y: {
+                // position: 'right',
+                visible: true
+            }
         }
     },
     // export: {
@@ -281,7 +289,8 @@ VxeUI.setConfig({
     //   types: ['csv', 'html', 'xml', 'txt']
     // },
     // buttons: []
-    }
+    },
+    gantt: {}
 });
 const iconPrefix = 'vxe-table-icon-';
 VxeUI.setIcon({

package/es/ui/src/log.js

@@ -1,5 +1,5 @@
 import { VxeUI } from '@vxe-ui/core';
 const { log } = VxeUI;
-const version = `table v${"3.17.7"}`;
+const version = `table v${"3.17.8"}`;
 export const warnLog = log.create('warn', version);
 export const errLog = log.create('error', version);