vxe-table 3.19.39 → 3.20.0-beta.1

package/es/table/src/methods.js

@@ -1,5 +1,5 @@
 import XEUtils from 'xe-utils';
-import { getTpImg, isPx, isScale, hasClass, addClass, removeClass, getEventTargetNode, getPaddingTopBottomSize, setScrollTop, setScrollLeft, toCssUnit, hasControlKey, checkTargetElement } from '../../ui/src/dom';
+import { getTpImg, isPx, isScale, hasClass, addClass, removeClass, scrollTopTo, getEventTargetNode, getPaddingTopBottomSize, setScrollTop, setScrollLeft, toCssUnit, hasControlKey, checkTargetElement } from '../../ui/src/dom';
 import { getLastZIndex, nextZIndex, hasChildrenList, getFuncText, isEnableConf, formatText, eqEmptyValue } from '../../ui/src/utils';
 import { VxeUI } from '../../ui';
 import Cell from './cell';
@@ -3900,28 +3900,6 @@ const wheelScrollLeftTo = (scrollLeft, cb) => {
         cb(scrollLeft);
     });
 };
-const wheelScrollTopTo = (diffNum, cb) => {
-    const duration = Math.abs(diffNum);
-    const startTime = performance.now();
-    let countTop = 0;
-    const step = (timestamp) => {
-        let progress = (timestamp - startTime) / duration;
-        if (progress < 0) {
-            progress = 0;
-        }
-        else if (progress > 1) {
-            progress = 1;
-        }
-        const easedProgress = Math.pow(progress, 2);
-        const offsetTop = Math.floor((diffNum * easedProgress)) - countTop;
-        countTop += offsetTop;
-        cb(offsetTop);
-        if (progress < 1) {
-            requestAnimationFrame(step);
-        }
-    };
-    requestAnimationFrame(step);
-};
 const syncGanttScrollTop = ($xeTable, scrollTop) => {
     const internalData = $xeTable;
     const $xeGanttView = internalData.xeGanttView;
@@ -7184,8 +7162,8 @@ const tableMethods = {
         const { actived } = editStore;
         if (isActivated && !filterStore.visible) {
             if (!(actived.row || actived.column)) {
-                if (keyboardConfig && keyboardOpts.isClip && mouseConfig && mouseOpts.area && this.handlePasteCellAreaEvent) {
-                    this.handlePasteCellAreaEvent(evnt);
+                if (keyboardConfig && keyboardOpts.isClip && mouseConfig && mouseOpts.area && $xeTable.handlePeClAreaEvent) {
+                    $xeTable.handlePeClAreaEvent(evnt);
                 }
             }
             $xeTable.dispatchEvent('paste', {}, evnt);
@@ -7197,8 +7175,8 @@ const tableMethods = {
         const { actived } = editStore;
         if (isActivated && !filterStore.visible) {
             if (!(actived.row || actived.column)) {
-                if (keyboardConfig && keyboardOpts.isClip && mouseConfig && mouseOpts.area && this.handleCopyCellAreaEvent) {
-                    this.handleCopyCellAreaEvent(evnt);
+                if (keyboardConfig && keyboardOpts.isClip && mouseConfig && mouseOpts.area && $xeTable.handleCyClAreaEvent) {
+                    $xeTable.handleCyClAreaEvent(evnt);
                 }
             }
             $xeTable.dispatchEvent('copy', {}, evnt);
@@ -7210,8 +7188,8 @@ const tableMethods = {
         const { actived } = editStore;
         if (isActivated && !filterStore.visible) {
             if (!(actived.row || actived.column)) {
-                if (keyboardConfig && keyboardOpts.isClip && mouseConfig && mouseOpts.area && this.handleCutCellAreaEvent) {
-                    this.handleCutCellAreaEvent(evnt);
+                if (keyboardConfig && keyboardOpts.isClip && mouseConfig && mouseOpts.area && $xeTable.handleCutCellAreaEvent) {
+                    $xeTable.handleCutCellAreaEvent(evnt);
                 }
             }
             $xeTable.dispatchEvent('cut', {}, evnt);
@@ -7392,12 +7370,12 @@ const tableMethods = {
         }
     },
     openTooltip(target, content) {
-        const { $refs } = this;
-        const commTip = $refs.refCommTooltip;
+        const $xeTable = this;
+        const commTip = $xeTable.$refs.refCommTooltip;
         if (commTip) {
             return commTip.open(target, content);
         }
-        return this.$nextTick();
+        return $xeTable.$nextTick();
     },
     /**
      * 关闭 tooltip
@@ -7424,23 +7402,28 @@ const tableMethods = {
         if (commTip) {
             commTip.close();
         }
-        return this.$nextTick();
+        return $xeTable.$nextTick();
     },
     /**
      * 判断列头复选框是否被选中
      */
     isAllCheckboxChecked() {
-        return this.isAllSelected;
+        const $xeTable = this;
+        const reactData = $xeTable;
+        return reactData.isAllSelected;
     },
     /**
      * 判断列头复选框是否被半选
      */
     isAllCheckboxIndeterminate() {
-        return !this.isAllSelected && this.isIndeterminate;
+        const $xeTable = this;
+        const reactData = $xeTable;
+        return !reactData.isAllSelected && reactData.isIndeterminate;
     },
     isCheckboxIndeterminate() {
+        const $xeTable = this;
         warnLog('vxe.error.delFunc', ['isCheckboxIndeterminate', 'isAllCheckboxIndeterminate']);
-        return this.isAllCheckboxIndeterminate();
+        return $xeTable.isAllCheckboxIndeterminate();
     },
     /**
      * 获取复选框半选状态的行数据
@@ -8007,8 +7990,10 @@ const tableMethods = {
         return null;
     },
     clearRadioReserve() {
-        this.radioReserveRow = null;
-        return this.$nextTick();
+        const $xeTable = this;
+        const internalData = $xeTable;
+        internalData.radioReserveRow = null;
+        return $xeTable.$nextTick();
     },
     /**
      * 获取复选框保留选中的行
@@ -8054,13 +8039,18 @@ const tableMethods = {
         return reserveSelection;
     },
     clearCheckboxReserve() {
-        this.checkboxReserveRowMap = {};
-        return this.$nextTick();
+        const $xeTable = this;
+        const internalData = $xeTable;
+        internalData.checkboxReserveRowMap = {};
+        return $xeTable.$nextTick();
     },
     handleCheckboxReserveRow(row, checked) {
-        const { checkboxReserveRowMap, checkboxOpts } = this;
+        const $xeTable = this;
+        const internalData = $xeTable;
+        const { checkboxReserveRowMap } = internalData;
+        const checkboxOpts = $xeTable.computeCheckboxOpts;
         if (checkboxOpts.reserve) {
-            const rowid = getRowid(this, row);
+            const rowid = getRowid($xeTable, row);
             if (checked) {
                 checkboxReserveRowMap[rowid] = row;
             }
@@ -11351,7 +11341,7 @@ const tableMethods = {
                 });
             }
             else {
-                wheelScrollTopTo(scrollTop - currScrollTop, (offsetTop) => {
+                scrollTopTo(scrollTop - currScrollTop, (offsetTop) => {
                     const currTopNum = bodyScrollElem.scrollTop + offsetTop;
                     internalData.inWheelScroll = true;
                     setScrollTop(yHandleEl, currTopNum);

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, getCalcHeight, hasDeepKey } from './util';
+import { createReactData, createInternalData, createHandleGetRowId, getCalcHeight, hasDeepKey } from './util';
 import { VxeUI } from '../../ui';
 import methods from './methods';
 import TableBodyComponent from './body';
@@ -510,246 +510,7 @@ export default {
     },
     data() {
         const xID = XEUtils.uniqueId();
-        const reactData = {
-            // 低性能的静态列
-            staticColumns: [],
-            // 渲染的列分组
-            tableGroupColumn: [],
-            // 可视区渲染的列
-            tableColumn: [],
-            // 渲染中的数据
-            tableData: [],
-            // 是否启用了横向 X 可视渲染方式加载
-            scrollXLoad: false,
-            // 是否启用了纵向 Y 可视渲染方式加载
-            scrollYLoad: false,
-            // 是否存在纵向滚动条
-            overflowY: true,
-            // 是否存在横向滚动条
-            overflowX: false,
-            // 纵向滚动条的宽度
-            scrollbarWidth: 0,
-            // 横向滚动条的高度
-            scrollbarHeight: 0,
-            // 最后滚动时间戳
-            lastScrollTime: 0,
-            // 行高
-            rowHeight: 0,
-            // 表格父容器的高度
-            parentHeight: 0,
-            // 是否使用分组表头
-            isGroup: false,
-            isAllOverflow: false,
-            // 复选框属性，是否全选
-            isAllSelected: false,
-            // 复选框属性，有选中且非全选状态
-            isIndeterminate: false,
-            // 当前行
-            currentRow: null,
-            // 单选框属性，选中列
-            currentColumn: null,
-            // 单选框属性，选中行
-            selectRadioRow: null,
-            // 表尾合计数据
-            footerTableData: [],
-            // 行分组列信息
-            rowGroupColumn: null,
-            // 展开列信息
-            expandColumn: null,
-            checkboxColumn: null,
-            radioColumn: null,
-            // 树节点列信息
-            treeNodeColumn: null,
-            hasFixedColumn: false,
-            // 刷新列标识，当列筛选被改变时，触发表格刷新数据
-            upDataFlag: 0,
-            // 刷新列标识，当列的特定属性被改变时，触发表格刷新列
-            reColumnFlag: 0,
-            // 初始化标识
-            initStore: {
-                filter: false,
-                import: false,
-                export: false,
-                custom: false
-            },
-            // 自定义列相关的信息
-            customStore: {
-                btnEl: null,
-                isAll: false,
-                isIndeterminate: false,
-                activeBtn: false,
-                activeWrapper: false,
-                visible: false,
-                maxHeight: 0,
-                oldSortMaps: {},
-                oldFixedMaps: {},
-                oldVisibleMaps: {}
-            },
-            customColumnList: [],
-            // 当前选中的筛选列
-            filterStore: {
-                isAllSelected: false,
-                isIndeterminate: false,
-                style: null,
-                column: null,
-                visible: false,
-                maxHeight: null
-            },
-            // 存放列相关的信息
-            columnStore: {
-                leftList: [],
-                centerList: [],
-                rightList: [],
-                resizeList: [],
-                pxList: [],
-                pxMinList: [],
-                autoMinList: [],
-                scaleList: [],
-                scaleMinList: [],
-                autoList: [],
-                remainList: []
-            },
-            // 存放快捷菜单的信息
-            ctxMenuStore: {
-                selected: null,
-                visible: false,
-                showChild: false,
-                selectChild: null,
-                list: [],
-                style: null
-            },
-            // 存放可编辑相关信息
-            editStore: {
-                indexs: {
-                    columns: []
-                },
-                titles: {
-                    columns: []
-                },
-                // 选中源
-                selected: {
-                    row: null,
-                    column: null
-                },
-                // 已复制源
-                copyed: {
-                    cut: false,
-                    rows: [],
-                    columns: []
-                },
-                // 激活
-                actived: {
-                    row: null,
-                    column: null
-                },
-                // 当前被强制聚焦单元格，只会在鼠标点击后算聚焦
-                focused: {
-                    row: null,
-                    column: null
-                }
-            },
-            // 存放 tooltip 相关信息
-            tooltipStore: {
-                row: null,
-                column: null,
-                content: null,
-                visible: false,
-                type: null,
-                currOpts: {}
-            },
-            // 存放数据校验相关信息
-            validStore: {
-                visible: false
-            },
-            validErrorMaps: {},
-            // 导入相关信息
-            importStore: {
-                inited: false,
-                file: null,
-                type: '',
-                modeList: [],
-                typeList: [],
-                filename: '',
-                visible: false
-            },
-            importParams: {
-                mode: '',
-                types: null,
-                message: true
-            },
-            // 导出相关信息
-            exportStore: {
-                inited: false,
-                name: '',
-                modeList: [],
-                typeList: [],
-                columns: [],
-                isPrint: false,
-                hasFooter: false,
-                hasMerge: false,
-                hasTree: false,
-                hasColgroup: false,
-                visible: false
-            },
-            exportParams: {
-                filename: '',
-                sheetName: '',
-                mode: '',
-                type: '',
-                isColgroup: false,
-                isMerge: false,
-                isAllExpand: false,
-                useStyle: false,
-                original: false,
-                message: true,
-                isHeader: false,
-                isTitle: false,
-                isFooter: false
-            },
-            visiblwRowsFlag: 1,
-            isRowGroupStatus: false,
-            rowGroupList: [],
-            aggHandleFields: [],
-            aggHandleAggColumns: [],
-            rowGroupExpandedFlag: 1,
-            rowExpandedFlag: 1,
-            treeExpandedFlag: 1,
-            updateCheckboxFlag: 1,
-            pendingRowFlag: 1,
-            insertRowFlag: 1,
-            removeRowFlag: 1,
-            mergeHeadFlag: 1,
-            mergeBodyFlag: 1,
-            mergeFootFlag: 1,
-            rowHeightStore: {
-                large: 52,
-                default: 48,
-                medium: 44,
-                small: 40,
-                mini: 36
-            },
-            scrollVMLoading: false,
-            scrollYHeight: 0,
-            scrollYTop: 0,
-            isScrollYBig: false,
-            scrollXLeft: 0,
-            scrollXWidth: 0,
-            isScrollXBig: false,
-            lazScrollLoading: false,
-            rowExpandHeightFlag: 1,
-            calcCellHeightFlag: 1,
-            resizeHeightFlag: 1,
-            resizeWidthFlag: 1,
-            isCustomStatus: false,
-            isCrossDragRow: false,
-            dragRow: null,
-            isCrossDragCol: false,
-            dragCol: null,
-            dragTipText: '',
-            isDragResize: false,
-            isRowLoading: false,
-            isColLoading: false
-        };
+        const reactData = createReactData();
         return Object.assign(Object.assign({ xID }, reactData), { 
             // 私有属性
             reScrollFlag: 0, reLayoutFlag: 0, footFlag: 0, mergeFooteCellFlag: 0, crossTableDragRowInfo: crossTableDragRowGlobal });
@@ -783,7 +544,12 @@ export default {
         computeValidOpts() {
             const $xeTable = this;
             const props = $xeTable;
-            return Object.assign({}, getConfig().table.validConfig, props.validConfig);
+            const opts = Object.assign({}, getConfig().table.validConfig, props.validConfig);
+            // 兼容老版本
+            if (XEUtils.isBoolean(opts.showMessage)) {
+                opts.showErrorMessage = opts.showMessage;
+            }
+            return opts;
         },
         sXOpts() {
             return this.computeVirtualXOpts;
@@ -1721,7 +1487,7 @@ export default {
         if (rowOpts.height && !this.showOverflow) {
             warnLog('vxe.error.notProp', ['table.show-overflow']);
         }
-        if (!$xeTable.triggerCellAreaModnEvent) {
+        if (!$xeTable.triggerClAreaModnEvent) {
             if (props.areaConfig) {
                 warnLog('vxe.error.notProp', ['area-config']);
             }
@@ -2003,6 +1769,7 @@ export default {
     },
     beforeDestroy() {
         const $xeTable = this;
+        const reactData = $xeTable;
         const teleportWrapperEl = $xeTable.$refs.refTeleportWrapper;
         if (teleportWrapperEl && teleportWrapperEl.parentElement) {
             teleportWrapperEl.parentElement.removeChild(teleportWrapperEl);
@@ -2031,6 +1798,7 @@ export default {
         globalEvents.off($xeTable, 'resize');
         globalEvents.off($xeTable, 'contextmenu');
         this.preventEvent(null, 'beforeDestroy');
+        XEUtils.assign(reactData, createReactData());
     },
     destroyed() {
         const $xeTable = this;
@@ -2293,11 +2061,7 @@ export default {
                     isContentMenu
                         ? h(TableMenuPanelComponent, {
                             key: 'tm',
-                            ref: 'refTableMenu',
-                            props: {
-                                ctxMenuStore: this.ctxMenuStore,
-                                ctxMenuOpts: this.ctxMenuOpts
-                            }
+                            ref: 'refTableMenu'
                         })
                         : renderEmptyElement($xeTable)
                 ])
@@ -2390,7 +2154,7 @@ export default {
                 /**
                  * 校验提示
                  */
-                VxeUITooltipComponent && this.editRules && validOpts.showMessage && (validOpts.message === 'default' ? !height : validOpts.message === 'tooltip')
+                VxeUITooltipComponent && this.editRules && validOpts.showErrorMessage && (validOpts.message === 'default' ? !height : validOpts.message === 'tooltip')
                     ? h(VxeUITooltipComponent, {
                         key: 'vtp',
                         ref: 'refValidTooltip',