vxe-table 3.12.12 → 3.12.14

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/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) {

package/es/table/src/methods.js

@@ -6041,8 +6041,8 @@ const Methods = {
         const $xeTable = this;
         const sortOpts = $xeTable.computeSortOpts;
         const { multiple, allowClear } = sortOpts;
-        const { field, sortable, remoteSort } = column;
-        if (sortable || remoteSort) {
+        const { field, sortable } = column;
+        if (sortable || column.remoteSort) {
             if (!order || column.order === order) {
                 if (allowClear) {
                     $xeTable.clearSort(multiple ? column : null);
@@ -6054,6 +6054,34 @@ const Methods = {
             $xeTable.handleColumnSortEvent(evnt, column);
         }
     },
+    handleCellRuleUpdateStatus(type, cellParams, cellValue) {
+        const $xeTable = this;
+        const reactData = $xeTable;
+        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 $xeTable.$nextTick();
+    },
     /**
      * 表头单元格按下事件
      */
@@ -8341,33 +8369,12 @@ const Methods = {
      * 如果单元格配置了校验规则，则会进行校验
      */
     updateStatus(slotParams, cellValue) {
-        const customVal = !XEUtils.isUndefined(cellValue);
+        const $xeTable = this;
+        const props = $xeTable;
         return this.$nextTick().then(() => {
-            const { $refs, editRules, validStore } = this;
-            const refTableBody = $refs.refTableBody;
-            if (slotParams && refTableBody && editRules) {
-                const { row, column } = slotParams;
-                const type = 'change';
-                if (this.hasCellRules) {
-                    if (this.hasCellRules(type, row, column)) {
-                        const cell = this.getCellElement(row, column);
-                        if (cell) {
-                            return this.validCellRules(type, row, column, cellValue)
-                                .then(() => {
-                                if (customVal && validStore.visible) {
-                                    setCellValue(row, column, cellValue);
-                                }
-                                this.clearValidate(row, column);
-                            })
-                                .catch(({ rule }) => {
-                                if (customVal) {
-                                    setCellValue(row, column, cellValue);
-                                }
-                                this.showValidTooltip({ rule, row, column, cell });
-                            });
-                        }
-                    }
-                }
+            const { editRules } = props;
+            if (slotParams && editRules) {
+                return $xeTable.handleCellRuleUpdateStatus('change', slotParams, cellValue);
             }
         });
     },

package/es/table/src/table.js

@@ -115,7 +115,7 @@ const renderDragTipContents = (h, $xeTable) => {
 };
 const renderDragTip = (h, $xeTable) => {
     const reactData = $xeTable;
-    const { dragRow } = reactData;
+    const { dragRow, dragCol } = reactData;
     const rowOpts = $xeTable.computeRowOpts;
     const columnOpts = $xeTable.computeColumnOpts;
     const rowDragOpts = $xeTable.computeRowDragOpts;
@@ -136,31 +136,33 @@ const renderDragTip = (h, $xeTable) => {
                         'is--guides': columnDragOpts.showGuidesStatus
                     }]
             }),
-            h('div', {
-                ref: 'refDragTipElem',
-                class: 'vxe-table--drag-sort-tip'
-            }, [
-                h('div', {
-                    class: 'vxe-table--drag-sort-tip-wrapper'
+            (dragRow && rowDragOpts.showDragTip) || (dragCol && columnDragOpts.showDragTip)
+                ? h('div', {
+                    ref: 'refDragTipElem',
+                    class: 'vxe-table--drag-sort-tip'
                 }, [
                     h('div', {
-                        class: 'vxe-table--drag-sort-tip-status'
+                        class: 'vxe-table--drag-sort-tip-wrapper'
                     }, [
-                        h('span', {
-                            class: ['vxe-table--drag-sort-tip-normal-status', dragRow ? getIcon().TABLE_DRAG_STATUS_ROW : getIcon().TABLE_DRAG_STATUS_COLUMN]
-                        }),
-                        h('span', {
-                            class: ['vxe-table--drag-sort-tip-sub-status', getIcon().TABLE_DRAG_STATUS_SUB_ROW]
-                        }),
-                        h('span', {
-                            class: ['vxe-table--drag-sort-tip-disabled-status', getIcon().TABLE_DRAG_DISABLED]
-                        })
-                    ]),
-                    h('div', {
-                        class: 'vxe-table--drag-sort-tip-content'
-                    }, renderDragTipContents(h, $xeTable))
+                        h('div', {
+                            class: 'vxe-table--drag-sort-tip-status'
+                        }, [
+                            h('span', {
+                                class: ['vxe-table--drag-sort-tip-normal-status', dragRow ? getIcon().TABLE_DRAG_STATUS_ROW : getIcon().TABLE_DRAG_STATUS_COLUMN]
+                            }),
+                            h('span', {
+                                class: ['vxe-table--drag-sort-tip-sub-status', getIcon().TABLE_DRAG_STATUS_SUB_ROW]
+                            }),
+                            h('span', {
+                                class: ['vxe-table--drag-sort-tip-disabled-status', getIcon().TABLE_DRAG_DISABLED]
+                            })
+                        ]),
+                        h('div', {
+                            class: 'vxe-table--drag-sort-tip-content'
+                        }, renderDragTipContents(h, $xeTable))
+                    ])
                 ])
-            ])
+                : renderEmptyElement($xeTable)
         ]);
     }
     return renderEmptyElement($xeTable);
@@ -552,6 +554,12 @@ export default {
                 isHeader: false,
                 isFooter: false
             },
+            rowHeightStore: {
+                default: 48,
+                medium: 44,
+                small: 40,
+                mini: 36
+            },
             scrollVMLoading: false,
             calcCellHeightFlag: 0,
             resizeHeightFlag: 0,
@@ -647,12 +655,9 @@ export default {
             return this.computeRowHeightMaps;
         },
         computeRowHeightMaps() {
-            return {
-                default: 48,
-                medium: 44,
-                small: 40,
-                mini: 36
-            };
+            const $xeTable = this;
+            const reactData = $xeTable;
+            return reactData.rowHeightStore;
         },
         computeDefaultRowHeight() {
             const $xeTable = this;
@@ -1363,9 +1368,27 @@ export default {
     mounted() {
         const $xeTable = this;
         const props = $xeTable;
+        const reactData = $xeTable;
+        const { rowHeightStore } = reactData;
+        const varEl = $xeTable.$refs.refVarElem;
         const columnOpts = $xeTable.computeColumnOpts;
         const rowOpts = $xeTable.computeRowOpts;
         const customOpts = $xeTable.computeCustomOpts;
+        if (varEl) {
+            const [defEl, mediumEl, smallEl, miniEl] = varEl.children;
+            if (defEl) {
+                rowHeightStore.default = defEl.clientHeight;
+            }
+            if (mediumEl) {
+                rowHeightStore.medium = mediumEl.clientHeight;
+            }
+            if (smallEl) {
+                rowHeightStore.small = smallEl.clientHeight;
+            }
+            if (miniEl) {
+                rowHeightStore.mini = miniEl.clientHeight;
+            }
+        }
         if (columnOpts.drag || rowOpts.drag || customOpts.allowSort) {
             initTpImg();
         }
@@ -1516,6 +1539,23 @@ export default {
                 class: 'vxe-table-slots',
                 ref: 'hideColumn'
             }, this.$slots.default),
+            h('div', {
+                ref: 'refVarElem',
+                class: 'vxe-table-vars'
+            }, [
+                h('div', {
+                    class: 'vxe-table-var-default'
+                }),
+                h('div', {
+                    class: 'vxe-table-var-medium'
+                }),
+                h('div', {
+                    class: 'vxe-table-var-small'
+                }),
+                h('div', {
+                    class: 'vxe-table-var-mini'
+                })
+            ]),
             h('div', {
                 key: 'tw',
                 class: 'vxe-table--render-wrapper'

package/es/table/style.css

@@ -1682,6 +1682,29 @@
   display: none;
 }
 
+.vxe-table-vars {
+  height: 0;
+  width: 0;
+  visibility: hidden;
+  overflow: hidden;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  pointer-events: none;
+}
+.vxe-table-vars .vxe-table-var-default {
+  height: var(--vxe-ui-table-row-height-default);
+}
+.vxe-table-vars .vxe-table-var-medium {
+  height: var(--vxe-ui-table-row-height-medium);
+}
+.vxe-table-vars .vxe-table-var-small {
+  height: var(--vxe-ui-table-row-height-small);
+}
+.vxe-table-vars .vxe-table-var-mini {
+  height: var(--vxe-ui-table-row-height-mini);
+}
+
 .vxe-table--print-frame {
   position: fixed;
   bottom: -100%;
@@ -2638,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);
 }
@@ -2663,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);
 }
@@ -2688,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 {
@@ -3265,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;