vxe-table 3.9.0-rc.8 → 3.9.0

package/es/table/src/table.js

@@ -119,6 +119,9 @@ export default {
         };
     },
     inject: {
+        $xeTabs: {
+            default: null
+        },
         $xeGrid: {
             default: null
         },
@@ -345,8 +348,7 @@ export default {
             _isLoading: false
         };
     },
-    computed: {
-        tableId() {
+    computed: Object.assign(Object.assign({}, {}), { tableId() {
             const { id } = this;
             if (id) {
                 if (XEUtils.isFunction(id)) {
@@ -357,13 +359,22 @@ export default {
             return '';
         },
         validOpts() {
-            return Object.assign({ message: 'default' }, getConfig().table.validConfig, this.validConfig);
+            return this.computeValidOpts;
+        },
+        computeValidOpts() {
+            return Object.assign({ message: 'default' }, XEUtils.clone(getConfig().table.validConfig, true), this.validConfig);
         },
         sXOpts() {
-            return Object.assign({}, getConfig().table.scrollX, this.scrollX);
+            return this.computeSXOpts;
+        },
+        computeSXOpts() {
+            return Object.assign({}, XEUtils.clone(getConfig().table.scrollX, true), this.scrollX);
         },
         sYOpts() {
-            return Object.assign({}, getConfig().table.scrollY, this.scrollY);
+            return this.computeSYOpts;
+        },
+        computeSYOpts() {
+            return Object.assign({}, XEUtils.clone(getConfig().table.scrollY, true), this.scrollY);
         },
         rowHeightMaps() {
             return {
@@ -374,28 +385,52 @@ export default {
             };
         },
         columnOpts() {
-            return Object.assign({}, getConfig().table.columnConfig, this.columnConfig);
+            return this.computeColumnOpts;
+        },
+        computeColumnOpts() {
+            return Object.assign({}, XEUtils.clone(getConfig().table.columnConfig, true), this.columnConfig);
         },
         rowOpts() {
-            return Object.assign({}, getConfig().table.rowConfig, this.rowConfig);
+            return this.computeRowOpts;
+        },
+        computeRowOpts() {
+            return Object.assign({}, XEUtils.clone(getConfig().table.rowConfig, true), this.rowConfig);
         },
         resizeOpts() {
-            return Object.assign({}, getConfig().table.resizeConfig, this.resizeConfig);
+            return this.computeResizeOpts;
+        },
+        computeResizeOpts() {
+            return Object.assign({}, XEUtils.clone(getConfig().table.resizeConfig, true), this.resizeConfig);
         },
         resizableOpts() {
-            return Object.assign({}, getConfig().table.resizableConfig, this.resizableConfig);
+            return this.computeResizableOpts;
+        },
+        computeResizableOpts() {
+            return Object.assign({}, XEUtils.clone(getConfig().table.resizableConfig, true), this.resizableConfig);
         },
         seqOpts() {
-            return Object.assign({ startIndex: 0 }, getConfig().table.seqConfig, this.seqConfig);
+            return this.computeSeqOpts;
+        },
+        computeSeqOpts() {
+            return Object.assign({ startIndex: 0 }, XEUtils.clone(getConfig().table.seqConfig, true), this.seqConfig);
         },
         radioOpts() {
-            return Object.assign({}, getConfig().table.radioConfig, this.radioConfig);
+            return this.computeRadioOpts;
+        },
+        computeRadioOpts() {
+            return Object.assign({}, XEUtils.clone(getConfig().table.radioConfig, true), this.radioConfig);
         },
         checkboxOpts() {
-            return Object.assign({}, getConfig().table.checkboxConfig, this.checkboxConfig);
+            return this.computeCheckboxOpts;
+        },
+        computeCheckboxOpts() {
+            return Object.assign({}, XEUtils.clone(getConfig().table.checkboxConfig, true), this.checkboxConfig);
         },
         tooltipOpts() {
-            return Object.assign({}, getConfig().tooltip, getConfig().table.tooltipConfig, this.tooltipConfig);
+            return this.computeTooltipOpts;
+        },
+        computeTooltipOpts() {
+            return Object.assign({}, XEUtils.clone(getConfig().tooltip, true), XEUtils.clone(getConfig().table.tooltipConfig, true), this.tooltipConfig);
         },
         tipConfig() {
             return Object.assign({}, this.tooltipOpts);
@@ -404,32 +439,52 @@ export default {
             return Object.assign({ isArrow: false }, this.tooltipOpts);
         },
         editOpts() {
-            return Object.assign({}, getConfig().table.editConfig, this.editConfig);
+            return this.computeEditOpts;
+        },
+        computeEditOpts() {
+            return Object.assign({}, XEUtils.clone(getConfig().table.editConfig, true), this.editConfig);
         },
         sortOpts() {
-            return Object.assign({ orders: ['asc', 'desc', null] }, getConfig().table.sortConfig, this.sortConfig);
+            return this.computeSortOpts;
+        },
+        computeSortOpts() {
+            return Object.assign({ orders: ['asc', 'desc', null] }, XEUtils.clone(getConfig().table.sortConfig, true), this.sortConfig);
         },
         filterOpts() {
-            return Object.assign({}, getConfig().table.filterConfig, this.filterConfig);
+            return this.computeFilterOpts;
+        },
+        computeFilterOpts() {
+            return Object.assign({}, XEUtils.clone(getConfig().table.filterConfig, true), this.filterConfig);
         },
         mouseOpts() {
-            return Object.assign({}, getConfig().table.mouseConfig, this.mouseConfig);
+            return this.computeMouseOpts;
+        },
+        computeMouseOpts() {
+            return Object.assign({}, XEUtils.clone(getConfig().table.mouseConfig, true), this.mouseConfig);
         },
         areaOpts() {
-            return Object.assign({}, getConfig().table.areaConfig, this.areaConfig);
+            return this.computeAreaOpts;
+        },
+        computeAreaOpts() {
+            return Object.assign({}, XEUtils.clone(getConfig().table.areaConfig, true), this.areaConfig);
         },
         keyboardOpts() {
-            return Object.assign({}, getConfig().table.keyboardConfig, this.keyboardConfig);
+            return this.computeKeyboardOpts;
+        },
+        computeKeyboardOpts() {
+            return Object.assign({}, XEUtils.clone(getConfig().table.keyboardConfig, true), this.keyboardConfig);
         },
         clipOpts() {
-            return Object.assign({}, getConfig().table.clipConfig, this.clipConfig);
+            return this.computeClipOpts;
+        },
+        computeClipOpts() {
+            return Object.assign({}, XEUtils.clone(getConfig().table.clipConfig, true), this.clipConfig);
         },
         fnrOpts() {
-            return Object.assign({}, getConfig().table.fnrConfig, this.fnrConfig);
+            return this.computeFNROpts;
         },
-        hasTip() {
-            return true;
-            // return VXETable._tooltip
+        computeFNROpts() {
+            return Object.assign({}, XEUtils.clone(getConfig().table.fnrConfig, true), this.fnrConfig);
         },
         headerCtxMenu() {
             const headerOpts = this.ctxMenuOpts.header;
@@ -446,9 +501,6 @@ export default {
         isCtxMenu() {
             return !!((this.contextMenu || this.menuConfig) && isEnableConf(this.ctxMenuOpts) && (this.headerCtxMenu.length || this.bodyCtxMenu.length || this.footerCtxMenu.length));
         },
-        ctxMenuOpts() {
-            return Object.assign({}, getConfig().table.menuConfig, this.contextMenu, this.menuConfig);
-        },
         ctxMenuList() {
             const rest = [];
             this.ctxMenuStore.list.forEach((list) => {
@@ -458,36 +510,63 @@ export default {
             });
             return rest;
         },
+        ctxMenuOpts() {
+            return this.computeMenuOpts;
+        },
+        computeMenuOpts() {
+            return Object.assign({}, XEUtils.clone(getConfig().table.menuConfig, true), this.contextMenu, this.menuConfig);
+        },
         exportOpts() {
-            return Object.assign({}, getConfig().table.exportConfig, this.exportConfig);
+            return this.computeExportOpts;
+        },
+        computeExportOpts() {
+            return Object.assign({}, XEUtils.clone(getConfig().table.exportConfig, true), this.exportConfig);
         },
         importOpts() {
-            return Object.assign({}, getConfig().table.importConfig, this.importConfig);
+            return this.computeImportOpts;
+        },
+        computeImportOpts() {
+            return Object.assign({}, XEUtils.clone(getConfig().table.importConfig, true), this.importConfig);
         },
         printOpts() {
-            return Object.assign({}, getConfig().table.printConfig, this.printConfig);
+            return this.computePrintOpts;
+        },
+        computePrintOpts() {
+            return Object.assign({}, XEUtils.clone(getConfig().table.printConfig, true), this.printConfig);
         },
         expandOpts() {
-            return Object.assign({}, getConfig().table.expandConfig, this.expandConfig);
+            return this.computeExpandOpts;
+        },
+        computeExpandOpts() {
+            return Object.assign({}, XEUtils.clone(getConfig().table.expandConfig, true), this.expandConfig);
         },
         treeOpts() {
-            return Object.assign({}, getConfig().table.treeConfig, this.treeConfig);
+            return this.computeTreeOpts;
+        },
+        computeTreeOpts() {
+            return Object.assign({}, XEUtils.clone(getConfig().table.treeConfig, true), this.treeConfig);
         },
         emptyOpts() {
-            return Object.assign({}, getConfig().table.emptyRender, this.emptyRender);
+            return this.computeEmptyOpts;
+        },
+        computeEmptyOpts() {
+            return Object.assign({}, XEUtils.clone(getConfig().table.emptyRender, true), this.emptyRender);
         },
         loadingOpts() {
-            return Object.assign({}, getConfig().table.loadingConfig, this.loadingConfig);
+            return this.computeLoadingOpts;
+        },
+        computeLoadingOpts() {
+            return Object.assign({}, XEUtils.clone(getConfig().table.loadingConfig, true), this.loadingConfig);
         },
         cellOffsetWidth() {
             return this.border ? Math.max(2, Math.ceil(this.scrollbarWidth / this.tableColumn.length)) : 1;
         },
-        computeCustomOpts() {
-            return Object.assign({}, getConfig().table.customConfig, this.customConfig);
-        },
         customOpts() {
             return this.computeCustomOpts;
         },
+        computeCustomOpts() {
+            return Object.assign({}, XEUtils.clone(getConfig().table.customConfig, true), this.customConfig);
+        },
         autoWidthColumnList() {
             const { tableColumn, visibleColumn } = this;
             return tableColumn.length || visibleColumn.length ? visibleColumn.filter((column) => column.width === 'auto' || column.minWidth === 'auto') : [];
@@ -539,8 +618,12 @@ export default {
                 return true;
             }
             return false;
-        }
-    },
+        },
+        tabsResizeFlag() {
+            const $xeTable = this;
+            const $xeTabs = $xeTable.$xeTabs;
+            return $xeTabs ? $xeTabs.reactData.resizeFlag : null;
+        } }),
     watch: {
         data(value) {
             const { inited, initStatus } = this;
@@ -600,6 +683,9 @@ export default {
                 });
             }
         },
+        tabsResizeFlag() {
+            this.handleGlobalResizeEvent();
+        },
         mergeCells(value) {
             this.clearMergeCells();
             this.$nextTick(() => this.setMergeCells(value));
@@ -658,7 +744,7 @@ export default {
             fullColumnIdData: {},
             fullColumnFieldData: {}
         });
-        if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+        if (process.env.NODE_ENV === 'development') {
             if (this.rowId) {
                 warnLog('vxe.error.delProp', ['row-id', 'row-config.keyField']);
             }
@@ -707,7 +793,7 @@ export default {
                 warnLog('vxe.error.errProp', [`export-config.types=${exportOpts.types.join(',')}`, exportOpts.types.filter((type) => XEUtils.includes(XEUtils.keys(exportOpts._typeMaps), type)).join(',') || XEUtils.keys(exportOpts._typeMaps).join(',')]);
             }
         }
-        if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+        if (process.env.NODE_ENV === 'development') {
             const customOpts = this.customOpts;
             if (!this.id && this.customConfig && (customOpts.storage === true || (customOpts.storage && customOpts.storage.resizable) || (customOpts.storage && customOpts.storage.visible))) {
                 errLog('vxe.error.reqProp', ['id']);
@@ -747,7 +833,7 @@ export default {
             }
         }
         // v4 中只支持对象类型
-        if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+        if (process.env.NODE_ENV === 'development') {
             // 在 v3.0 中废弃 context-menu
             if (this.contextMenu) {
                 warnLog('vxe.error.delProp', ['context-menu', 'menu-config']);
@@ -790,7 +876,7 @@ export default {
             }
         }
         // 检查是否有安装需要的模块
-        if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+        if (process.env.NODE_ENV === 'development') {
             if (this.editConfig && !this._insert) {
                 errLog('vxe.error.reqModule', ['Edit']);
             }
@@ -836,7 +922,9 @@ export default {
         this.preventEvent(null, 'created');
     },
     mounted() {
-        if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+        const $xeTable = this;
+        const props = $xeTable;
+        if (process.env.NODE_ENV === 'development') {
             const { $listeners } = this;
             if (!this.menuConfig && ($listeners['menu-click'] || $listeners['cell-menu'] || $listeners['header-cell-menu'] || $listeners['footer-cell-menu'])) {
                 warnLog('vxe.error.reqProp', ['menu-config']);
@@ -845,12 +933,32 @@ export default {
                 warnLog('vxe.error.reqProp', ['tooltip-config']);
             }
         }
+        if (process.env.NODE_ENV === 'development') {
+            // 使用已安装的组件，如果未安装则不渲染
+            const VxeUILoadingComponent = VxeUI.getComponent('VxeLoading');
+            const VxeUITooltipComponent = VxeUI.getComponent('VxeTooltip');
+            $xeTable.$nextTick(() => {
+                if (props.loading) {
+                    if (!VxeUILoadingComponent) {
+                        errLog('vxe.error.reqComp', ['vxe-loading']);
+                    }
+                }
+                if ((props.showOverflow === true || props.showOverflow === 'tooltip') ||
+                    (props.showHeaderOverflow === true || props.showHeaderOverflow === 'tooltip') ||
+                    (props.showFooterOverflow === true || props.showFooterOverflow === 'tooltip') ||
+                    props.tooltipConfig || props.editRules) {
+                    if (!VxeUITooltipComponent) {
+                        errLog('vxe.error.reqComp', ['vxe-tooltip']);
+                    }
+                }
+            });
+        }
         if (this.autoResize) {
             const handleWrapperResize = this.resizeOpts.refreshDelay ? XEUtils.throttle(() => this.recalculate(true), this.resizeOpts.refreshDelay, { leading: true, trailing: true }) : null;
             const resizeObserver = globalResize.create(handleWrapperResize
                 ? () => {
                     if (this.autoResize) {
-                        requestAnimationFrame(handleWrapperResize);
+                        handleWrapperResize();
                     }
                 }
                 : () => {
@@ -892,9 +1000,13 @@ export default {
         this.preventEvent(null, 'destroyed');
     },
     render(h) {
-        const { _e, $scopedSlots, tId, isCalcColumn, tableData, tableColumn, tableGroupColumn, isGroup, loading, stripe, showHeader, height, tableBorder, treeOpts, treeConfig, mouseConfig, mouseOpts, vSize, validOpts, showFooter, overflowX, overflowY, scrollXLoad, scrollYLoad, scrollbarHeight, highlightCell, highlightHoverRow, highlightHoverColumn, editConfig, validTipOpts, initStore, columnStore, filterStore, customStore, ctxMenuStore, ctxMenuOpts, footerTableData, hasTip, columnOpts, rowOpts, checkboxOpts, loadingOpts, editRules } = this;
+        // 使用已安装的组件，如果未安装则不渲染
+        const VxeUILoadingComponent = VxeUI.getComponent('VxeLoading');
+        const VxeUITooltipComponent = VxeUI.getComponent('VxeTooltip');
+        const { _e, $scopedSlots, tId, isCalcColumn, tableData, tableColumn, tableGroupColumn, isGroup, loading, stripe, showHeader, height, tableBorder, treeOpts, treeConfig, mouseConfig, mouseOpts, computeSize, validOpts, showFooter, overflowX, overflowY, scrollXLoad, scrollYLoad, scrollbarHeight, highlightCell, highlightHoverRow, highlightHoverColumn, editConfig, validTipOpts, initStore, columnStore, filterStore, customStore, ctxMenuStore, ctxMenuOpts, footerTableData, columnOpts, rowOpts, checkboxOpts, loadingOpts, editRules } = this;
         const { leftList, rightList } = columnStore;
         const currLoading = this._isLoading || loading;
+        const vSize = computeSize;
         return h('div', {
             class: ['vxe-table', 'vxe-table--render-default', `tid_${tId}`, vSize ? `size--${vSize}` : '', `border--${tableBorder}`, {
                     [`valid-msg--${validOpts.msgMode}`]: !!editRules,
@@ -914,6 +1026,7 @@ export default {
                     'is--fixed-left': leftList.length,
                     'is--fixed-right': rightList.length,
                     'is--animat': !!this.animat,
+                    'is--padding': this.padding,
                     'is--round': this.round,
                     'is--stripe': !treeConfig && stripe,
                     'is--loading': currLoading,
@@ -1027,14 +1140,16 @@ export default {
             /**
              * 加载中
              */
-            h('vxe-loading', {
-                class: 'vxe-table--loading',
-                props: {
-                    value: currLoading,
-                    icon: loadingOpts.icon,
-                    text: loadingOpts.text
-                }
-            }, this.callSlot($scopedSlots.loading, {}, h)),
+            VxeUILoadingComponent
+                ? h(VxeUILoadingComponent, {
+                    class: 'vxe-table--loading',
+                    props: {
+                        value: currLoading,
+                        icon: loadingOpts.icon,
+                        text: loadingOpts.text
+                    }
+                }, this.callSlot($scopedSlots.loading, {}, h))
+                : _e(),
             /**
              * 自定义列
              */
@@ -1095,8 +1210,8 @@ export default {
                 /**
                  * 通用提示
                  */
-                hasTip
-                    ? h('vxe-tooltip', {
+                VxeUITooltipComponent
+                    ? h(VxeUITooltipComponent, {
                         ref: 'commTip',
                         props: {
                             isArrow: false,
@@ -1107,8 +1222,8 @@ export default {
                 /**
                  * 工具提示
                  */
-                hasTip
-                    ? h('vxe-tooltip', {
+                VxeUITooltipComponent
+                    ? h(VxeUITooltipComponent, {
                         ref: 'tooltip',
                         props: Object.assign({}, this.tipConfig, this.tooltipStore.currOpts)
                     })
@@ -1116,8 +1231,8 @@ export default {
                 /**
                  * 校验提示
                  */
-                hasTip && this.editRules && validOpts.showMessage && (validOpts.message === 'default' ? !height : validOpts.message === 'tooltip')
-                    ? h('vxe-tooltip', {
+                VxeUITooltipComponent && this.editRules && validOpts.showMessage && (validOpts.message === 'default' ? !height : validOpts.message === 'tooltip')
+                    ? h(VxeUITooltipComponent, {
                         ref: 'validTip',
                         class: [{
                                 'old-cell-valid': editRules && getConfig().cellVaildMode === 'obsolete'

package/es/table/src/util.js

@@ -135,7 +135,7 @@ export function assembleColumn(_vm) {
     const groupConfig = $xecolumn ? $xecolumn.columnConfig : null;
     columnConfig.slots = _vm.$scopedSlots;
     if (groupConfig) {
-        if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+        if (process.env.NODE_ENV === 'development') {
             if ($xecolumn.$options._componentTag === 'vxe-table-column') {
                 errLog('vxe.error.groupTag', [`<vxe-table-colgroup title=${$xecolumn.title} ...>`, `<vxe-table-column title=${$xecolumn.title} ...>`]);
             }
@@ -251,7 +251,8 @@ function countTreeExpand(prevRow, params) {
     return count;
 }
 export function getOffsetSize($xetable) {
-    return lineOffsetSizes[$xetable.vSize] || 0;
+    const vSize = $xetable.computeSize;
+    return lineOffsetSizes[vSize] || 0;
 }
 export function calcTreeLine(params, items, rIndex) {
     const { $table } = params;