vxe-table 3.18.0-beta.6 → 3.18.0-beta.8

package/es/table/module/custom/panel.js

@@ -894,8 +894,6 @@ export default {
         const VxeUIRadioGroupComponent = VxeUI.getComponent('VxeRadioGroup');
         $xeTableCustomPanel.$nextTick(() => {
             const $xeTable = $xeTableCustomPanel.$xeTable;
-            const $xeGantt = $xeTable.$xeGantt;
-            const tableInternalData = $xeTable;
             const { customOpts } = $xeTable;
             const { mode } = customOpts;
             if (!VxeUIModalComponent && (mode === 'modal')) {
@@ -913,26 +911,8 @@ export default {
             if (!VxeUIRadioGroupComponent) {
                 errLog('vxe.error.reqComp', ['vxe-radio-group']);
             }
-            if ($xeGantt) {
-                const { teleportToWrapperElem } = tableInternalData;
-                const el = $xeTableCustomPanel.$refs.refElem;
-                if (el && teleportToWrapperElem) {
-                    teleportToWrapperElem.appendChild(el);
-                }
-            }
         });
     },
-    beforeDestroy() {
-        const $xeTableCustomPanel = this;
-        const $xeTable = $xeTableCustomPanel.$xeTable;
-        const $xeGantt = $xeTable.$xeGantt;
-        if ($xeGantt) {
-            const el = $xeTableCustomPanel.$refs.refElem;
-            if (el && el.parentElement) {
-                el.parentElement.removeChild(el);
-            }
-        }
-    },
     render(h) {
         const $xeTableCustomPanel = this;
         const $xeTable = $xeTableCustomPanel.$xeTable;

package/es/table/src/anime.js

@@ -16,10 +16,10 @@ export function moveRowAnimateToTb(elemList, offsetTop) {
         });
     });
 }
-export function clearRowAnimate(elem) {
+export function clearRowAnimate(elem, clss) {
     setTimeout(() => {
         if (elem) {
-            XEUtils.arrayEach(elem.querySelectorAll(`.vxe-body--row.${rowMoveCls}`), elem => removeClass(elem, rowMoveCls));
+            XEUtils.arrayEach(elem.querySelectorAll(clss.map(cls => `${cls}.${rowMoveCls}`).join(',')), elem => removeClass(elem, rowMoveCls));
         }
     }, 500);
 }
@@ -37,10 +37,10 @@ export function moveColAnimateToLr(elemList, offsetLeft) {
         });
     });
 }
-export function clearColAnimate(elem) {
+export function clearColAnimate(elem, clss) {
     setTimeout(() => {
         if (elem) {
-            XEUtils.arrayEach(elem.querySelectorAll(`.vxe-table--column.${colMoveClass}`), elem => removeClass(elem, colMoveClass));
+            XEUtils.arrayEach(elem.querySelectorAll(clss.map(cls => `${cls}.${rowMoveCls}`).join(',')), elem => removeClass(elem, colMoveClass));
         }
     }, 500);
 }

package/es/table/src/footer.js

@@ -2,7 +2,7 @@ import XEUtils from 'xe-utils';
 import { VxeUI } from '../../ui';
 import { getClass } from '../../ui/src/utils';
 import { updateCellTitle } from '../../ui/src/dom';
-import { getCellHeight } from './util';
+import { getCalcHeight } from './util';
 const renderType = 'footer';
 const { renderer, renderEmptyElement } = VxeUI;
 function renderRows(h, _vm, isOptimizeMode, tableColumn, footerTableData, row, $rowIndex, _rowIndex) {
@@ -25,7 +25,7 @@ function renderRows(h, _vm, isOptimizeMode, tableColumn, footerTableData, row, $
     const defaultRowHeight = $xeTable.computeDefaultRowHeight;
     const cellOpts = $xeTable.computeCellOpts;
     const footerCellOpts = $xeTable.computeFooterCellOpts;
-    const currCellHeight = getCellHeight(footerCellOpts.height) || defaultRowHeight;
+    const currCellHeight = getCalcHeight(footerCellOpts.height) || defaultRowHeight;
     return tableColumn.map((column, $columnIndex) => {
         const { type, showFooterOverflow, footerAlign, align, footerClassName, editRender, cellRender } = column;
         const colid = column.id;

package/es/table/src/header.js

@@ -1,7 +1,7 @@
 import XEUtils from 'xe-utils';
 import { VxeUI } from '../../ui';
 import { getClass } from '../../ui/src/utils';
-import { getCellHeight, convertHeaderColumnToRows } from './util';
+import { getCalcHeight, convertHeaderColumnToRows } from './util';
 const { renderer, renderEmptyElement } = VxeUI;
 const cellType = 'header';
 const renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) => {
@@ -22,7 +22,7 @@ const renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) => {
     const cellOpts = $xeTable.computeCellOpts;
     const defaultRowHeight = $xeTable.computeDefaultRowHeight;
     const headerCellOpts = $xeTable.computeHeaderCellOpts;
-    const currCellHeight = getCellHeight(headerCellOpts.height) || defaultRowHeight;
+    const currCellHeight = getCalcHeight(headerCellOpts.height) || defaultRowHeight;
     const { disabledMethod: dragDisabledMethod, isCrossDrag, isPeerDrag } = columnDragOpts;
     return cols.map((column, $columnIndex) => {
         const { type, showHeaderOverflow, headerAlign, align, filters, headerClassName, editRender, cellRender } = column;

package/es/table/src/methods.js

@@ -2442,19 +2442,26 @@ function updateColDropTipContent($xeTable, tdEl) {
     reactData.dragTipText = tipContent;
 }
 function showDropTip($xeTable, evnt, trEl, thEl, showLine, dragPos) {
+    const $xeGantt = $xeTable.$xeGantt;
     const reactData = $xeTable;
     const internalData = $xeTable;
-    const el = $xeTable.$refs.refElem;
-    if (!el) {
+    let wrapperEl = $xeTable.$refs.refElem;
+    if ($xeGantt && trEl) {
+        const ganttContainerElem = $xeGantt.$refs.refGanttContainerElem;
+        if (ganttContainerElem) {
+            wrapperEl = ganttContainerElem;
+        }
+    }
+    if (!wrapperEl) {
         return;
     }
     const { overflowX, scrollbarWidth, overflowY, scrollbarHeight } = reactData;
     const { prevDragToChild } = internalData;
-    const wrapperRect = el.getBoundingClientRect();
+    const wrapperRect = wrapperEl.getBoundingClientRect();
     const osbWidth = overflowY ? scrollbarWidth : 0;
     const osbHeight = overflowX ? scrollbarHeight : 0;
-    const tableWrapperWidth = el.clientWidth;
-    const tableWrapperHeight = el.clientHeight;
+    const tableWrapperWidth = wrapperEl.clientWidth;
+    const tableWrapperHeight = wrapperEl.clientHeight;
     if (trEl) {
         const rdLineEl = $xeTable.$refs.refDragRowLineElem;
         if (rdLineEl) {
@@ -2522,8 +2529,8 @@ function showDropTip($xeTable, evnt, trEl, thEl, showLine, dragPos) {
     const rdTipEl = $xeTable.$refs.refDragTipElem;
     if (rdTipEl) {
         rdTipEl.style.display = 'block';
-        rdTipEl.style.top = `${Math.min(el.clientHeight - el.scrollTop - rdTipEl.clientHeight, evnt.clientY - wrapperRect.y)}px`;
-        rdTipEl.style.left = `${Math.min(el.clientWidth - el.scrollLeft - rdTipEl.clientWidth - 16, evnt.clientX - wrapperRect.x)}px`;
+        rdTipEl.style.top = `${Math.min(wrapperEl.clientHeight - wrapperEl.scrollTop - rdTipEl.clientHeight, evnt.clientY - wrapperRect.y)}px`;
+        rdTipEl.style.left = `${Math.min(wrapperEl.clientWidth - wrapperEl.scrollLeft - rdTipEl.clientWidth - 16, evnt.clientX - wrapperRect.x)}px`;
         rdTipEl.setAttribute('drag-status', showLine ? (prevDragToChild ? 'sub' : 'normal') : 'disabled');
     }
 }
@@ -5515,7 +5522,7 @@ const Methods = {
         if (!cell) {
             return;
         }
-        const cellParams = XEUtils.assign(params, { cell });
+        const cellParams = XEUtils.assign(params, { cell, $table: $xeTable });
         let dragLeft = 0;
         const tableRect = tableEl.getBoundingClientRect();
         const rightContainerRect = rightContainerElem ? rightContainerElem.getBoundingClientRect() : null;
@@ -5645,7 +5652,7 @@ const Methods = {
             const colRest = fullColumnIdData[colid];
             const dragBtnElem = evnt.target;
             const cell = dragBtnElem.parentNode;
-            const cellParams = Object.assign(params, { cell });
+            const cellParams = Object.assign(params, { cell, $table: $xeTable });
             const colMinWidth = getColReMinWidth(cellParams);
             el.setAttribute('data-calc-col', 'Y');
             let resizeWidth = calcColumnAutoWidth($xeTable, resizeColumn, el);
@@ -5673,6 +5680,7 @@ const Methods = {
         const internalData = $xeTable;
         evnt.stopPropagation();
         evnt.preventDefault();
+        const $xeGantt = $xeTable.$xeGantt;
         const { row } = params;
         const { showOverflow } = props;
         const { overflowX, scrollbarWidth, overflowY, scrollbarHeight } = reactData;
@@ -5683,7 +5691,13 @@ const Methods = {
         const resizableOpts = $xeTable.computeResizableOpts;
         const rowOpts = $xeTable.computeRowOpts;
         const cellOpts = $xeTable.computeCellOpts;
-        const tableEl = $xeTable.$refs.refElem;
+        let tableEl = $xeTable.$refs.refElem;
+        if ($xeGantt) {
+            const ganttContainerElem = $xeGantt.$refs.refGanttContainerElem;
+            if (ganttContainerElem) {
+                tableEl = ganttContainerElem;
+            }
+        }
         const resizeBarElem = $xeTable.$refs.refRowResizeBar;
         if (!resizeBarElem) {
             return;
@@ -8115,6 +8129,7 @@ const Methods = {
     },
     handleRowDragSwapEvent(evnt, isSyncRow, dragRow, prevDragRow, prevDragPos, prevDragToChild) {
         const $xeTable = this;
+        const $xeGantt = $xeTable.$xeGantt;
         const props = $xeTable;
         const reactData = $xeTable;
         const internalData = $xeTable;
@@ -8307,6 +8322,13 @@ const Methods = {
                         const _newRowIndex = dragRowRest._index;
                         const firstRow = tableData[0];
                         const firstRowRest = fullAllDataRowIdData[getRowid($xeTable, firstRow)];
+                        let wrapperEl = el;
+                        if ($xeGantt) {
+                            const ganttContainerElem = $xeGantt.$refs.refGanttContainerElem;
+                            if (ganttContainerElem) {
+                                wrapperEl = ganttContainerElem;
+                            }
+                        }
                         if (firstRowRest) {
                             const _firstRowIndex = firstRowRest._index;
                             const _lastRowIndex = _firstRowIndex + tableData.length;
@@ -8340,14 +8362,26 @@ const Methods = {
                             }
                             const dragRangeList = tableData.slice(rsIndex, reIndex);
                             if (dragRangeList.length) {
-                                const dtTrList = el.querySelectorAll(dragRangeList.map(row => `.vxe-body--row[rowid="${getRowid($xeTable, row)}"]`).join(','));
+                                const dtClss = [];
+                                dragRangeList.forEach(row => {
+                                    const rowid = getRowid($xeTable, row);
+                                    dtClss.push(`.vxe-body--row[rowid="${rowid}"]`);
+                                    if ($xeGantt) {
+                                        dtClss.push(`.vxe-gantt-view--body-row[rowid="${rowid}"]`, `.vxe-gantt-view--chart-row[rowid="${rowid}"]`);
+                                    }
+                                });
+                                const dtTrList = wrapperEl.querySelectorAll(dtClss.join(','));
                                 moveRowAnimateToTb(dtTrList, offsetRate * dragRowHeight);
                             }
                         }
-                        const newTrList = el.querySelectorAll(`.vxe-body--row[rowid="${dragRowid}"]`);
-                        const newTrEl = newTrList[0];
+                        const drClss = [`.vxe-body--row[rowid="${dragRowid}"]`];
+                        if ($xeGantt) {
+                            drClss.push(`.vxe-gantt-view--body-row[rowid="${dragRowid}"]`, `.vxe-gantt-view--chart-row[rowid="${dragRowid}"]`);
+                        }
+                        const newDtTrList = wrapperEl.querySelectorAll(drClss.join(','));
+                        const newTrEl = newDtTrList[0];
                         if (dragOffsetTop > -1 && newTrEl) {
-                            moveRowAnimateToTb(newTrList, dragOffsetTop - newTrEl.offsetTop);
+                            moveRowAnimateToTb(newDtTrList, dragOffsetTop - newTrEl.offsetTop);
                         }
                     }
                     updateRowOffsetTop($xeTable);
@@ -8367,6 +8401,7 @@ const Methods = {
     },
     handleRowDragDragendEvent(evnt) {
         const $xeTable = this;
+        const $xeGantt = $xeTable.$xeGantt;
         const props = $xeTable;
         const reactData = $xeTable;
         const internalData = $xeTable;
@@ -8377,7 +8412,7 @@ const Methods = {
         const { lazy } = treeOpts;
         const hasChildField = treeOpts.hasChild || treeOpts.hasChildField;
         const { prevDragRow, prevDragPos } = internalData;
-        const el = $xeTable.$refs.refElem;
+        let wrapperEl = $xeTable.$refs.refElem;
         if (treeConfig && lazy && prevDragToChild) {
             // 懒加载
             const newRowid = getRowid($xeTable, prevDragRow);
@@ -8394,9 +8429,17 @@ const Methods = {
         else {
             $xeTable.handleRowDragSwapEvent(evnt, true, dragRow, prevDragRow, prevDragPos, prevDragToChild);
         }
+        const dtClss = ['.vxe-body--row'];
+        if ($xeGantt) {
+            const ganttContainerElem = $xeGantt.$refs.refGanttContainerElem;
+            if (ganttContainerElem) {
+                wrapperEl = ganttContainerElem;
+            }
+            dtClss.push('.vxe-gantt-view--body-row', '.vxe-gantt-view--chart-row');
+        }
         hideDropTip($xeTable);
         clearRowDropOrigin($xeTable);
-        clearRowAnimate(el);
+        clearRowAnimate(wrapperEl, dtClss);
         internalData.prevDragToChild = false;
         reactData.dragRow = null;
         reactData.dragCol = null;
@@ -8785,7 +8828,7 @@ const Methods = {
         $xeTable.handleColDragSwapEvent(evnt, true, dragCol, prevDragCol, prevDragPos, prevDragToChild);
         hideDropTip($xeTable);
         clearColDropOrigin($xeTable);
-        clearColAnimate(el);
+        clearColAnimate(el, ['.vxe-table--column']);
         internalData.prevDragToChild = false;
         reactData.dragRow = null;
         reactData.dragCol = null;

package/es/table/src/table.js

@@ -1,7 +1,7 @@
 import XEUtils from 'xe-utils';
 import { getFuncText, isEnableConf } from '../../ui/src/utils';
 import { initTpImg } from '../../ui/src/dom';
-import { createInternalData, createHandleGetRowId, getCellHeight, hasDeepKey } from './util';
+import { createInternalData, createHandleGetRowId, getCalcHeight, hasDeepKey } from './util';
 import { VxeUI } from '../../ui';
 import methods from './methods';
 import TableBodyComponent from './body';
@@ -864,10 +864,20 @@ export default {
         },
         computeHeaderCellOpts() {
             const $xeTable = this;
+            const $xeGantt = $xeTable.$xeGantt;
             const props = $xeTable;
             const headerCellOpts = Object.assign({}, getConfig().table.headerCellConfig, props.headerCellConfig);
+            const defaultRowHeight = $xeTable.computeDefaultRowHeight;
             const cellOpts = $xeTable.computeCellOpts;
-            headerCellOpts.height = XEUtils.toNumber(getCellHeight(headerCellOpts.height || cellOpts.height));
+            let headCellHeight = XEUtils.toNumber(getCalcHeight(headerCellOpts.height || cellOpts.height));
+            if ($xeGantt) {
+                const taskScaleConfs = $xeGantt.computeTaskScaleConfs;
+                if (taskScaleConfs && taskScaleConfs.length > 2) {
+                    const ganttMinHeadCellHeight = defaultRowHeight / 2 * taskScaleConfs.length;
+                    headCellHeight = Math.max(ganttMinHeadCellHeight, headCellHeight);
+                }
+            }
+            headerCellOpts.height = headCellHeight;
             return headerCellOpts;
         },
         computeFooterCellOpts() {
@@ -875,7 +885,7 @@ export default {
             const props = $xeTable;
             const footerCellOpts = Object.assign({}, getConfig().table.footerCellConfig, props.footerCellConfig);
             const cellOpts = $xeTable.computeCellOpts;
-            footerCellOpts.height = XEUtils.toNumber(getCellHeight(footerCellOpts.height || cellOpts.height));
+            footerCellOpts.height = XEUtils.toNumber(getCalcHeight(footerCellOpts.height || cellOpts.height));
             return footerCellOpts;
         },
         rowOpts() {
@@ -1568,6 +1578,14 @@ export default {
         if (checkboxOpts.halfField) {
             warnLog('vxe.error.delProp', ['checkbox-config.halfField', 'checkbox-config.indeterminateField']);
         }
+        if (treeConfig) {
+            XEUtils.arrayEach(['rowField', 'parentField', 'childrenField', 'hasChildField', 'mapChildrenField'], key => {
+                const val = treeOpts[key];
+                if (val && val.indexOf('.') > -1) {
+                    errLog('vxe.error.errProp', [`${key}=${val}`, `${key}=${val.split('.')[0]}`]);
+                }
+            });
+        }
         // 在 v3.0 中废弃 context-menu
         if (this.contextMenu) {
             warnLog('vxe.error.delProp', ['context-menu', 'menu-config']);
@@ -1680,7 +1698,11 @@ export default {
         const virtualYOpts = $xeTable.computeVirtualYOpts;
         if ($xeGantt) {
             const classifyWrapperEl = $xeGantt.$refs.refClassifyWrapperElem;
+            const teleportWrapperEl = $xeTable.$refs.refTeleportWrapper;
             if (classifyWrapperEl) {
+                if (teleportWrapperEl) {
+                    classifyWrapperEl.appendChild(teleportWrapperEl);
+                }
                 internalData.teleportToWrapperElem = classifyWrapperEl;
             }
         }
@@ -1758,6 +1780,10 @@ export default {
     },
     beforeDestroy() {
         const $xeTable = this;
+        const teleportWrapperEl = $xeTable.$refs.refTeleportWrapper;
+        if (teleportWrapperEl && teleportWrapperEl.parentElement) {
+            teleportWrapperEl.parentElement.removeChild(teleportWrapperEl);
+        }
         const tableViewportEl = $xeTable.$refs.refTableViewportElem;
         if (tableViewportEl) {
             tableViewportEl.removeEventListener('wheel', $xeTable.triggerBodyWheelEvent);
@@ -1928,57 +1954,69 @@ export default {
                     })
                 ]
                 : []),
-            /**
-             * 行高线
-             */
             h('div', {
-                key: 'trl',
-                ref: 'refRowResizeBar',
-                class: 'vxe-table--resizable-row-bar'
-            }, resizableOpts.showDragTip
-                ? [
+                key: 'ttw'
+            }, [
+                h('div', {
+                    ref: 'refTeleportWrapper'
+                }, [
+                    /**
+                     * 行高线
+                     */
                     h('div', {
-                        class: 'vxe-table--resizable-number-tip'
-                    })
-                ]
-                : []),
-            /**
-             * 加载中
-             */
-            VxeUILoadingComponent
-                ? h(VxeUILoadingComponent, {
-                    key: 'lg',
-                    class: 'vxe-table--loading',
-                    props: {
-                        value: currLoading,
-                        icon: loadingOpts.icon,
-                        text: loadingOpts.text
-                    },
-                    scopedSlots: loadingSlot
-                        ? {
-                            default: () => $xeTable.callSlot(loadingSlot, { $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt, loading: currLoading }, h)
-                        }
-                        : {}
-                })
-                : loadingSlot
-                    ? h('div', {
-                        class: ['vxe-loading--custom-wrapper', {
-                                'is--visible': currLoading
-                            }]
-                    }, $xeTable.callSlot(loadingSlot, { $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt, loading: currLoading }, h))
-                    : renderEmptyElement($xeTable),
-            /**
-             * 自定义列
-             */
-            initStore.custom
-                ? h(TableCustomPanelComponent, {
-                    key: 'cs',
-                    ref: 'refTableCustom',
-                    props: {
-                        customStore
-                    }
-                })
-                : renderEmptyElement($xeTable),
+                        key: 'trl',
+                        ref: 'refRowResizeBar',
+                        class: 'vxe-table--resizable-row-bar'
+                    }, resizableOpts.showDragTip
+                        ? [
+                            h('div', {
+                                class: 'vxe-table--resizable-number-tip'
+                            })
+                        ]
+                        : []),
+                    /**
+                     * 自定义列
+                     */
+                    initStore.custom
+                        ? h(TableCustomPanelComponent, {
+                            key: 'cs',
+                            ref: 'refTableCustom',
+                            props: {
+                                customStore
+                            }
+                        })
+                        : renderEmptyElement($xeTable),
+                    /**
+                     * 加载中
+                     */
+                    VxeUILoadingComponent
+                        ? h(VxeUILoadingComponent, {
+                            key: 'lg',
+                            class: 'vxe-table--loading',
+                            props: {
+                                value: currLoading,
+                                icon: loadingOpts.icon,
+                                text: loadingOpts.text
+                            },
+                            scopedSlots: loadingSlot
+                                ? {
+                                    default: () => $xeTable.callSlot(loadingSlot, { $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt, loading: currLoading }, h)
+                                }
+                                : {}
+                        })
+                        : loadingSlot
+                            ? h('div', {
+                                class: ['vxe-loading--custom-wrapper', {
+                                        'is--visible': currLoading
+                                    }]
+                            }, $xeTable.callSlot(loadingSlot, { $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt, loading: currLoading }, h))
+                            : renderEmptyElement($xeTable),
+                    /**
+                     * 拖拽提示
+                     */
+                    renderDragTip(h, this)
+                ])
+            ]),
             /**
              * 筛选
              */
@@ -2016,8 +2054,8 @@ export default {
                 })
                 : renderEmptyElement($xeTable),
             /**
-               * 快捷菜单
-               */
+             * 快捷菜单
+             */
             isMenu
                 ? h(TableMenuPanelComponent, {
                     key: 'tm',
@@ -2028,10 +2066,6 @@ export default {
                     }
                 })
                 : renderEmptyElement($xeTable),
-            /**
-             * 拖拽提示
-             */
-            renderDragTip(h, this),
             h('div', {}, [
                 /**
                  * 提示相关

package/es/table/src/util.js

@@ -286,7 +286,7 @@ function getElementMarginAndWidth(elem) {
     }
     return 0;
 }
-export function getCellHeight(height) {
+export function getCalcHeight(height) {
     if (height === 'unset') {
         return 0;
     }