vxe-table 4.10.11 → 4.10.12

package/es/table/render/index.js

@@ -93,10 +93,11 @@ function getCellLabelVNs(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) {
@@ -118,15 +119,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
@@ -134,10 +144,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) {
@@ -165,6 +176,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) {
@@ -172,59 +191,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/table.js

@@ -5375,34 +5375,10 @@ export default defineComponent({
              * 如果单元格配置了校验规则，则会进行校验
              */
             updateStatus(slotParams, cellValue) {
-                const customVal = !XEUtils.isUndefined(cellValue);
                 return nextTick().then(() => {
                     const { editRules } = props;
-                    const { validStore } = reactData;
-                    const tableBody = refTableBody.value;
-                    if (slotParams && tableBody && editRules) {
-                        const { row, column } = slotParams;
-                        const type = 'change';
-                        if ($xeTable.hasCellRules) {
-                            if ($xeTable.hasCellRules(type, row, column)) {
-                                const cell = tableMethods.getCellElement(row, column);
-                                if (cell) {
-                                    return $xeTable.validCellRules(type, row, column, cellValue)
-                                        .then(() => {
-                                        if (customVal && validStore.visible) {
-                                            setCellValue(row, column, cellValue);
-                                        }
-                                        $xeTable.clearValidate(row, column);
-                                    })
-                                        .catch(({ rule }) => {
-                                        if (customVal) {
-                                            setCellValue(row, column, cellValue);
-                                        }
-                                        $xeTable.showValidTooltip({ rule, row, column, cell });
-                                    });
-                                }
-                            }
-                        }
+                    if (slotParams && editRules) {
+                        return $xeTable.handleCellRuleUpdateStatus('change', slotParams, cellValue);
                     }
                 });
             },
@@ -7741,6 +7717,32 @@ export default defineComponent({
                     $xeTable.handleColumnSortEvent(evnt, column);
                 }
             },
+            handleCellRuleUpdateStatus(type, cellParams, cellValue) {
+                const { validStore } = reactData;
+                const { row, column } = cellParams;
+                if ($xeTable.hasCellRules) {
+                    if ($xeTable.hasCellRules(type, row, column)) {
+                        const cell = $xeTable.getCellElement(row, column);
+                        if (cell) {
+                            const customVal = !XEUtils.isUndefined(cellValue);
+                            return $xeTable.validCellRules(type, row, column, cellValue)
+                                .then(() => {
+                                if (customVal && validStore.visible) {
+                                    setCellValue(row, column, cellValue);
+                                }
+                                $xeTable.clearValidate(row, column);
+                            })
+                                .catch(({ rule }) => {
+                                if (customVal) {
+                                    setCellValue(row, column, cellValue);
+                                }
+                                $xeTable.showValidTooltip({ rule, row, column, cell });
+                            });
+                        }
+                    }
+                }
+                return nextTick();
+            },
             /**
              * 表头单元格按下事件
              */

package/es/table/style.css

@@ -2661,6 +2661,9 @@
 .vxe-table--render-default.size--medium .vxe-cell .vxe-default-input[type=date]::-webkit-inner-spin-button {
   margin-top: 3px;
 }
+.vxe-table--render-default.size--medium .vxe-cell--valid-error-tip {
+  padding: 0 var(--vxe-ui-table-cell-padding-medium);
+}
 .vxe-table--render-default.size--small {
   font-size: var(--vxe-ui-font-size-small);
 }
@@ -2686,6 +2689,9 @@
 .vxe-table--render-default.size--small .vxe-cell .vxe-default-input[type=date]::-webkit-inner-spin-button {
   margin-top: 2px;
 }
+.vxe-table--render-default.size--small .vxe-cell--valid-error-tip {
+  padding: 0 var(--vxe-ui-table-cell-padding-small);
+}
 .vxe-table--render-default.size--mini {
   font-size: var(--vxe-ui-font-size-mini);
 }
@@ -2711,6 +2717,9 @@
 .vxe-table--render-default.size--mini .vxe-cell .vxe-default-input[type=date]::-webkit-inner-spin-button {
   margin-top: 1px;
 }
+.vxe-table--render-default.size--mini .vxe-cell--valid-error-tip {
+  padding: 0 var(--vxe-ui-table-cell-padding-mini);
+}
 .vxe-table--render-default .vxe-header--column.is--padding .vxe-cell,
 .vxe-table--render-default .vxe-body--column.is--padding .vxe-cell,
 .vxe-table--render-default .vxe-footer--column.is--padding .vxe-cell {
@@ -3288,8 +3297,7 @@
   transform: translateX(-50%);
   text-align: left;
   z-index: 4;
-  padding-left: var(--vxe-ui-table-cell-padding-left);
-  padding-right: var(--vxe-ui-table-cell-padding-right);
+  padding: 0 var(--vxe-ui-table-cell-padding-default);
 }
 .vxe-table--render-default .vxe-body--column .vxe-cell--valid-error-wrapper {
   display: inline-block;