vxe-table 3.14.0 → 3.14.2

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

@@ -2,9 +2,10 @@ import XEUtils from 'xe-utils';
 import { VxeUI } from '../../../ui';
 import { isEnableConf } from '../../../ui/src/utils';
 import { getCellValue, setCellValue, getRowid } from '../../src/util';
-import { browse, removeClass, addClass } from '../../../ui/src/dom';
+import { removeClass, addClass } from '../../../ui/src/dom';
 import { warnLog, errLog } from '../../../ui/src/log';
 const { getConfig, renderer, getI18n } = VxeUI;
+const browseObj = XEUtils.browse();
 function getEditColumnModel(row, column) {
     const { model, editRender } = column;
     if (editRender) {
@@ -44,18 +45,20 @@ function syncActivedCell($xeTable) {
         }
     }
 }
-function insertTreeRow(_vm, newRecords, isAppend) {
-    const { tableFullTreeData, afterFullData, fullDataRowIdData, fullAllDataRowIdData, treeOpts } = _vm;
+function insertTreeRow($xeTable, newRecords, isAppend) {
+    const internalData = $xeTable;
+    const { tableFullTreeData, afterFullData, fullDataRowIdData, fullAllDataRowIdData } = internalData;
+    const treeOpts = $xeTable.computeTreeOpts;
     const { rowField, parentField, mapChildrenField } = treeOpts;
     const childrenField = treeOpts.children || treeOpts.childrenField;
     const funcName = isAppend ? 'push' : 'unshift';
     newRecords.forEach((item) => {
         const parentRowId = item[parentField];
-        const rowid = getRowid(_vm, item);
+        const rowid = getRowid($xeTable, item);
         const matchObj = parentRowId ? XEUtils.findTree(tableFullTreeData, (item) => parentRowId === item[rowField], { children: mapChildrenField }) : null;
         if (matchObj) {
             const { item: parentRow } = matchObj;
-            const parentRest = fullAllDataRowIdData[getRowid(_vm, parentRow)];
+            const parentRest = fullAllDataRowIdData[getRowid($xeTable, parentRow)];
             const parentLevel = parentRest ? parentRest.level : 0;
             let parentChilds = parentRow[childrenField];
             let mapChilds = parentRow[mapChildrenField];
@@ -90,8 +93,8 @@ function handleInsertRowAt($xeTable, records, targetRow, isInsertNextRow) {
     const reactData = $xeTable;
     const internalData = $xeTable;
     const { treeConfig } = props;
-    const { mergeList, editStore } = reactData;
-    const { tableFullTreeData, afterFullData, tableFullData, fullDataRowIdData, fullAllDataRowIdData } = internalData;
+    const { mergeList } = reactData;
+    const { tableFullTreeData, afterFullData, tableFullData, fullDataRowIdData, fullAllDataRowIdData, insertRowMaps } = internalData;
     const treeOpts = $xeTable.computeTreeOpts;
     const { transform, rowField, mapChildrenField } = treeOpts;
     const childrenField = treeOpts.children || treeOpts.childrenField;
@@ -238,11 +241,11 @@ function handleInsertRowAt($xeTable, records, targetRow, isInsertNextRow) {
             }
         }
     }
-    const { insertMaps } = editStore;
     newRecords.forEach(newRow => {
         const rowid = getRowid($xeTable, newRow);
-        insertMaps[rowid] = newRow;
+        insertRowMaps[rowid] = newRow;
     });
+    reactData.insertRowFlag++;
     $xeTable.cacheRowMap(false);
     $xeTable.updateScrollYStatus();
     $xeTable.handleTableData(treeConfig && transform);
@@ -251,7 +254,7 @@ function handleInsertRowAt($xeTable, records, targetRow, isInsertNextRow) {
     }
     $xeTable.updateFooter();
     $xeTable.checkSelectionStatus();
-    if ($xeTable.scrollYLoad) {
+    if (reactData.scrollYLoad) {
         $xeTable.updateScrollYSpace();
     }
     return $xeTable.$nextTick().then(() => {
@@ -493,13 +496,12 @@ export default {
             const internalData = $xeTable;
             const { treeConfig } = props;
             const { mergeList, editStore } = reactData;
-            const { tableFullTreeData, selectCheckboxMaps, afterFullData, tableFullData, pendingRowMaps } = internalData;
+            const { tableFullTreeData, selectCheckboxMaps, afterFullData, tableFullData, pendingRowMaps, insertRowMaps, removeRowMaps } = internalData;
             const checkboxOpts = $xeTable.computeCheckboxOpts;
             const treeOpts = $xeTable.computeTreeOpts;
             const { transform, mapChildrenField } = treeOpts;
             const childrenField = treeOpts.children || treeOpts.childrenField;
-            const { actived, removeMaps } = editStore;
-            const insertDataRowMaps = Object.assign({}, editStore.insertMaps);
+            const { actived } = editStore;
             const { checkField } = checkboxOpts;
             let delList = [];
             if (!rows) {
@@ -512,7 +514,7 @@ export default {
             rows.forEach(row => {
                 if (!$xeTable.isInsertByRow(row)) {
                     const rowid = getRowid($xeTable, row);
-                    removeMaps[rowid] = row;
+                    removeRowMaps[rowid] = row;
                 }
             });
             // 如果绑定了多选属性，则更新状态
@@ -583,14 +585,15 @@ export default {
             // 从新增中移除已删除的数据
             rows.forEach((row) => {
                 const rowid = getRowid($xeTable, row);
-                if (insertDataRowMaps[rowid]) {
-                    delete insertDataRowMaps[rowid];
+                if (insertRowMaps[rowid]) {
+                    delete insertRowMaps[rowid];
                 }
                 if (pendingRowMaps[rowid]) {
                     delete pendingRowMaps[rowid];
                 }
             });
-            editStore.insertMaps = insertDataRowMaps;
+            reactData.removeRowFlag++;
+            reactData.insertRowFlag++;
             reactData.pendingRowFlag++;
             $xeTable.updateFooter();
             $xeTable.cacheRowMap(false);
@@ -661,13 +664,10 @@ export default {
          */
         _getInsertRecords() {
             const $xeTable = this;
-            const reactData = $xeTable;
             const internalData = $xeTable;
-            const { editStore } = reactData;
-            const { fullAllDataRowIdData } = internalData;
-            const { insertMaps } = editStore;
+            const { fullAllDataRowIdData, insertRowMaps } = internalData;
             const insertRecords = [];
-            XEUtils.each(insertMaps, (row, rowid) => {
+            XEUtils.each(insertRowMaps, (row, rowid) => {
                 if (fullAllDataRowIdData[rowid]) {
                     insertRecords.push(row);
                 }
@@ -679,11 +679,10 @@ export default {
          */
         _getRemoveRecords() {
             const $xeTable = this;
-            const reactData = $xeTable;
-            const { editStore } = reactData;
-            const { removeMaps } = editStore;
+            const internalData = $xeTable;
+            const { removeRowMaps } = internalData;
             const removeRecords = [];
-            XEUtils.each(removeMaps, (row) => {
+            XEUtils.each(removeRowMaps, (row) => {
                 removeRecords.push(row);
             });
             return removeRecords;
@@ -695,17 +694,17 @@ export default {
          */
         _getUpdateRecords() {
             const $xeTable = this;
-            const { keepSource, tableFullData, isUpdateByRow, treeConfig, treeOpts, editStore } = this;
+            const props = $xeTable;
+            const internalData = $xeTable;
+            const { keepSource, treeConfig } = props;
+            const { tableFullData } = internalData;
+            const treeOpts = $xeTable.computeTreeOpts;
             if (keepSource) {
-                const { actived } = editStore;
-                const { row, column } = actived;
-                if (row || column) {
-                    syncActivedCell($xeTable);
-                }
+                syncActivedCell($xeTable);
                 if (treeConfig) {
-                    return XEUtils.filterTree(tableFullData, row => isUpdateByRow(row), treeOpts);
+                    return XEUtils.filterTree(tableFullData, row => $xeTable.isUpdateByRow(row), treeOpts);
                 }
-                return tableFullData.filter((row) => isUpdateByRow(row));
+                return tableFullData.filter((row) => $xeTable.isUpdateByRow(row));
             }
             return [];
         },
@@ -754,42 +753,52 @@ export default {
             return handleClearEdit($xeTable, evnt, targetRow);
         },
         _getActiveRecord() {
+            const $xeTable = this;
             if (process.env.NODE_ENV === 'development') {
                 warnLog('vxe.error.delFunc', ['getActiveRecord', 'getEditRecord']);
             }
             // 即将废弃
-            return this.getEditRecord();
+            return $xeTable.getEditRecord();
         },
         _getEditRecord() {
-            const { $el, editStore, afterFullData } = this;
-            const { actived } = editStore;
-            const { args, row } = actived;
-            if (args && this.findRowIndexOf(afterFullData, row) > -1 && $el.querySelectorAll('.vxe-body--column.col--active').length) {
+            const $xeTable = this;
+            const reactData = $xeTable;
+            const internalData = $xeTable;
+            const { editStore } = reactData;
+            const { afterFullData } = internalData;
+            const el = $xeTable.$refs.refElem;
+            const { args, row } = editStore.actived;
+            if (args && $xeTable.findRowIndexOf(afterFullData, row) > -1 && el.querySelectorAll('.vxe-body--column.col--active').length) {
                 return Object.assign({}, args);
             }
             return null;
         },
         _isActiveByRow(row) {
+            const $xeTable = this;
             if (process.env.NODE_ENV === 'development') {
                 warnLog('vxe.error.delFunc', ['isActiveByRow', 'isEditByRow']);
             }
             // 即将废弃
-            return this.isEditByRow(row);
+            return $xeTable.isEditByRow(row);
         },
         /**
          * 判断行是否为激活编辑状态
          * @param {Row} row 行对象
          */
         _isEditByRow(row) {
-            return this.editStore.actived.row === row;
+            const $xeTable = this;
+            const reactData = $xeTable;
+            const { editStore } = reactData;
+            return editStore.actived.row === row;
         },
         /**
          * 处理聚焦
          */
         handleFocus(params) {
-            const { editOpts } = this;
+            const $xeTable = this;
             const { row, column, cell } = params;
             const { editRender } = column;
+            const editOpts = $xeTable.computeEditOpts;
             if (isEnableConf(editRender)) {
                 const compRender = renderer.get(editRender.name);
                 let autoFocus = editRender.autofocus || editRender.autoFocus;
@@ -805,7 +814,7 @@ export default {
                     }
                     // 如果指定了聚焦 class
                     if (XEUtils.isFunction(autoFocus)) {
-                        inputElem = autoFocus.call(this, params);
+                        inputElem = autoFocus.call($xeTable, params);
                     }
                     else if (autoFocus) {
                         if (autoFocus === true) {
@@ -826,7 +835,7 @@ export default {
                     }
                     else {
                         // 保持一致行为，光标移到末端
-                        if (browse.msie) {
+                        if (browseObj.msie) {
                             const textRange = inputElem.createTextRange();
                             textRange.collapse(false);
                             textRange.select();
@@ -838,18 +847,19 @@ export default {
                     if (editOpts.autoPos) {
                         if (!column.fixed) {
                             // 显示到可视区中
-                            this.scrollToRow(row, column);
+                            $xeTable.scrollToRow(row, column);
                         }
                     }
                 }
             }
         },
         _setActiveRow(row) {
+            const $xeTable = this;
             if (process.env.NODE_ENV === 'development') {
                 warnLog('vxe.error.delFunc', ['setActiveRow', 'setEditRow']);
             }
             // 即将废弃
-            return this.setEditRow(row);
+            return $xeTable.setEditRow(row);
         },
         /**
          * 激活行编辑
@@ -861,7 +871,7 @@ export default {
             if (fieldOrColumn) {
                 isPos = true;
                 if (fieldOrColumn !== true) {
-                    column = XEUtils.isString(fieldOrColumn) ? this.getColumnByField(fieldOrColumn) : fieldOrColumn;
+                    column = XEUtils.isString(fieldOrColumn) ? $xeTable.getColumnByField(fieldOrColumn) : fieldOrColumn;
                 }
             }
             return handleEditCell($xeTable, row, column, isPos);
@@ -884,24 +894,38 @@ export default {
          * 只对 trigger=dblclick 有效，选中单元格
          */
         _setSelectCell(row, fieldOrColumn) {
-            const { tableData, editOpts, visibleColumn } = this;
-            const column = XEUtils.isString(fieldOrColumn) ? this.getColumnByField(fieldOrColumn) : fieldOrColumn;
+            const $xeTable = this;
+            const reactData = $xeTable;
+            const { tableData } = reactData;
+            const editOpts = $xeTable.computeEditOpts;
+            const column = XEUtils.isString(fieldOrColumn) ? $xeTable.getColumnByField(fieldOrColumn) : fieldOrColumn;
             if (row && column && editOpts.trigger !== 'manual') {
-                const rowIndex = this.findRowIndexOf(tableData, row);
+                const rowIndex = $xeTable.findRowIndexOf(tableData, row);
                 if (rowIndex > -1) {
-                    const cell = this.getCellElement(row, column);
-                    const params = { row, rowIndex, column, columnIndex: visibleColumn.indexOf(column), cell };
-                    this.handleSelected(params, {});
+                    const cell = $xeTable.getCellElement(row, column);
+                    const params = {
+                        row,
+                        rowIndex,
+                        column,
+                        columnIndex: $xeTable.getColumnIndex(column),
+                        cell
+                    };
+                    $xeTable.handleSelected(params, {});
                 }
             }
-            return this.$nextTick();
+            return $xeTable.$nextTick();
         },
         /**
          * 处理选中源
          */
         handleSelected(params, evnt) {
             const $xeTable = this;
-            const { mouseConfig, mouseOpts, editOpts, editStore } = this;
+            const props = $xeTable;
+            const reactData = $xeTable;
+            const { mouseConfig } = props;
+            const { editStore } = reactData;
+            const mouseOpts = $xeTable.computeMouseOpts;
+            const editOpts = $xeTable.computeEditOpts;
             const { actived, selected } = editStore;
             const { row, column } = params;
             const isMouseSelected = mouseConfig && mouseOpts.selected;
@@ -909,22 +933,24 @@ export default {
                 if (isMouseSelected && (selected.row !== row || selected.column !== column)) {
                     if (actived.row !== row || (editOpts.mode === 'cell' ? actived.column !== column : false)) {
                         handleClearEdit($xeTable, evnt);
-                        this.clearSelected(evnt);
-                        this.clearCellAreas(evnt);
-                        this.clearCopyCellArea(evnt);
+                        $xeTable.clearSelected();
+                        if ($xeTable.clearCellAreas) {
+                            $xeTable.clearCellAreas();
+                            $xeTable.clearCopyCellArea();
+                        }
                         selected.args = params;
                         selected.row = row;
                         selected.column = column;
                         if (isMouseSelected) {
                             this.addCellSelectedClass();
                         }
-                        this.focus();
+                        $xeTable.focus();
                         if (evnt) {
-                            this.emitEvent('cell-selected', params, evnt);
+                            $xeTable.dispatchEvent('cell-selected', params, evnt);
                         }
                     }
                 }
-                return this.$nextTick();
+                return $xeTable.$nextTick();
             };
             return selectMethod();
         },
@@ -932,7 +958,10 @@ export default {
          * 获取选中的单元格
          */
         _getSelectedCell() {
-            const { args, column } = this.editStore.selected;
+            const $xeTable = this;
+            const reactData = $xeTable;
+            const { editStore } = reactData;
+            const { args, column } = editStore.selected;
             if (args && column) {
                 return Object.assign({}, args);
             }
@@ -943,12 +972,13 @@ export default {
          */
         _clearSelected() {
             const $xeTable = this;
-            const { selected } = this.editStore;
+            const reactData = $xeTable;
+            const { editStore } = reactData;
+            const { selected } = editStore;
             selected.row = null;
             selected.column = null;
-            this.reColTitleSdCls();
             removeCellSelectedClass($xeTable);
-            return this.$nextTick();
+            return $xeTable.$nextTick();
         },
         reColTitleSdCls() {
             const headerElem = this.elemStore['main-header-list'];

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

@@ -1,10 +1,11 @@
 import XEUtils from 'xe-utils';
 import { getRefElem } from '../../src/util';
-import { browse, hasClass, getAbsolutePos, addClass, removeClass } from '../../../ui/src/dom';
+import { hasClass, getAbsolutePos, addClass, removeClass } from '../../../ui/src/dom';
+const browseObj = XEUtils.browse();
 function getTargetOffset(target, container) {
     let offsetTop = 0;
     let offsetLeft = 0;
-    const triggerCheckboxLabel = !browse.firefox && hasClass(target, 'vxe-checkbox--label');
+    const triggerCheckboxLabel = !browseObj.firefox && hasClass(target, 'vxe-checkbox--label');
     if (triggerCheckboxLabel) {
         const checkboxLabelStyle = getComputedStyle(target);
         offsetTop -= XEUtils.toNumber(checkboxLabelStyle.paddingTop);

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

@@ -149,13 +149,10 @@ export default {
         beginValidate(rows, cols, cb, isFull) {
             const $xeTable = this;
             const props = $xeTable;
-            const reactData = $xeTable;
             const internalData = $xeTable;
             const validRest = {};
             const { editRules, treeConfig } = props;
-            const { editStore } = reactData;
-            const { afterFullData, pendingRowMaps } = internalData;
-            const { removeMaps } = editStore;
+            const { afterFullData, pendingRowMaps, removeRowMaps } = internalData;
             const treeOpts = $xeTable.computeTreeOpts;
             const childrenField = treeOpts.children || treeOpts.childrenField;
             let validList;
@@ -183,7 +180,7 @@ export default {
                 const handleVaild = (row) => {
                     const rowid = getRowid($xeTable, row);
                     // 是否删除
-                    if (removeMaps[rowid]) {
+                    if (removeRowMaps[rowid]) {
                         return;
                     }
                     // 是否标记删除

package/es/table/src/body.js

@@ -417,9 +417,12 @@ function renderRows(h, _vm, fixedType, isOptimizeMode, tableData, tableColumn) {
     const { handleGetRowId } = createHandleGetRowId($xeTable);
     tableData.forEach((row, $rowIndex) => {
         const trOn = {};
+        const rowid = handleGetRowId(row);
+        const rowRest = fullAllDataRowIdData[rowid] || {};
         let rowIndex = $rowIndex;
-        // 确保任何情况下 rowIndex 都精准指向真实 data 索引
-        rowIndex = $xeTable.getRowIndex(row);
+        let rowLevel = 0;
+        let seq = -1;
+        let _rowIndex = -1;
         // 当前行事件
         if (rowOpts.isHover || highlightHoverRow) {
             trOn.mouseenter = (evnt) => {
@@ -435,11 +438,6 @@ function renderRows(h, _vm, fixedType, isOptimizeMode, tableData, tableColumn) {
                 $xeTable.clearHoverRow();
             };
         }
-        const rowid = handleGetRowId(row);
-        const rowRest = fullAllDataRowIdData[rowid] || {};
-        let rowLevel = 0;
-        let seq = -1;
-        let _rowIndex = 0;
         if (rowRest) {
             rowLevel = rowRest.level;
             if (treeConfig && transform && seqMode === 'increasing') {
@@ -448,6 +446,7 @@ function renderRows(h, _vm, fixedType, isOptimizeMode, tableData, tableColumn) {
             else {
                 seq = rowRest.seq;
             }
+            rowIndex = rowRest.index;
             _rowIndex = rowRest._index;
         }
         const params = { $table: $xeTable, seq, rowid, fixed: fixedType, type: renderType, level: rowLevel, row, rowIndex, $rowIndex, _rowIndex };