vxe-table 4.17.0 → 4.17.2

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

@@ -2,13 +2,12 @@ import { nextTick } from 'vue';
 import { VxeUI } from '../../../ui';
 import XEUtils from 'xe-utils';
 import { getColumnList } from '../../src/util';
-const tableCustomMethodKeys = ['openCustom', 'closeCustom', 'toggleCustom', 'saveCustom', 'cancelCustom', 'resetCustom', 'toggleCustomAllCheckbox', 'setCustomAllCheckbox'];
+const tableCustomMethodKeys = ['openCustom', 'closeCustom', 'getCustomVisible', 'toggleCustom', 'saveCustom', 'cancelCustom', 'resetCustom', 'toggleCustomAllCheckbox', 'setCustomAllCheckbox'];
 VxeUI.hooks.add('tableCustomModule', {
     setupTable($xeTable) {
         const { reactData, internalData } = $xeTable;
         const { computeCustomOpts, computeRowGroupFields } = $xeTable.getComputeMaps();
         const { refElem } = $xeTable.getRefMaps();
-        const $xeGrid = $xeTable.xeGrid;
         const $xeGantt = $xeTable.xeGantt;
         const calcMaxHeight = () => {
             const { customStore } = reactData;
@@ -279,8 +278,7 @@ VxeUI.hooks.add('tableCustomModule', {
             customStore.isIndeterminate = !customStore.isAll && collectColumn.some((column) => (!checkMethod || checkMethod({ $table: $xeTable, column })) && (column.renderVisible || column.halfVisible));
         };
         const emitCustomEvent = (type, evnt) => {
-            const comp = $xeGrid || $xeGantt || $xeTable;
-            comp.dispatchEvent('custom', { type }, evnt);
+            $xeTable.dispatchEvent('custom', { type }, evnt);
         };
         const customPrivateMethods = {
             checkCustomStatus,

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

@@ -73,6 +73,7 @@ export default defineVxeComponent({
             $xeTable.saveCustom();
             $xeTable.closeCustom();
             $xeTable.emitCustomEvent('confirm', $event);
+            $xeTable.emitCustomEvent('close', $event);
         };
         const cancelCloseEvent = ({ $event }) => {
             $xeTable.closeCustom();
@@ -82,11 +83,13 @@ export default defineVxeComponent({
             $xeTable.cancelCustom();
             $xeTable.closeCustom();
             $xeTable.emitCustomEvent('cancel', $event);
+            $xeTable.emitCustomEvent('close', $event);
         };
         const handleResetCustomEvent = (evnt) => {
             $xeTable.resetCustom(true);
             $xeTable.closeCustom();
             $xeTable.emitCustomEvent('reset', evnt);
+            $xeTable.emitCustomEvent('close', evnt);
         };
         const resetCustomEvent = ({ $event }) => {
             if (VxeUI.modal) {

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

@@ -10,6 +10,9 @@ hooks.add('tableMenuModule', {
         const { xID, props, reactData, internalData } = $xeTable;
         const { refElem, refTableFilter, refTableMenu } = $xeTable.getRefMaps();
         const { computeMouseOpts, computeIsContentMenu, computeMenuOpts } = $xeTable.getComputeMaps();
+        const $xeGrid = $xeTable.xeGrid;
+        const $xeGantt = $xeTable.xeGantt;
+        const $xeGGWrapper = $xeGrid || $xeGantt;
         let menuMethods = {};
         let menuPrivateMethods = {};
         /**
@@ -32,7 +35,10 @@ hooks.add('tableMenuModule', {
                         if (!visibleMethod || visibleMethod(params)) {
                             evnt.preventDefault();
                             $xeTable.updateZindex();
-                            const el = refElem.value;
+                            const el = $xeGGWrapper ? $xeGGWrapper.getRefMaps().refElem.value : refElem.value;
+                            if (!el) {
+                                return;
+                            }
                             const tableRect = el.getBoundingClientRect();
                             const { scrollTop, scrollLeft, visibleHeight, visibleWidth } = getDomNode();
                             let top = evnt.clientY - tableRect.y;

package/es/table/src/cell.js

@@ -382,11 +382,9 @@ export const Cell = {
         const tableReactData = $table.reactData;
         const tableInternalData = $table.internalData;
         const { isRowGroupStatus } = tableReactData;
-        const { computeEditOpts } = $table.getComputeMaps();
         const { editConfig } = tableProps;
-        const editOpts = computeEditOpts.value;
-        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 = '';
@@ -448,7 +446,8 @@ export const Cell = {
             if (defaultSlot) {
                 return renderCellBaseVNs(params, $table.callSlot(defaultSlot, params));
             }
-            if (renderOpts) {
+            // formatter > (renderTableCell | renderTableDefault)
+            if (renderOpts && !formatter) {
                 const compConf = renderer.get(renderOpts.name);
                 if (compConf) {
                     const rtCell = compConf.renderTableCell || compConf.renderCell;

package/es/table/src/table.js

@@ -1469,7 +1469,7 @@ export default defineVxeComponent({
             });
         };
         const calcTableHeight = (key) => {
-            const { editConfig } = props;
+            const { editConfig, editRules } = props;
             const { parentHeight } = reactData;
             let val = props[key];
             if (key === 'minHeight') {
@@ -1477,7 +1477,7 @@ export default defineVxeComponent({
                 if (XEUtils.eqNull(val)) {
                     if (eqEmptyValue(defMinHeight)) {
                         // 编辑模式默认最小高度
-                        if (isEnableConf(editConfig)) {
+                        if (editRules && isEnableConf(editConfig)) {
                             val = 144;
                         }
                     }
@@ -2328,7 +2328,7 @@ export default defineVxeComponent({
             const { visibleColumn, tableHeight, elemStore, customHeight, customMinHeight, customMaxHeight, tHeaderHeight, tFooterHeight } = internalData;
             const $xeGanttView = internalData.xeGanttView;
             const el = refElem.value;
-            if (!el || !el.clientHeight) {
+            if (!el || (internalData.tBodyHeight && !el.clientHeight)) {
                 return;
             }
             const containerList = ['main', 'left', 'right'];
@@ -6854,14 +6854,40 @@ export default defineVxeComponent({
              * 获取表格的滚动状态
              */
             getScroll() {
-                const { scrollXLoad, scrollYLoad } = reactData;
+                return $xeTable.getScrollData();
+            },
+            /**
+             * 获取表格的滚动数据
+             */
+            getScrollData() {
+                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
                 };
             },
             /**
@@ -6981,6 +7007,8 @@ export default defineVxeComponent({
                 scrollYStore.endIndex = scrollYStore.visibleSize;
                 scrollYStore.visibleEndIndex = scrollYStore.visibleSize;
                 return nextTick().then(() => {
+                    internalData.lastScrollLeft = 0;
+                    internalData.lastScrollTop = 0;
                     internalData.intoRunScroll = false;
                 });
             },
@@ -7357,11 +7385,12 @@ export default defineVxeComponent({
                 }
                 else {
                     if (!getEventTargetNode(evnt, document.body, 'vxe-table--ignore-clear').flag) {
-                        tablePrivateMethods.preventEvent(evnt, 'event.clearCustom', {}, () => {
-                            if ($xeTable.closeCustom) {
+                        if (customStore.visible && $xeTable.closeCustom) {
+                            tablePrivateMethods.preventEvent(evnt, 'event.clearCustom', {}, () => {
                                 $xeTable.closeCustom();
-                            }
-                        });
+                                $xeTable.dispatchEvent('custom', { type: 'close' }, evnt);
+                            });
+                        }
                     }
                 }
             }
@@ -8202,7 +8231,7 @@ export default defineVxeComponent({
                 const el = refElem.value;
                 if (el) {
                     const parentElem = el.parentNode;
-                    const parentPaddingSize = height === '100%' || height === 'auto' ? getPaddingTopBottomSize(parentElem) : 0;
+                    let parentPaddingSize = 0;
                     let parentWrapperHeight = 0;
                     if (parentElem) {
                         if ($xeGantt && hasClass(parentElem, 'vxe-gantt--table-wrapper')) {
@@ -8213,6 +8242,7 @@ export default defineVxeComponent({
                         }
                         else {
                             parentWrapperHeight = parentElem.clientHeight;
+                            parentPaddingSize = height === '100%' || height === 'auto' ? getPaddingTopBottomSize(parentElem) : 0;
                         }
                     }
                     return Math.floor(parentWrapperHeight - parentPaddingSize);
@@ -11242,11 +11272,10 @@ export default defineVxeComponent({
                 const { scrollXLoad, scrollYLoad, expandColumn } = reactData;
                 const leftFixedWidth = computeLeftFixedWidth.value;
                 const rightFixedWidth = computeRightFixedWidth.value;
-                if (!(leftFixedWidth || rightFixedWidth || expandColumn)) {
-                    return;
-                }
                 const { elemStore, lastScrollTop, lastScrollLeft } = internalData;
                 const rowOpts = computeRowOpts.value;
+                const scrollbarXOpts = computeScrollbarXOpts.value;
+                const scrollbarYOpts = computeScrollbarYOpts.value;
                 const xHandleEl = refScrollXHandleElem.value;
                 const yHandleEl = refScrollYHandleElem.value;
                 const leftScrollElem = getRefElem(elemStore['left-body-scroll']);
@@ -11255,12 +11284,6 @@ export default defineVxeComponent({
                 const footerScrollElem = getRefElem(elemStore['main-footer-scroll']);
                 const rightScrollElem = getRefElem(elemStore['right-body-scroll']);
                 const rowExpandEl = refRowExpandElem.value;
-                if (!xHandleEl) {
-                    return;
-                }
-                if (!yHandleEl) {
-                    return;
-                }
                 if (!bodyScrollElem) {
                     return;
                 }
@@ -11273,13 +11296,28 @@ export default defineVxeComponent({
                 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();
                 }
@@ -11796,7 +11834,7 @@ export default defineVxeComponent({
             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
                     }]
@@ -12103,7 +12141,7 @@ export default defineVxeComponent({
                     }]
             }, [
                 h('div', {
-                    class: 'vxe-table--main-wrapper'
+                    class: ['vxe-table--main-wrapper', `sx--${scrollbarXOpts.visible}`, `sy--${scrollbarYOpts.visible}`]
                 }, [
                     /**
                      * 表头
@@ -12269,11 +12307,15 @@ export default defineVxeComponent({
                 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())
+                        class: 'vxe-table--empty-placeholder'
+                    }, [
+                        h('div', {
+                            class: 'vxe-table--empty-content'
+                        }, renderEmptyBody())
+                    ])
                 ]),
                 /**
                  * 边框线
@@ -12580,6 +12622,18 @@ export default defineVxeComponent({
         watch(() => VxeUI.getLanguage(), () => {
             reLayoutFlag.value++;
         });
+        watch(() => {
+            const scrollbarXOpts = computeScrollbarXOpts.value;
+            return scrollbarXOpts.visible;
+        }, () => {
+            reLayoutFlag.value++;
+        });
+        watch(() => {
+            const scrollbarYOpts = computeScrollbarYOpts.value;
+            return scrollbarYOpts.visible;
+        }, () => {
+            reLayoutFlag.value++;
+        });
         watch(reLayoutFlag, () => {
             $xeTable.recalculate(true);
         });

package/es/table/src/util.js

@@ -627,28 +627,31 @@ export function calcTreeLine(params, prevRow) {
 export function clearTableDefaultStatus($xeTable) {
     const { props, internalData } = $xeTable;
     internalData.initStatus = false;
-    $xeTable.clearSort();
-    $xeTable.clearCurrentRow();
-    $xeTable.clearCurrentColumn();
-    $xeTable.clearRadioRow();
-    $xeTable.clearRadioReserve();
-    $xeTable.clearCheckboxRow();
-    $xeTable.clearCheckboxReserve();
-    $xeTable.clearRowExpand();
-    $xeTable.clearTreeExpand();
-    $xeTable.clearTreeExpandReserve();
-    $xeTable.clearPendingRow();
+    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) {
-        $xeTable.clearFilter();
+        actionList.push($xeTable.clearFilter());
     }
     if ($xeTable.clearSelected && (props.keyboardConfig || props.mouseConfig)) {
-        $xeTable.clearSelected();
+        actionList.push($xeTable.clearSelected());
     }
     if ($xeTable.clearCellAreas && props.mouseConfig) {
-        $xeTable.clearCellAreas();
-        $xeTable.clearCopyCellArea();
+        actionList.push($xeTable.clearCellAreas(), $xeTable.clearCopyCellArea());
     }
-    return $xeTable.clearScroll();
+    return Promise.all(actionList).then(() => {
+        return $xeTable.clearScroll();
+    });
 }
 export function clearTableAllStatus($xeTable) {
     if ($xeTable.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 {