vxe-table 3.12.13 → 3.12.15

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

@@ -5,6 +5,15 @@ import { getCellValue, setCellValue, getRowid } from '../../src/util';
 import { browse, removeClass, addClass } from '../../../ui/src/dom';
 import { warnLog, errLog } from '../../../ui/src/log';
 const { getConfig, renderer, getI18n } = VxeUI;
+function removeCellSelectedClass($xeTable) {
+    const el = $xeTable.$refs.refElem;
+    if (el) {
+        const cell = el.querySelector('.col--selected');
+        if (cell) {
+            removeClass(cell, 'col--selected');
+        }
+    }
+}
 function insertTreeRow(_vm, newRecords, isAppend) {
     const { tableFullTreeData, afterFullData, fullDataRowIdData, fullAllDataRowIdData, treeOpts } = _vm;
     const { rowField, parentField, mapChildrenField } = treeOpts;
@@ -293,7 +302,7 @@ export default {
             const treeOpts = $xeTable.computeTreeOpts;
             const { transform, mapChildrenField } = treeOpts;
             const childrenField = treeOpts.children || treeOpts.childrenField;
-            const { actived, removeList, insertMaps } = editStore;
+            const { actived, removeMaps, insertMaps } = editStore;
             const { checkField } = checkboxOpts;
             let delList = [];
             if (!rows) {
@@ -305,7 +314,8 @@ export default {
             // 如果是新增，则保存记录
             rows.forEach(row => {
                 if (!$xeTable.isInsertByRow(row)) {
-                    removeList.push(row);
+                    const rowid = getRowid($xeTable, row);
+                    removeMaps[rowid] = row;
                 }
             });
             // 如果绑定了多选属性，则更新状态
@@ -467,7 +477,15 @@ export default {
          * 获取已删除的数据
          */
         _getRemoveRecords() {
-            return this.editStore.removeList;
+            const $xeTable = this;
+            const reactData = $xeTable;
+            const { editStore } = reactData;
+            const { removeMaps } = editStore;
+            const removeRecords = [];
+            XEUtils.each(removeMaps, (row) => {
+                removeRecords.push(row);
+            });
+            return removeRecords;
         },
         /**
          * 获取更新数据
@@ -649,11 +667,6 @@ export default {
             }
             focused.row = null;
             focused.column = null;
-            $xeTable.$nextTick(() => {
-                if (mouseConfig && mouseOpts.area && $xeTable.handleRecalculateCellAreas) {
-                    return $xeTable.handleRecalculateCellAreas();
-                }
-            });
             if (validOpts.autoClear) {
                 if (validOpts.msgMode !== 'full' || getConfig().cellVaildMode === 'obsolete') {
                     if ($xeTable.clearValidate) {
@@ -661,7 +674,11 @@ export default {
                     }
                 }
             }
-            return $xeTable.$nextTick();
+            return $xeTable.$nextTick().then(() => {
+                if (mouseConfig && mouseOpts.area && $xeTable.handleRecalculateCellAreas) {
+                    return $xeTable.handleRecalculateCellAreas();
+                }
+            });
         },
         _getActiveRecord() {
             if (process.env.NODE_ENV === 'development') {
@@ -830,7 +847,7 @@ export default {
                         selected.row = row;
                         selected.column = column;
                         if (isMouseSelected) {
-                            this.addColSdCls();
+                            this.addCellSelectedClass();
                         }
                         this.focus();
                         if (evnt) {
@@ -856,11 +873,12 @@ export default {
          * 清除所选中源状态
          */
         _clearSelected() {
+            const $xeTable = this;
             const { selected } = this.editStore;
             selected.row = null;
             selected.column = null;
             this.reColTitleSdCls();
-            this.reColSdCls();
+            removeCellSelectedClass($xeTable);
             return this.$nextTick();
         },
         reColTitleSdCls() {
@@ -869,18 +887,15 @@ export default {
                 XEUtils.arrayEach(headerElem.querySelectorAll('.col--title-selected'), elem => removeClass(elem, 'col--title-selected'));
             }
         },
-        reColSdCls() {
-            const cell = this.$el.querySelector('.col--selected');
-            if (cell) {
-                removeClass(cell, 'col--selected');
-            }
-        },
-        addColSdCls() {
-            const { selected } = this.editStore;
+        addCellSelectedClass() {
+            const $xeTable = this;
+            const reactData = $xeTable;
+            const { editStore } = reactData;
+            const { selected } = editStore;
             const { row, column } = selected;
-            this.reColSdCls();
+            removeCellSelectedClass($xeTable);
             if (row && column) {
-                const cell = this.getCellElement(row, column);
+                const cell = $xeTable.getCellElement(row, column);
                 if (cell) {
                     addClass(cell, 'col--selected');
                 }

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

@@ -2,6 +2,7 @@ import XEUtils from 'xe-utils';
 import { VxeUI } from '../../../ui';
 import { isColumnInfo, mergeBodyMethod, getCellValue } from '../../src/util';
 import { parseFile, formatText, eqEmptyValue } from '../../../ui/src/utils';
+import { hasClass } from '../../../ui/src/dom';
 import { createHtmlPage, getExportBlobByContent } from './util';
 import { warnLog, errLog } from '../../../ui/src/log';
 const { getI18n, renderer } = VxeUI;
@@ -121,7 +122,7 @@ function getBodyLabelData($xeTable, opts, columns, datas) {
                                     }
                                     else {
                                         const cell = $xeTable.getCellElement(row, column);
-                                        if (cell) {
+                                        if (cell && !hasClass(cell, 'is--progress')) {
                                             cellValue = cell.innerText.trim();
                                         }
                                     }
@@ -182,7 +183,7 @@ function getBodyLabelData($xeTable, opts, columns, datas) {
                             }
                             else {
                                 const cell = $xeTable.getCellElement(row, column);
-                                if (cell) {
+                                if (cell && !hasClass(cell, 'is--progress')) {
                                     cellValue = cell.innerText.trim();
                                 }
                             }

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

@@ -147,8 +147,16 @@ export default {
          * 返回 Promise 对象，或者使用回调方式
          */
         beginValidate(rows, cols, cb, isFull) {
+            const $xeTable = this;
+            const props = $xeTable;
+            const reactData = $xeTable;
+            const internalData = $xeTable;
             const validRest = {};
-            const { editRules, afterFullData, treeConfig, treeOpts } = this;
+            const { editRules, treeConfig } = props;
+            const { editStore, pendingRowMaps } = reactData;
+            const { afterFullData } = internalData;
+            const { removeMaps } = editStore;
+            const treeOpts = $xeTable.computeTreeOpts;
             const childrenField = treeOpts.children || treeOpts.childrenField;
             let validList;
             if (rows === true) {
@@ -173,6 +181,15 @@ export default {
             if (editRules) {
                 const columns = cols && cols.length ? cols : this.getColumns();
                 const handleVaild = (row) => {
+                    const rowid = getRowid($xeTable, row);
+                    // 是否删除
+                    if (removeMaps[rowid]) {
+                        return;
+                    }
+                    // 是否标记删除
+                    if (pendingRowMaps[rowid]) {
+                        return;
+                    }
                     if (isFull || !this.validRuleErr) {
                         const colVailds = [];
                         columns.forEach((column) => {

package/es/table/render/index.js

@@ -92,10 +92,11 @@ function getCellLabelVNs(h, renderOpts, params, cellLabel) {
  * @param modelFunc
  * @param changeFunc
  */
-function getNativeElementOns(renderOpts, params, modelFunc, changeFunc) {
+function getNativeElementOns(renderOpts, params, eFns) {
     const { events } = renderOpts;
     const modelEvent = getModelEvent(renderOpts);
     const changeEvent = getChangeEvent(renderOpts);
+    const { model: modelFunc, change: changeFunc, blur: blurFunc } = eFns || {};
     const isSameEvent = changeEvent === modelEvent;
     const ons = {};
     if (events) {
@@ -117,15 +118,24 @@ function getNativeElementOns(renderOpts, params, modelFunc, changeFunc) {
         };
     }
     if (!isSameEvent && changeFunc) {
-        ons[getOnName(changeEvent)] = function (...args) {
-            changeFunc(...args);
+        ons[getOnName(changeEvent)] = function (evnt) {
+            changeFunc(evnt);
             if (events && events[changeEvent]) {
-                events[changeEvent](params, ...args);
+                events[changeEvent](params, evnt);
+            }
+        };
+    }
+    if (blurFunc) {
+        ons[getOnName(blurEvent)] = function (evnt) {
+            blurFunc(evnt);
+            if (events && events[blurEvent]) {
+                events[blurEvent](params, evnt);
             }
         };
     }
     return ons;
 }
+const blurEvent = 'blur';
 /**
  * 组件事件处理
  * @param renderOpts
@@ -133,10 +143,11 @@ function getNativeElementOns(renderOpts, params, modelFunc, changeFunc) {
  * @param modelFunc
  * @param changeFunc
  */
-function getComponentOns(renderOpts, params, modelFunc, changeFunc) {
+function getComponentOns(renderOpts, params, eFns) {
     const { events } = renderOpts;
     const modelEvent = getModelEvent(renderOpts);
     const changeEvent = getChangeEvent(renderOpts);
+    const { model: modelFunc, change: changeFunc, blur: blurFunc } = eFns || {};
     const ons = {};
     XEUtils.objectEach(events, (func, key) => {
         ons[getOnName(key)] = function (...args) {
@@ -164,6 +175,14 @@ function getComponentOns(renderOpts, params, modelFunc, changeFunc) {
             }
         };
     }
+    if (blurFunc) {
+        ons[getOnName(blurEvent)] = function (...args) {
+            blurFunc(...args);
+            if (events && events[blurEvent]) {
+                events[blurEvent](params, ...args);
+            }
+        };
+    }
     return ons;
 }
 function getEditOns(renderOpts, params) {
@@ -171,59 +190,101 @@ function getEditOns(renderOpts, params) {
     const { name } = renderOpts;
     const { model } = column;
     const isImmediate = isImmediateCell(renderOpts, params);
-    return getComponentOns(renderOpts, params, (cellValue) => {
-        // 处理 model 值双向绑定
-        model.update = true;
-        model.value = cellValue;
-        if (isImmediate) {
-            setCellValue(row, column, cellValue);
-        }
-    }, (eventParams) => {
-        // 处理 change 事件相关逻辑
-        if (!isImmediate && (['VxeInput', 'VxeNumberInput', 'VxeTextarea', '$input', '$textarea'].includes(name))) {
-            const cellValue = eventParams.value;
+    return getComponentOns(renderOpts, params, {
+        model(cellValue) {
+            // 处理 model 值双向绑定
             model.update = true;
             model.value = cellValue;
-            $table.updateStatus(params, cellValue);
-        }
-        else {
-            $table.updateStatus(params);
+            if (isImmediate) {
+                setCellValue(row, column, cellValue);
+            }
+        },
+        change(eventParams) {
+            // 处理 change 事件相关逻辑
+            if (!isImmediate && name && (['VxeInput', 'VxeNumberInput', 'VxeTextarea', '$input', '$textarea'].includes(name))) {
+                const cellValue = eventParams.value;
+                model.update = true;
+                model.value = cellValue;
+                $table.updateStatus(params, cellValue);
+            }
+            else {
+                $table.updateStatus(params);
+            }
+        },
+        blur() {
+            if (isImmediate) {
+                $table.handleCellRuleUpdateStatus('blur', params);
+            }
+            else {
+                $table.handleCellRuleUpdateStatus('blur', params, model.value);
+            }
         }
     });
 }
 function getFilterOns(renderOpts, params, option) {
-    return getComponentOns(renderOpts, params, (value) => {
-        // 处理 model 值双向绑定
-        option.data = value;
-    }, () => {
-        handleConfirmFilter(params, !XEUtils.eqNull(option.data), option);
+    return getComponentOns(renderOpts, params, {
+        model(value) {
+            // 处理 model 值双向绑定
+            option.data = value;
+        },
+        change() {
+            handleConfirmFilter(params, !XEUtils.eqNull(option.data), option);
+        },
+        blur() {
+            handleConfirmFilter(params, !XEUtils.eqNull(option.data), option);
+        }
     });
 }
 function getNativeEditOns(renderOpts, params) {
     const { $table, row, column } = params;
     const { model } = column;
-    return getNativeElementOns(renderOpts, params, (evnt) => {
-        // 处理 model 值双向绑定
-        const cellValue = evnt.target.value;
-        if (isImmediateCell(renderOpts, params)) {
-            setCellValue(row, column, cellValue);
-        }
-        else {
-            model.update = true;
-            model.value = cellValue;
+    return getNativeElementOns(renderOpts, params, {
+        model(evnt) {
+            // 处理 model 值双向绑定
+            const targetEl = evnt.target;
+            if (targetEl) {
+                const cellValue = targetEl.value;
+                if (isImmediateCell(renderOpts, params)) {
+                    setCellValue(row, column, cellValue);
+                }
+                else {
+                    model.update = true;
+                    model.value = cellValue;
+                }
+            }
+        },
+        change(evnt) {
+            // 处理 change 事件相关逻辑
+            const targetEl = evnt.target;
+            if (targetEl) {
+                const cellValue = targetEl.value;
+                $table.updateStatus(params, cellValue);
+            }
+        },
+        blur(evnt) {
+            const targetEl = evnt.target;
+            if (targetEl) {
+                const cellValue = targetEl.value;
+                $table.updateStatus(params, cellValue);
+            }
         }
-    }, (evnt) => {
-        // 处理 change 事件相关逻辑
-        const cellValue = evnt.target.value;
-        $table.updateStatus(params, cellValue);
     });
 }
 function getNativeFilterOns(renderOpts, params, option) {
-    return getNativeElementOns(renderOpts, params, (evnt) => {
-        // 处理 model 值双向绑定
-        option.data = evnt.target.value;
-    }, () => {
-        handleConfirmFilter(params, !XEUtils.eqNull(option.data), option);
+    return getNativeElementOns(renderOpts, params, {
+        model(evnt) {
+            // 处理 model 值双向绑定
+            const targetEl = evnt.target;
+            if (targetEl) {
+                option.data = targetEl.value;
+            }
+        },
+        change() {
+            handleConfirmFilter(params, !XEUtils.eqNull(option.data), option);
+        },
+        blur() {
+            handleConfirmFilter(params, !XEUtils.eqNull(option.data), option);
+        }
     });
 }
 /**

package/es/table/src/body.js

@@ -357,6 +357,7 @@ function renderTdColumn(h, _vm, seq, rowid, fixedType, isOptimizeMode, rowLevel,
                 'fixed--width': !isAutoCellWidth,
                 'fixed--hidden': fixedHiddenColumn,
                 'is--padding': isCellPadding,
+                'is--progress': (fixedHiddenColumn && isAllOverflow) || isVNPreEmptyStatus,
                 'is--drag-cell': isRowDragCell && (isCrossDrag || isPeerDrag || !rowLevel),
                 'is--drag-disabled': isDisabledDrag,
                 'col--dirty': isDirty,

package/es/table/src/header.js

@@ -81,8 +81,10 @@ const renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) => {
         const showResizable = (XEUtils.isBoolean(column.resizable) ? column.resizable : (columnOpts.resizable || allResizable));
         const isAutoCellWidth = !column.resizeWidth && (column.minWidth === 'auto' || column.width === 'auto');
         let isVNPreEmptyStatus = false;
-        if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
-            isVNPreEmptyStatus = true;
+        if (!isGroup) {
+            if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
+                isVNPreEmptyStatus = true;
+            }
         }
         const tcStyle = {};
         if (hasEllipsis) {