vxe-table 3.19.0 → 3.19.2

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

@@ -953,6 +953,7 @@ export default {
             $xeTable.saveCustom();
             $xeTable.closeCustom();
             $xeTable.emitCustomEvent('confirm', $event);
+            $xeTable.emitCustomEvent('close', $event);
         },
         cancelCloseEvent({ $event }) {
             const $xeTableCustomPanel = this;
@@ -966,6 +967,7 @@ export default {
             $xeTable.cancelCustom();
             $xeTable.closeCustom();
             $xeTable.emitCustomEvent('cancel', $event);
+            $xeTable.emitCustomEvent('close', $event);
         },
         handleResetCustomEvent(evnt) {
             const $xeTableCustomPanel = this;
@@ -973,6 +975,7 @@ export default {
             $xeTable.resetCustom(true);
             $xeTable.closeCustom();
             $xeTable.emitCustomEvent('reset', evnt);
+            $xeTable.emitCustomEvent('close', evnt);
         },
         resetCustomEvent(evnt) {
             if (VxeUI.modal) {

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

@@ -163,6 +163,9 @@ export default {
          */
         handleOpenMenuEvent(evnt, type, params) {
             const $xeTable = this;
+            const $xeGrid = $xeTable.$xeGrid;
+            const $xeGantt = $xeTable.$xeGantt;
+            const $xeGGWrapper = $xeGrid || $xeGantt;
             const reactData = $xeTable;
             const internalData = $xeTable;
             const { ctxMenuStore } = reactData;
@@ -181,7 +184,7 @@ export default {
                         if (!visibleMethod || visibleMethod(params)) {
                             evnt.preventDefault();
                             $xeTable.updateZindex();
-                            const el = $xeTable.$refs.refElem;
+                            const el = $xeGGWrapper ? $xeGGWrapper.$refs.refElem : $xeTable.$refs.refElem;
                             const tableRect = el.getBoundingClientRect();
                             const { scrollTop, scrollLeft, visibleHeight, visibleWidth } = getDomNode();
                             let top = evnt.clientY - tableRect.y;

package/es/table/src/cell.js

@@ -370,9 +370,8 @@ export const Cell = {
         const tableInternalData = $table;
         const { isRowGroupStatus } = tableReactData;
         const { editConfig } = tableProps;
-        const editOpts = $table.computeEditOpts;
-        const { field, slots, editRender, cellRender, rowGroupNode, aggFunc } = column;
-        const renderOpts = editConfig && isEnableConf(editOpts) && editRender ? editRender : cellRender;
+        const { field, slots, editRender, cellRender, rowGroupNode, aggFunc, formatter } = column;
+        const renderOpts = editConfig && isEnableConf(editRender) ? editRender : (isEnableConf(cellRender) ? cellRender : null);
         const defaultSlot = slots ? slots.default : null;
         const gcSlot = slots ? (slots.groupContent || slots['group-content']) : null;
         let cellValue = '';
@@ -433,7 +432,8 @@ export const Cell = {
             if (defaultSlot) {
                 return renderCellBaseVNs(h, params, $table.callSlot(defaultSlot, params, h));
             }
-            if (renderOpts) {
+            // formatter > (renderTableCell | renderTableDefault)
+            if (renderOpts && !formatter) {
                 const compConf = renderer.get(renderOpts.name);
                 const rtDefault = compConf ? (compConf.renderTableDefault || compConf.renderDefault) : null;
                 const rtCell = compConf ? (compConf.renderTableCell || compConf.renderCell) : null;

package/es/table/src/methods.js

@@ -957,7 +957,7 @@ function updateStyle($xeTable) {
     const { visibleColumn, tableHeight, elemStore, customHeight, customMinHeight, customMaxHeight, tHeaderHeight, tFooterHeight } = internalData;
     const $xeGanttView = internalData.xeGanttView;
     const el = $xeTable.$refs.refElem;
-    if (!el || !el.clientHeight) {
+    if (!el || (internalData.tBodyHeight && !el.clientHeight)) {
         return;
     }
     const containerList = ['main', 'left', 'right'];
@@ -2272,7 +2272,7 @@ function clearAllSort($xeTable) {
 function calcTableHeight($xeTable, key) {
     const props = $xeTable;
     const reactData = $xeTable;
-    const { editConfig } = props;
+    const { editConfig, editRules } = props;
     const { parentHeight } = reactData;
     let val = props[key];
     if (key === 'minHeight') {
@@ -2280,7 +2280,7 @@ function calcTableHeight($xeTable, key) {
         if (XEUtils.eqNull(val)) {
             if (eqEmptyValue(defMinHeight)) {
                 // 编辑模式默认最小高度
-                if (isEnableConf(editConfig)) {
+                if (editRules && isEnableConf(editConfig)) {
                     val = 144;
                 }
             }
@@ -6319,7 +6319,7 @@ const Methods = {
             }
             else {
                 if (!getEventTargetNode(evnt, document.body, 'vxe-table--ignore-clear').flag) {
-                    this.preventEvent(evnt, 'event.clearFilter', internalData._currFilterParams, this.closeFilter);
+                    $xeTable.preventEvent(evnt, 'event.clearFilter', internalData._currFilterParams, $xeTable.closeFilter);
                 }
             }
         }
@@ -6333,7 +6333,12 @@ const Methods = {
             }
             else {
                 if (!getEventTargetNode(evnt, document.body, 'vxe-table--ignore-clear').flag) {
-                    this.preventEvent(evnt, 'event.clearCustom', {}, () => this.closeCustom());
+                    if (customStore.visible && $xeTable.closeCustom) {
+                        $xeTable.preventEvent(evnt, 'event.clearCustom', {}, () => {
+                            $xeTable.closeCustom();
+                            $xeTable.dispatchEvent('custom', { type: 'close' }, evnt);
+                        });
+                    }
                 }
             }
         }
@@ -6346,10 +6351,10 @@ const Methods = {
                     if (validTooltip && getEventTargetNode(evnt, validTooltip.$el).flag) {
                         // 如果是激活状态，且点击了校验提示框
                     }
-                    else if (!this.lastCallTime || this.lastCallTime + 50 < Date.now()) {
+                    else if (!internalData._lastCallTime || internalData._lastCallTime + 50 < Date.now()) {
                         if (!getEventTargetNode(evnt, document.body, 'vxe-table--ignore-clear').flag) {
                             // 如果手动调用了激活单元格，避免触发源被移除后导致重复关闭
-                            this.preventEvent(evnt, 'event.clearEdit', actived.args, () => {
+                            $xeTable.preventEvent(evnt, 'event.clearEdit', actived.args, () => {
                                 let isClear;
                                 if (editOpts.mode === 'row') {
                                     const rowTargetNode = getEventTargetNode(evnt, el, 'vxe-body--row');
@@ -6370,7 +6375,7 @@ const Methods = {
                                     isClear = getEventTargetNode(evnt, el, 'vxe-footer--row').flag;
                                 }
                                 // 如果固定了高度且点击了行之外的空白处，则清除激活状态
-                                if (!isClear && this.height && !this.overflowY) {
+                                if (!isClear && props.height && !reactData.overflowY) {
                                     const bodyWrapperElem = evnt.target;
                                     if (hasClass(bodyWrapperElem, 'vxe-table--body-wrapper')) {
                                         isClear = evnt.offsetY < bodyWrapperElem.clientHeight;
@@ -6382,8 +6387,8 @@ const Methods = {
                                     setTimeout(() => {
                                         $xeTable.handleClearEdit(evnt).then(() => {
                                             // 如果存在校验，点击了表格之外则清除
-                                            if (!this.isActivated && editRules && validOpts.autoClear) {
-                                                this.validErrorMaps = {};
+                                            if (!internalData.isActivated && editRules && validOpts.autoClear) {
+                                                reactData.validErrorMaps = {};
                                             }
                                         });
                                     });
@@ -6415,29 +6420,31 @@ const Methods = {
         }
         // 如果配置了快捷菜单且，点击了其他地方则关闭
         if (ctxMenuStore.visible && tableMenu && !getEventTargetNode(evnt, tableMenu.$el).flag) {
-            this.closeMenu();
+            $xeTable.closeMenu();
         }
         const isActivated = getEventTargetNode(evnt, ($xeGGWrapper || $xeTable).$el).flag;
         // 如果存在校验，点击了表格之外则清除
         if (!isActivated && editRules && validOpts.autoClear) {
-            this.validErrorMaps = {};
+            reactData.validErrorMaps = {};
         }
         // 最后激活的表格
-        this.isActivated = isActivated;
+        internalData.isActivated = isActivated;
     },
     /**
      * 窗口失焦事件处理
      */
     handleGlobalBlurEvent() {
-        this.closeFilter();
-        this.closeMenu();
+        const $xeTable = this;
+        $xeTable.closeFilter();
+        $xeTable.closeMenu();
     },
     /**
      * 全局滚动事件
      */
     handleGlobalMousewheelEvent() {
-        this.closeTooltip();
-        this.closeMenu();
+        const $xeTable = this;
+        $xeTable.closeTooltip();
+        $xeTable.closeMenu();
     },
     /**
      * 表格键盘事件
@@ -10482,17 +10489,44 @@ const Methods = {
      * 获取表格的滚动状态
      */
     getScroll() {
+        const $xeTable = this;
+        return $xeTable.getScrollData();
+    },
+    /**
+     * 获取表格的滚动数据
+     */
+    getScrollData() {
         const $xeTable = this;
         const reactData = $xeTable;
         const internalData = $xeTable;
-        const { scrollXLoad, scrollYLoad } = reactData;
+        const { scrollXLoad, scrollYLoad, scrollbarHeight, scrollbarWidth } = reactData;
         const { elemStore } = internalData;
         const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
+        const scrollTop = bodyScrollElem ? bodyScrollElem.scrollTop : 0;
+        const scrollLeft = bodyScrollElem ? bodyScrollElem.scrollLeft : 0;
+        const clientHeight = bodyScrollElem ? bodyScrollElem.clientHeight : 0;
+        const clientWidth = bodyScrollElem ? bodyScrollElem.clientWidth : 0;
+        const scrollHeight = bodyScrollElem ? bodyScrollElem.scrollHeight : 0;
+        const scrollWidth = bodyScrollElem ? bodyScrollElem.scrollWidth : 0;
+        const isTop = scrollTop <= 0;
+        const isBottom = scrollTop + clientHeight >= scrollHeight;
+        const isLeft = scrollLeft <= 0;
+        const isRight = scrollLeft + clientWidth >= scrollWidth;
         return {
             virtualX: scrollXLoad,
             virtualY: scrollYLoad,
-            scrollTop: bodyScrollElem ? bodyScrollElem.scrollTop : 0,
-            scrollLeft: bodyScrollElem ? bodyScrollElem.scrollLeft : 0
+            isTop,
+            isBottom,
+            isLeft,
+            isRight,
+            scrollbarHeight,
+            scrollbarWidth,
+            scrollTop,
+            scrollLeft,
+            scrollHeight,
+            scrollWidth,
+            clientHeight,
+            clientWidth
         };
     },
     handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, params) {
@@ -10804,11 +10838,10 @@ const Methods = {
         const { scrollXLoad, scrollYLoad, expandColumn } = reactData;
         const leftFixedWidth = $xeTable.computeLeftFixedWidth;
         const rightFixedWidth = $xeTable.computeRightFixedWidth;
-        if (!(leftFixedWidth || rightFixedWidth || expandColumn)) {
-            return;
-        }
         const { elemStore, lastScrollTop, lastScrollLeft } = internalData;
         const rowOpts = $xeTable.computeRowOpts;
+        const scrollbarXOpts = $xeTable.computeScrollbarXOpts;
+        const scrollbarYOpts = $xeTable.computeScrollbarYOpts;
         const xHandleEl = $xeTable.$refs.refScrollXHandleElem;
         const yHandleEl = $xeTable.$refs.refScrollYHandleElem;
         const leftScrollElem = getRefElem(elemStore['left-body-scroll']);
@@ -10817,12 +10850,6 @@ const Methods = {
         const footerScrollElem = getRefElem(elemStore['main-footer-scroll']);
         const rightScrollElem = getRefElem(elemStore['right-body-scroll']);
         const rowExpandEl = $xeTable.$refs.refRowExpandElem;
-        if (!xHandleEl) {
-            return;
-        }
-        if (!yHandleEl) {
-            return;
-        }
         if (!bodyScrollElem) {
             return;
         }
@@ -10835,13 +10862,28 @@ const Methods = {
         const scrollLeft = currScrollLeft + deltaLeft;
         const isRollX = scrollLeft !== lastScrollLeft;
         const isRollY = scrollTop !== lastScrollTop;
+        if (isRollX) {
+            // 如果禁用滚动
+            if (scrollbarXOpts.visible === 'hidden') {
+                evnt.preventDefault();
+                return;
+            }
+        }
         if (isRollY) {
+            // 如果禁用滚动
+            if (scrollbarYOpts.visible === 'hidden') {
+                evnt.preventDefault();
+                return;
+            }
             const isTopWheel = deltaTop < 0;
             // 如果滚动位置已经是顶部或底部，则不需要触发
             if (isTopWheel ? currScrollTop <= 0 : currScrollTop >= bodyScrollElem.scrollHeight - bodyScrollElem.clientHeight) {
                 return;
             }
         }
+        if (!(leftFixedWidth || rightFixedWidth || expandColumn)) {
+            return;
+        }
         if (rowOpts.isHover || highlightHoverRow) {
             $xeTable.clearHoverRow();
         }
@@ -11367,6 +11409,8 @@ const Methods = {
         scrollYStore.endIndex = scrollYStore.visibleSize;
         scrollYStore.visibleEndIndex = scrollYStore.visibleSize;
         return $xeTable.$nextTick().then(() => {
+            internalData.lastScrollLeft = 0;
+            internalData.lastScrollTop = 0;
             internalData.intoRunScroll = false;
         });
     },

package/es/table/src/table.js

@@ -72,7 +72,7 @@ function renderViewFixed(h, $xeTable, fixedType) {
     const osYBehavior = XEUtils.eqNull(overscrollYBehavior) ? scrollbarOpts.overscrollBehavior : overscrollYBehavior;
     return h('div', {
         ref: isFixedLeft ? 'refLeftContainer' : 'refRightContainer',
-        class: [`vxe-table--fixed-${fixedType}-wrapper`, {
+        class: [`vxe-table--fixed-${fixedType}-wrapper`, `sx--${scrollbarXOpts.visible}`, `sy--${scrollbarYOpts.visible}`, {
                 [`x-ob--${osXBehavior}`]: osXBehavior,
                 [`y-ob--${osYBehavior}`]: osYBehavior
             }]
@@ -413,7 +413,7 @@ function renderViewport(h, $xeTable) {
             }]
     }, [
         h('div', {
-            class: 'vxe-table--main-wrapper'
+            class: ['vxe-table--main-wrapper', `sx--${scrollbarXOpts.visible}`, `sy--${scrollbarYOpts.visible}`]
         }, [
             /**
                * 表头
@@ -1364,6 +1364,12 @@ export default {
         },
         computeVxeLanguage() {
             return VxeUI.getLanguage();
+        },
+        computeScrollbarVisible() {
+            const $xeTable = this;
+            const scrollbarXOpts = $xeTable.computeScrollbarXOpts;
+            const scrollbarYOpts = $xeTable.computeScrollbarYOpts;
+            return `${scrollbarXOpts.visible}${scrollbarYOpts.visible}`;
         } }),
     watch: {
         data(value) {
@@ -1433,6 +1439,9 @@ export default {
         computeVxeLanguage() {
             this.reLayoutFlag++;
         },
+        computeScrollbarVisible() {
+            this.reLayoutFlag++;
+        },
         reLayoutFlag() {
             const $xeTable = this;
             $xeTable.$nextTick(() => $xeTable.recalculate(true));
@@ -2051,11 +2060,15 @@ export default {
             h('div', {
                 key: 'tn',
                 ref: 'refEmptyPlaceholder',
-                class: 'vxe-table--empty-placeholder'
+                class: 'vxe-table--empty-place-wrapper'
             }, [
                 h('div', {
-                    class: 'vxe-table--empty-content'
-                }, renderEmptyBody(h, $xeTable))
+                    class: 'vxe-table--empty-placeholder'
+                }, [
+                    h('div', {
+                        class: 'vxe-table--empty-content'
+                    }, renderEmptyBody(h, $xeTable))
+                ])
             ]),
             /**
              * 边框线

package/es/table/src/util.js

@@ -576,29 +576,35 @@ export function getRefElem(refEl) {
     }
     return null;
 }
-export function clearTableDefaultStatus(_vm) {
-    _vm.initStatus = false;
-    _vm.clearSort();
-    _vm.clearCurrentRow();
-    _vm.clearCurrentColumn();
-    _vm.clearRadioRow();
-    _vm.clearRadioReserve();
-    _vm.clearCheckboxRow();
-    _vm.clearCheckboxReserve();
-    _vm.clearRowExpand();
-    _vm.clearTreeExpand();
-    _vm.clearTreeExpandReserve();
-    if (_vm.clearEdit) {
-        _vm.clearEdit();
-    }
-    if (_vm.clearSelected && (_vm.keyboardConfig || _vm.mouseConfig)) {
-        _vm.clearSelected();
-    }
-    if (_vm.clearCellAreas && _vm.mouseConfig) {
-        _vm.clearCellAreas();
-        _vm.clearCopyCellArea();
-    }
-    return _vm.clearScroll();
+export function clearTableDefaultStatus($xeTable) {
+    const props = $xeTable;
+    const internalData = $xeTable;
+    internalData.initStatus = false;
+    const actionList = [
+        $xeTable.clearSort(),
+        $xeTable.clearCurrentRow(),
+        $xeTable.clearCurrentColumn(),
+        $xeTable.clearRadioRow(),
+        $xeTable.clearRadioReserve(),
+        $xeTable.clearCheckboxRow(),
+        $xeTable.clearCheckboxReserve(),
+        $xeTable.clearRowExpand(),
+        $xeTable.clearTreeExpand(),
+        $xeTable.clearTreeExpandReserve(),
+        $xeTable.clearPendingRow()
+    ];
+    if ($xeTable.clearFilter) {
+        actionList.push($xeTable.clearFilter());
+    }
+    if ($xeTable.clearSelected && (props.keyboardConfig || props.mouseConfig)) {
+        actionList.push($xeTable.clearSelected());
+    }
+    if ($xeTable.clearCellAreas && props.mouseConfig) {
+        actionList.push($xeTable.clearCellAreas(), $xeTable.clearCopyCellArea());
+    }
+    return Promise.all(actionList).then(() => {
+        return $xeTable.clearScroll();
+    });
 }
 export function clearTableAllStatus(_vm) {
     if (_vm.clearFilter) {

package/es/table/style.css

@@ -1839,6 +1839,28 @@
   overflow-x: scroll;
 }
 
+.vxe-table--main-wrapper.sx--hidden > .vxe-table--header-wrapper > .vxe-table--header-inner-wrapper {
+  overflow-x: hidden;
+}
+.vxe-table--main-wrapper.sx--hidden > .vxe-table--body-wrapper > .vxe-table--body-inner-wrapper {
+  overflow-x: hidden;
+}
+.vxe-table--main-wrapper.sx--hidden > .vxe-table--footer-wrapper > .vxe-table--footer-inner-wrapper {
+  overflow-x: hidden;
+}
+.vxe-table--main-wrapper.sy--hidden > .vxe-table--body-wrapper > .vxe-table--body-inner-wrapper {
+  overflow-y: hidden;
+}
+
+.vxe-table--fixed-left-wrapper.sx--hidden > .vxe-table--body-wrapper > .vxe-table--body-inner-wrapper,
+.vxe-table--fixed-right-wrapper.sx--hidden > .vxe-table--body-wrapper > .vxe-table--body-inner-wrapper {
+  overflow-x: hidden;
+}
+.vxe-table--fixed-left-wrapper.sy--hidden > .vxe-table--body-wrapper > .vxe-table--body-inner-wrapper,
+.vxe-table--fixed-right-wrapper.sy--hidden > .vxe-table--body-wrapper > .vxe-table--body-inner-wrapper {
+  overflow-y: hidden;
+}
+
 .vxe-loading--custom-wrapper {
   display: none;
   position: absolute;
@@ -3496,11 +3518,16 @@
   display: none;
   visibility: hidden;
 }
-.vxe-table--render-default .vxe-table--empty-placeholder {
+.vxe-table--render-default .vxe-table--empty-place-wrapper {
   display: none;
   position: absolute;
+  width: 100%;
   top: 0;
   z-index: 5;
+  overflow: hidden;
+}
+.vxe-table--render-default .vxe-table--empty-placeholder {
+  display: flex;
 }
 .vxe-table--render-default .vxe-table--empty-content {
   display: block;
@@ -3508,7 +3535,7 @@
   pointer-events: auto;
 }
 .vxe-table--render-default.is--empty .vxe-table--empty-block,
-.vxe-table--render-default.is--empty .vxe-table--empty-placeholder {
+.vxe-table--render-default.is--empty .vxe-table--empty-place-wrapper {
   display: flex;
 }
 .vxe-table--render-default .vxe-body--column.col--selected {