vxe-table 4.23.0-beta.0 → 4.23.0-beta.1

package/es/table/src/props.js

@@ -299,6 +299,10 @@ export const tableProps = {
     virtualXConfig: Object,
     // 纵向虚拟滚动配置项
     virtualYConfig: Object,
+    useScrollbar: {
+        type: Boolean,
+        default: () => getConfig().table.useScrollbar
+    },
     // 滚动条配置项
     scrollbarConfig: Object,
     // 撤销/恢复历史配置项

package/es/table/src/table.js

@@ -2,7 +2,7 @@ import { h, reactive, ref, provide, inject, nextTick, Teleport, onActivated, onD
 import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
 import { initTpImg, getTpImg, isPx, isScale, hasClass, addClass, removeClass, wheelScrollTopTo, wheelScrollLeftTo, getEventTargetNode, getPaddingTopBottomSize, setScrollTop, setScrollLeft, toCssUnit, hasControlKey, checkTargetElement, hasAxternalInputTarget } from '../../ui/src/dom';
-import { getLastZIndex, nextZIndex, hasChildrenList, getFuncText, isEnableConf, formatText, eqEmptyValue, hasEnableConf } from '../../ui/src/utils';
+import { getLastZIndex, nextZIndex, hasChildrenList, getFuncText, isEnableConf, formatText, eqEmptyValue, hasEnableConf, getDefaultConfig } from '../../ui/src/utils';
 import { VxeUI } from '../../ui';
 import { createReactData, createInternalData, getRowUniqueId, createRowId, clearTableAllStatus, getColumnList, toFilters, hasDeepKey, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleRowidOrRow, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, getRootColumn, getRefElem, getColReMinWidth, getColReMaxWidth, createHandleUpdateRowId, createHandleGetRowId, getCalcHeight, getCellRestHeight, getLastChildColumn, getRowMaxHeight, handleCustomStoreConfig, encodeRowid } from './util';
 import { getSlotVNs } from '../../ui/src/vn';
@@ -44,6 +44,7 @@ export default defineVxeComponent({
         const { slots, emit } = context;
         const xID = XEUtils.uniqueId();
         const browseObj = XEUtils.browse();
+        const scrollDefaultConf = Object.assign({}, getConfig().scrollbar);
         // 使用已安装的组件，如果未安装则不渲染
         const VxeUILoadingComponent = VxeUI.getComponent('VxeLoading');
         const VxeUITooltipComponent = VxeUI.getComponent('VxeTooltip');
@@ -186,14 +187,12 @@ export default defineVxeComponent({
             return Object.assign({}, getConfig().table.scrollbarConfig, props.scrollbarConfig);
         });
         const computeScrollbarXOpts = computed(() => {
-            var _a;
             const scrollbarOpts = computeScrollbarOpts.value;
-            return Object.assign({}, scrollbarOpts.x, ((_a = props.scrollbarConfig) === null || _a === void 0 ? void 0 : _a.x) || {});
+            return scrollbarOpts.x ? Object.assign({}, scrollbarOpts.x, scrollbarOpts.xConfig) : (scrollbarOpts.xConfig || {});
         });
         const computeScrollbarYOpts = computed(() => {
-            var _a;
             const scrollbarOpts = computeScrollbarOpts.value;
-            return Object.assign({}, scrollbarOpts.y, ((_a = props.scrollbarConfig) === null || _a === void 0 ? void 0 : _a.y) || {});
+            return scrollbarOpts.y ? Object.assign({}, scrollbarOpts.y, scrollbarOpts.yConfig) : (scrollbarOpts.yConfig || {});
         });
         const computeScrollbarXToTop = computed(() => {
             const scrollbarXOpts = computeScrollbarXOpts.value;
@@ -540,15 +539,18 @@ export default defineVxeComponent({
         });
         const computeTableStyle = computed(() => {
             const scrollbarOpts = computeScrollbarOpts.value;
-            const { width, height } = scrollbarOpts;
-            const tStys = {};
-            if (width) {
-                tStys['--vxe-ui-table-view-scrollbar-width'] = toCssUnit(width);
-            }
-            if (height) {
-                tStys['--vxe-ui-table-view-scrollbar-height'] = toCssUnit(height);
+            const scrollbarXOpts = computeScrollbarXOpts.value;
+            const scrollbarYOpts = computeScrollbarYOpts.value;
+            const barWidth = getDefaultConfig(getDefaultConfig(scrollbarYOpts.width, scrollbarOpts.width), scrollDefaultConf.width);
+            const barHeight = getDefaultConfig(getDefaultConfig(scrollbarXOpts.height, scrollbarOpts.height), scrollDefaultConf.height);
+            const stys = {};
+            if (barWidth || barHeight) {
+                stys['--vxe-ui-table-view-scrollbar-width'] = toCssUnit(barWidth || barHeight);
+                stys['--vxe-ui-scrollbar-y-width'] = toCssUnit(barWidth || barHeight);
+                stys['--vxe-ui-table-view-scrollbar-height'] = toCssUnit(barHeight || barWidth);
+                stys['--vxe-ui-scrollbar-x-height'] = toCssUnit(barHeight || barWidth);
             }
-            return tStys;
+            return stys;
         });
         const computeTableRowExpandedList = computed(() => {
             const { tableData, rowExpandedFlag, expandColumn, rowGroupExpandedFlag, treeExpandedFlag } = reactData;
@@ -2461,7 +2463,6 @@ export default defineVxeComponent({
             const isHeaderRenderOptimize = computeIsHeaderRenderOptimize.value;
             const isBodyRenderOptimize = computeIsBodyRenderOptimize.value;
             const isFooterRenderOptimize = computeIsFooterRenderOptimize.value;
-            const scrollbarOpts = computeScrollbarOpts.value;
             const mouseOpts = computeMouseOpts.value;
             const bodyWrapperElem = getRefElem(elemStore['main-body-wrapper']);
             const bodyTableElem = getRefElem(elemStore['main-body-table']);
@@ -2469,24 +2470,26 @@ export default defineVxeComponent({
                 emptyPlaceholderElem.style.top = `${tHeaderHeight}px`;
                 emptyPlaceholderElem.style.height = bodyWrapperElem ? `${bodyWrapperElem.offsetHeight - osbHeight}px` : '';
             }
-            const scrollbarXConf = scrollbarOpts.x || {};
-            const scrollbarYConf = scrollbarOpts.y || {};
+            const scrollbarXOpts = computeScrollbarXOpts.value;
+            const scrollbarYOpts = computeScrollbarYOpts.value;
             const scrollbarYToLeft = computeScrollbarYToLeft.value;
             let xScrollbarVisible = overflowX ? 'visible' : 'hidden';
-            if (scrollbarXConf.visible === 'visible' || $xeGanttView) {
+            const hideXScroll = scrollbarXOpts.visible === false || scrollbarXOpts.visible === 'hidden';
+            if (!hideXScroll || $xeGanttView) {
                 osbHeight = scrollbarHeight;
                 xScrollbarVisible = 'visible';
             }
-            else if (scrollbarXConf.visible === 'hidden' || scrollbarXConf.visible === false) {
+            else if (hideXScroll) {
                 osbHeight = 0;
                 xScrollbarVisible = 'hidden';
             }
             let yScrollbarVisible = overflowY ? 'visible' : 'hidden';
-            if ((scrollbarYConf.visible === 'hidden' || scrollbarYConf.visible === false) || (($xeGantt && $xeGanttView && $xeGantt.reactData.showRightView) && !scrollbarYToLeft)) {
+            const showYScroll = !(scrollbarYOpts.visible === false || scrollbarYOpts.visible === 'hidden');
+            if (!showYScroll || (($xeGantt && $xeGanttView && $xeGantt.reactData.showRightView) && !scrollbarYToLeft)) {
                 osbWidth = 0;
                 yScrollbarVisible = 'hidden';
             }
-            else if (scrollbarYConf.visible === 'visible') {
+            else if (showYScroll) {
                 osbWidth = scrollbarWidth;
                 yScrollbarVisible = 'visible';
             }
@@ -3307,14 +3310,18 @@ export default defineVxeComponent({
             let overflowY = false;
             let overflowX = false;
             if (bodyWrapperElem) {
+                const scrollbarXOpts = computeScrollbarXOpts.value;
+                const scrollbarYOpts = computeScrollbarYOpts.value;
+                const barWidth = XEUtils.toNumber(getDefaultConfig(getDefaultConfig(scrollbarYOpts.width, scrollbarOpts.width), scrollDefaultConf.width));
+                const barHeight = XEUtils.toNumber(getDefaultConfig(getDefaultConfig(scrollbarXOpts.height, scrollbarOpts.height), scrollDefaultConf.height));
                 overflowY = scrollYHeight > bodyWrapperElem.clientHeight;
                 if (yHandleEl) {
-                    reactData.scrollbarWidth = scrollbarOpts.width || (yHandleEl.offsetWidth - yHandleEl.clientWidth) || 14;
+                    reactData.scrollbarWidth = (barWidth || barHeight) || (yHandleEl.offsetWidth - yHandleEl.clientWidth) || 14;
                 }
                 reactData.overflowY = overflowY;
                 overflowX = scrollXWidth > bodyWrapperElem.clientWidth;
                 if (xHandleEl) {
-                    reactData.scrollbarHeight = scrollbarOpts.height || (xHandleEl.offsetHeight - xHandleEl.clientHeight) || 14;
+                    reactData.scrollbarHeight = (barHeight || barWidth) || (xHandleEl.offsetHeight - xHandleEl.clientHeight) || 14;
                 }
                 const hHeight = headerTableElem ? headerTableElem.clientHeight : 0;
                 const fHeight = footerTableElem ? footerTableElem.clientHeight : 0;
@@ -12880,14 +12887,14 @@ export default defineVxeComponent({
                 const isRollY = overflowY && scrollTop !== lastScrollTop;
                 if (isRollX) {
                     // 如果禁用滚动
-                    if (scrollbarXOpts.visible === 'hidden') {
+                    if (scrollbarXOpts.visible === false || scrollbarXOpts.visible === 'hidden') {
                         evnt.preventDefault();
                         return;
                     }
                 }
                 if (isRollY) {
                     // 如果禁用滚动
-                    if (scrollbarYOpts.visible === 'hidden') {
+                    if (scrollbarYOpts.visible === false || scrollbarYOpts.visible === 'hidden') {
                         evnt.preventDefault();
                         return;
                     }
@@ -13484,10 +13491,15 @@ export default defineVxeComponent({
             const osYBehavior = XEUtils.eqNull(overscrollYBehavior) ? scrollbarOpts.overscrollBehavior : overscrollYBehavior;
             return h('div', {
                 ref: isFixedLeft ? refLeftContainer : refRightContainer,
-                class: [`vxe-table--fixed-${fixedType}-wrapper`, `sx--${scrollbarXOpts.visible}`, `sy--${scrollbarYOpts.visible}`, {
+                class: [
+                    `vxe-table--fixed-${fixedType}-wrapper`,
+                    `sx--${(scrollbarXOpts.visible === false || scrollbarXOpts.visible === 'hidden') ? 'hidden' : 'visible'}`,
+                    `sy--${(scrollbarYOpts.visible === false || scrollbarYOpts.visible === 'hidden') ? 'hidden' : 'visible'}`,
+                    {
                         [`x-ob--${osXBehavior}`]: osXBehavior,
                         [`y-ob--${osYBehavior}`]: osYBehavior
-                    }]
+                    }
+                ]
             }, [
                 showHeader
                     ? h(TableHeaderComponent, {
@@ -13796,7 +13808,11 @@ export default defineVxeComponent({
                     }]
             }, [
                 h('div', {
-                    class: ['vxe-table--main-wrapper', `sx--${scrollbarXOpts.visible}`, `sy--${scrollbarYOpts.visible}`]
+                    class: [
+                        'vxe-table--main-wrapper',
+                        `sx--${(scrollbarXOpts.visible === false || scrollbarXOpts.visible === 'hidden') ? 'hidden' : 'visible'}`,
+                        `sy--${(scrollbarYOpts.visible === false || scrollbarYOpts.visible === 'hidden') ? 'hidden' : 'visible'}`
+                    ]
                 }, [
                     /**
                      * 表头
@@ -13852,7 +13868,7 @@ export default defineVxeComponent({
                 ]);
         };
         const renderVN = () => {
-            const { loading, stripe, showHeader, height, treeConfig, mouseConfig, showFooter, highlightCell, highlightHoverRow, highlightHoverColumn, editConfig, editRules, importConfig, exportConfig, printConfig } = props;
+            const { loading, stripe, useScrollbar, showHeader, height, treeConfig, mouseConfig, showFooter, highlightCell, highlightHoverRow, highlightHoverColumn, editConfig, editRules, importConfig, exportConfig, printConfig } = props;
             const { isGroup, overflowX, overflowY, scrollXLoad, scrollYLoad, tableData, initStore, isRowGroupStatus, columnStore, filterStore, customStore, tooltipStore } = reactData;
             const { teleportToWrapperElem, popupToWrapperElem, customPopupToElem } = internalData;
             const { leftList, rightList } = columnStore;
@@ -13895,7 +13911,7 @@ export default defineVxeComponent({
             if (isCrossTableDrag && !tableData.length) {
                 tbOns.onDragover = $xeTable.handleCrossTableRowDragoverEmptyEvent;
             }
-            return h('div', Object.assign({ ref: refElem, class: ['vxe-table', 'vxe-table--render-default', `tid_${xID}`, `border--${tableBorder}`, `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`, `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`, {
+            return h('div', Object.assign({ ref: refElem, class: ['vxe-table', 'vxe-table--render-default', `tid_${xID}`, `border--${tableBorder}`, useScrollbar ? 'is--virtual-scrollbar' : 'is--native-scrollbar', `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`, `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`, {
                         [`size--${vSize}`]: vSize,
                         [`valid-msg--${validOpts.msgMode}`]: !!editRules,
                         'vxe-editable': !!editConfig,
@@ -14486,6 +14502,7 @@ export default defineVxeComponent({
             const areaOpts = computeAreaOpts.value;
             const sortOpts = computeSortOpts.value;
             const filterOpts = computeFilterOpts.value;
+            const scrollbarOpts = computeScrollbarOpts.value;
             const { groupFields } = aggregateOpts;
             if ($xeGantt) {
                 const { refClassifyWrapperElem } = $xeGantt.getRefMaps();
@@ -14717,6 +14734,12 @@ export default defineVxeComponent({
             // if (hasEnableConf(printConfig, printOpts) || hasEnableConf(importConfig, importOpts) || hasEnableConf(exportConfig, exportOpts)) && !$xeTable.exportData) {
             //   errLog('vxe.error.reqModule', ['Export'])
             // }
+            if (scrollbarOpts.x) {
+                warnLog('vxe.error.delProp', ['scrollbar-config.x', 'scrollbar-config.xConfig']);
+            }
+            if (scrollbarOpts.y) {
+                warnLog('vxe.error.delProp', ['scrollbar-config.y', 'scrollbar-config.yConfig']);
+            }
             Object.assign(scrollYStore, {
                 startIndex: 0,
                 endIndex: 0,

package/es/ui/index.js

@@ -1,6 +1,6 @@
 import { VxeUI } from '@vxe-ui/core';
 import { getFuncText } from './src/utils';
-export const version = "4.23.0-beta.0";
+export const version = "4.23.0-beta.1";
 VxeUI.version = version;
 VxeUI.tableVersion = version;
 VxeUI.setConfig({
@@ -262,16 +262,14 @@ VxeUI.setConfig({
             oSize: 0
         },
         scrollbarConfig: {
-            // width: 14,
-            // height: 14,
-            x: {
-                // position: 'bottom',
-                visible: true
-            },
-            y: {
-                // position: 'right',
-                visible: true
-            }
+        // xConfig: {
+        //   // position: 'bottom',
+        //   // visible: true
+        // },
+        // yConfig: {
+        //   // position: 'right',
+        //   // visible: true
+        // }
         },
         undoRedoHistoryConfig: {
             stackSize: 50

package/es/ui/src/log.js

@@ -1,6 +1,6 @@
 import { VxeUI } from '@vxe-ui/core';
 const { log } = VxeUI;
-const tableVersion = `table v${"4.23.0-beta.0"}`;
+const tableVersion = `table v${"4.23.0-beta.1"}`;
 export function createComponentLog(name) {
     const uiVersion = VxeUI.uiVersion ? `ui v${VxeUI.uiVersion}` : '';
     const ganttVersion = VxeUI.ganttVersion ? `gantt v${VxeUI.ganttVersion}` : '';