vxe-table 4.1.20 → 4.2.0-beta.2

package/README.en.md

@@ -29,7 +29,7 @@ A [vue](https://www.npmjs.com/package/vue) based PC form component, support add,
 
 ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png)
 --- | --- | --- | --- | --- |
-Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | 8+ ✔ |
+Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
 
 ## Features
 
@@ -151,9 +151,7 @@ export default defineComponent({
 
 ## Docs
 
-💡 [User guide](https://github.com/xuliangzhan/vxe-table-demo)  
-👉 [View example](https://x-extends.github.io/vxe-table/#/table/base/basic)  
-👉 [View API](https://x-extends.github.io/vxe-table/#/table/api)
+👉 [Document](https://vxetable.cn)  
 
 ## Run the project
 

package/README.md

@@ -34,7 +34,7 @@
 
 ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png)
 --- | --- | --- | --- | --- |
-Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | 8+ ✔ |
+80+ ✔ | 80+ ✔ | 90+ ✔ | 75+ ✔ | 10+ ✔ |
 
 ## 功能点
 
@@ -157,8 +157,7 @@ export default defineComponent({
 ## 文档
 
 💡 [使用指南](https://github.com/xuliangzhan/vxe-table-demo)  
-👉 [查看演示](https://xuliangzhan_admin.gitee.io/vxe-table/) [👀备用地址](https://x-extends.github.io/vxe-table/#/table/base/basic)  
-👉 [查看文档](https://xuliangzhan_admin.gitee.io/vxe-table/#/table/api) [👀备用地址](https://x-extends.github.io/vxe-table/#/table/api)
+👉 [查看文档](https://vxetable.cn)  
 
 ## 运行项目
 

package/README.zh-TW.md

@@ -33,7 +33,7 @@
 
 ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png)
 --- | --- | --- | --- | --- |
-Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | 8+ ✔ |
+Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
 
 ## 功能點
 
@@ -154,9 +154,7 @@ export default defineComponent({
 
 ## 檔案
 
-💡 [使用指南](https://github.com/xuliangzhan/vxe-table-demo)  
-👉 [查看檔案](https://xuliangzhan_admin.gitee.io/vxe-table/) [👀備用地址1](https://x-extends.github.io/vxe-table/#/table/base/basic)  
-👉 [查看檔案](https://xuliangzhan_admin.gitee.io/vxe-table/#/table/api) [👀備用地址1](https://x-extends.github.io/vxe-table/#/table/api)
+👉 [查看檔案](https://vxetable.cn)  
 
 ## 運行項目
 

package/es/button/index.js

@@ -2,8 +2,8 @@ import VxeButtonComponent from './src/button';
 import { dynamicApp } from '../dynamics';
 export var Button = Object.assign(VxeButtonComponent, {
     install: function (app) {
-        dynamicApp.component(VxeButtonComponent.name, VxeButtonComponent);
         app.component(VxeButtonComponent.name, VxeButtonComponent);
     }
 });
+dynamicApp.component(VxeButtonComponent.name, VxeButtonComponent);
 export default Button;

package/es/checkbox/index.js

@@ -2,8 +2,8 @@ import VxeCheckboxComponent from './src/checkbox';
 import { dynamicApp } from '../dynamics';
 export var Checkbox = Object.assign(VxeCheckboxComponent, {
     install: function (app) {
-        dynamicApp.component(VxeCheckboxComponent.name, VxeCheckboxComponent);
         app.component(VxeCheckboxComponent.name, VxeCheckboxComponent);
     }
 });
+dynamicApp.component(VxeCheckboxComponent.name, VxeCheckboxComponent);
 export default Checkbox;

package/es/checkbox-group/index.js

@@ -2,8 +2,8 @@ import VxeCheckboxGroupComponent from '../checkbox/src/group';
 import { dynamicApp } from '../dynamics';
 export var CheckboxGroup = Object.assign(VxeCheckboxGroupComponent, {
     install: function (app) {
-        dynamicApp.component(VxeCheckboxGroupComponent.name, VxeCheckboxGroupComponent);
         app.component(VxeCheckboxGroupComponent.name, VxeCheckboxGroupComponent);
     }
 });
+dynamicApp.component(VxeCheckboxGroupComponent.name, VxeCheckboxGroupComponent);
 export default CheckboxGroup;

package/es/colgroup/index.js

@@ -2,11 +2,12 @@ import VxeTableColgroupComponent from '../table/src/group';
 import { dynamicApp } from '../dynamics';
 export var Colgroup = Object.assign(VxeTableColgroupComponent, {
     install: function (app) {
-        dynamicApp.component(VxeTableColgroupComponent.name, VxeTableColgroupComponent);
         app.component(VxeTableColgroupComponent.name, VxeTableColgroupComponent);
         // 兼容旧用法
-        dynamicApp.component('VxeTableColgroup', VxeTableColgroupComponent);
         app.component('VxeTableColgroup', VxeTableColgroupComponent);
     }
 });
+dynamicApp.component(VxeTableColgroupComponent.name, VxeTableColgroupComponent);
+// 兼容旧用法
+dynamicApp.component('VxeTableColgroup', VxeTableColgroupComponent);
 export default Colgroup;

package/es/column/index.js

@@ -2,11 +2,12 @@ import VxeTableColumnComponent from '../table/src/column';
 import { dynamicApp } from '../dynamics';
 export var Column = Object.assign(VxeTableColumnComponent, {
     install: function (app) {
-        dynamicApp.component(VxeTableColumnComponent.name, VxeTableColumnComponent);
         app.component(VxeTableColumnComponent.name, VxeTableColumnComponent);
         // 兼容旧用法
-        dynamicApp.component('VxeTableColumn', VxeTableColumnComponent);
         app.component('VxeTableColumn', VxeTableColumnComponent);
     }
 });
+dynamicApp.component(VxeTableColumnComponent.name, VxeTableColumnComponent);
+// 兼容旧用法
+dynamicApp.component('VxeTableColumn', VxeTableColumnComponent);
 export default Column;

package/es/edit/src/hook.js

@@ -17,9 +17,10 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from) {
 import { nextTick } from 'vue';
 import XEUtils from 'xe-utils';
 import { renderer } from '../../v-x-e-table';
-import { errLog, getLog, isEnableConf, warnLog } from '../../tools/utils';
+import { isEnableConf } from '../../tools/utils';
 import { getCellValue, setCellValue, getRowid } from '../../table/src/util';
 import { browse, removeClass, addClass } from '../../tools/dom';
+import { warnLog, errLog, getLog } from '../../tools/log';
 var tableEditMethodKeys = ['insert', 'insertAt', 'remove', 'removeCheckboxRow', 'removeRadioRow', 'removeCurrentRow', 'getRecordset', 'getInsertRecords', 'getRemoveRecords', 'getUpdateRecords', 'getActiveRecord', 'getSelectedCell', 'clearActived', 'clearSelected', 'isActiveByRow', 'setActiveRow', 'setActiveCell', 'setSelectCell'];
 var editHook = {
     setupTable: function ($xetable) {

package/es/export/index.js

@@ -29,10 +29,10 @@ export var Export = {
             }
         });
         VXETable.hooks.add('$tableExport', exportHook);
-        dynamicApp.component(ExportPanelComponent.name, ExportPanelComponent);
-        dynamicApp.component(ImportPanelComponent.name, ImportPanelComponent);
         app.component(ExportPanelComponent.name, ExportPanelComponent);
         app.component(ImportPanelComponent.name, ImportPanelComponent);
     }
 };
+dynamicApp.component(ExportPanelComponent.name, ExportPanelComponent);
+dynamicApp.component(ImportPanelComponent.name, ImportPanelComponent);
 export default Export;

package/es/export/src/hook.js

@@ -3,7 +3,8 @@ import XEUtils from 'xe-utils';
 import GlobalConfig from '../../v-x-e-table/src/conf';
 import { VXETable } from '../../v-x-e-table';
 import { isColumnInfo, mergeBodyMethod, getCellValue } from '../../table/src/util';
-import { errLog, warnLog, parseFile, formatText } from '../../tools/utils';
+import { parseFile, formatText } from '../../tools/utils';
+import { warnLog, errLog } from '../../tools/log';
 import { readLocalFile, handlePrint, saveLocalFile, createHtmlPage, getExportBlobByContent } from './util';
 var htmlCellElem;
 var csvBOM = '\ufeff';

package/es/export/src/util.js

@@ -2,7 +2,8 @@ import XEUtils from 'xe-utils';
 import GlobalConfig from '../../v-x-e-table/src/conf';
 import { VXETable } from '../../v-x-e-table';
 import { browse } from '../../tools/dom';
-import { getLog, parseFile, errLog } from '../../tools/utils';
+import { parseFile } from '../../tools/utils';
+import { errLog, getLog } from '../../tools/log';
 // 导入
 var fileForm;
 var fileInput;
@@ -16,10 +17,7 @@ export function createFrame() {
     return frame;
 }
 export function getExportBlobByContent(content, options) {
-    if (window.Blob) {
-        return new Blob([content], { type: "text/" + options.type + ";charset=utf-8;" });
-    }
-    return null;
+    return new Blob([content], { type: "text/" + options.type + ";charset=utf-8;" });
 }
 export function createHtmlPage(opts, content) {
     var style = opts.style;

package/es/filter/index.js

@@ -6,8 +6,8 @@ export var Filter = {
     Panel: PanelComponent,
     install: function (app) {
         VXETable.hooks.add('$tableFilter', filterHook);
-        dynamicApp.component(PanelComponent.name, PanelComponent);
         app.component(PanelComponent.name, PanelComponent);
     }
 };
+dynamicApp.component(PanelComponent.name, PanelComponent);
 export default Filter;

package/es/filter/src/hook.js

@@ -147,7 +147,7 @@ var tableFilterHook = {
              * @param {Event} evnt 事件
              */
             confirmFilterEvent: function (evnt) {
-                var filterStore = reactData.filterStore, scrollXLoad = reactData.scrollXLoad, scrollYLoad = reactData.scrollYLoad;
+                var filterStore = reactData.filterStore, oldScrollXLoad = reactData.scrollXLoad, oldScrollYLoad = reactData.scrollYLoad;
                 var filterOpts = computeFilterOpts.value;
                 var column = filterStore.column;
                 var property = column.property;
@@ -164,19 +164,26 @@ var tableFilterHook = {
                 if (!filterOpts.remote) {
                     $xetable.handleTableData(true);
                     $xetable.checkSelectionStatus();
-                    $xetable.updateFooter();
-                    if (scrollXLoad || scrollYLoad) {
-                        $xetable.clearScroll();
-                        if (scrollYLoad) {
-                            $xetable.updateScrollYSpace();
-                        }
-                    }
                 }
                 $xetable.dispatchEvent('filter-change', { column: column, property: property, values: values, datas: datas, filters: filterList, filterList: filterList }, evnt);
                 $xetable.closeFilter();
-                nextTick(function () {
-                    $xetable.recalculate();
+                $xetable.updateFooter().then(function () {
+                    var scrollXLoad = reactData.scrollXLoad, scrollYLoad = reactData.scrollYLoad;
+                    if ((oldScrollXLoad || scrollXLoad) || (oldScrollYLoad || scrollYLoad)) {
+                        if (oldScrollXLoad || scrollXLoad) {
+                            $xetable.updateScrollXSpace();
+                        }
+                        if (oldScrollYLoad || scrollYLoad) {
+                            $xetable.updateScrollYSpace();
+                        }
+                        return $xetable.refreshScroll();
+                    }
+                }).then(function () {
                     $xetable.updateCellAreas();
+                    return $xetable.recalculate(true);
+                }).then(function () {
+                    // 存在滚动行为未结束情况
+                    setTimeout(function () { return $xetable.recalculate(); }, 50);
                 });
             }
         };

package/es/footer/index.js

@@ -2,8 +2,8 @@ import VxeTableFooterComponent from './src/footer';
 import { dynamicApp } from '../dynamics';
 export var Footer = Object.assign(VxeTableFooterComponent, {
     install: function (app) {
-        dynamicApp.component(VxeTableFooterComponent.name, VxeTableFooterComponent);
         app.component(VxeTableFooterComponent.name, VxeTableFooterComponent);
     }
 });
+dynamicApp.component(VxeTableFooterComponent.name, VxeTableFooterComponent);
 export default Footer;

package/es/footer/src/footer.js

@@ -39,7 +39,7 @@ export default defineComponent({
         var $xetable = inject('$xetable', {});
         var xID = $xetable.xID, tableProps = $xetable.props, tableReactData = $xetable.reactData, tableInternalData = $xetable.internalData;
         var _a = $xetable.getRefMaps(), refTableHeader = _a.refTableHeader, refTableBody = _a.refTableBody, refValidTooltip = _a.refValidTooltip;
-        var computeTooltipOpts = $xetable.getComputeMaps().computeTooltipOpts;
+        var _b = $xetable.getComputeMaps(), computeTooltipOpts = _b.computeTooltipOpts, computeColumnOpts = _b.computeColumnOpts;
         var refElem = ref();
         var refFooterTable = ref();
         var refFooterColgroup = ref();
@@ -106,6 +106,7 @@ export default defineComponent({
             var visibleColumn = tableInternalData.visibleColumn;
             var scrollYLoad = tableReactData.scrollYLoad, overflowX = tableReactData.overflowX, scrollbarWidth = tableReactData.scrollbarWidth, currentColumn = tableReactData.currentColumn, mergeFooterList = tableReactData.mergeFooterList;
             var tooltipOpts = computeTooltipOpts.value;
+            var columnOpts = computeColumnOpts.value;
             // 如果是使用优化模式
             if (fixedType) {
                 if (scrollYLoad || allColumnFooterOverflow) {
@@ -244,7 +245,7 @@ export default defineComponent({
                                         _a['fixed--hidden'] = fixedHiddenColumn,
                                         _a['col--ellipsis'] = hasEllipsis,
                                         _a['col--current'] = currentColumn === column,
-                                        _a), getPropClass(footerClassName, params), getPropClass(footerCellClassName, params)] }, attrs), { style: footerCellStyle ? (XEUtils.isFunction(footerCellStyle) ? footerCellStyle(params) : footerCellStyle) : null }), tfOns), { key: columnKey ? column.id : $columnIndex }), [
+                                        _a), getPropClass(footerClassName, params), getPropClass(footerCellClassName, params)] }, attrs), { style: footerCellStyle ? (XEUtils.isFunction(footerCellStyle) ? footerCellStyle(params) : footerCellStyle) : null }), tfOns), { key: columnKey || columnOpts.useKey ? column.id : $columnIndex }), [
                                 h('div', {
                                     class: ['vxe-cell', {
                                             'c--title': showTitle,

package/es/form/index.js

@@ -2,8 +2,8 @@ import VxeFormComponent from './src/form';
 import { dynamicApp } from '../dynamics';
 export var Form = Object.assign(VxeFormComponent, {
     install: function (app) {
-        dynamicApp.component(VxeFormComponent.name, VxeFormComponent);
         app.component(VxeFormComponent.name, VxeFormComponent);
     }
 });
+dynamicApp.component(VxeFormComponent.name, VxeFormComponent);
 export default Form;

package/es/form/src/form-gather.js

@@ -1,5 +1,5 @@
-import { defineComponent, h, onUnmounted, inject, ref, onMounted, provide, nextTick } from 'vue';
-import { errLog } from '../../tools/utils';
+import { defineComponent, h, onUnmounted, inject, ref, reactive, onMounted, provide, nextTick } from 'vue';
+import { errLog } from '../../tools/log';
 import { createItem, watchItem, destroyItem, assemItem } from './util';
 import { formItemProps } from './form-item';
 export default defineComponent({
@@ -11,7 +11,7 @@ export default defineComponent({
         var $xeform = inject('$xeform', {});
         var formGather = inject('xeformgather', null);
         var defaultSlot = slots.default;
-        var formItem = createItem($xeform, props);
+        var formItem = reactive(createItem($xeform, props));
         var xeformitem = { formItem: formItem };
         formItem.children = [];
         provide('xeformgather', xeformitem);

package/es/form/src/form-item.js

@@ -9,7 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { defineComponent, h, onUnmounted, inject, ref, onMounted } from 'vue';
+import { defineComponent, h, onUnmounted, inject, ref, onMounted, reactive } from 'vue';
 import XEUtils from 'xe-utils';
 import GlobalConfig from '../../v-x-e-table/src/conf';
 import { VXETable } from '../../v-x-e-table';
@@ -42,7 +42,7 @@ export default defineComponent({
         var refElem = ref();
         var $xeform = inject('$xeform', {});
         var formGather = inject('xeformgather', null);
-        var formItem = createItem($xeform, props);
+        var formItem = reactive(createItem($xeform, props));
         formItem.slots = slots;
         watchItem(props, formItem);
         onMounted(function () {
@@ -115,9 +115,9 @@ export default defineComponent({
             }
             var ons = showTooltip ? {
                 onMouseenter: function (evnt) {
-                    $xeform.triggerHeaderHelpEvent(evnt, params);
+                    $xeform.triggerTitleTipEvent(evnt, params);
                 },
-                onMouseleave: $xeform.handleTargetLeaveEvent
+                onMouseleave: $xeform.handleTitleTipLeaveEvent
             } : {};
             return h('div', {
                 ref: refElem,

package/es/form/src/form.js

@@ -13,9 +13,10 @@ import { defineComponent, h, ref, resolveComponent, createCommentVNode, provide,
 import XEUtils from 'xe-utils';
 import GlobalConfig from '../../v-x-e-table/src/conf';
 import { VXETable } from '../../v-x-e-table';
-import { errLog, getFuncText, isEnableConf, eqEmptyValue } from '../../tools/utils';
+import { getFuncText, isEnableConf, eqEmptyValue } from '../../tools/utils';
+import { errLog } from '../../tools/log';
 import { scrollToView } from '../../tools/dom';
-import { createItem } from './util';
+import { createItem, handleFieldOrItem } from './util';
 import { renderTitle } from './render';
 import { useSize } from '../../hooks/size';
 var Rule = /** @class */ (function () {
@@ -118,7 +119,6 @@ export default defineComponent({
         });
         var internalData = reactive({
             tooltipTimeout: null,
-            tooltipActive: false,
             tooltipStore: {
                 item: null,
                 visible: false
@@ -130,22 +130,8 @@ export default defineComponent({
         var computeValidOpts = computed(function () {
             return Object.assign({}, GlobalConfig.form.validConfig, props.validConfig);
         });
-        var computeTooltipOpts = ref();
-        var handleTooltipLeaveMethod = function () {
-            var tooltipOpts = computeTooltipOpts.value;
-            setTimeout(function () {
-                if (!internalData.tooltipActive) {
-                    formMethods.closeTooltip();
-                }
-            }, tooltipOpts.leaveDelay);
-            return false;
-        };
-        computeTooltipOpts = computed(function () {
-            var opts = Object.assign({ leaveDelay: 300 }, GlobalConfig.form.tooltipConfig, props.tooltipConfig);
-            if (opts.enterable) {
-                opts.leaveMethod = handleTooltipLeaveMethod;
-            }
-            return opts;
+        var computeTooltipOpts = computed(function () {
+            return Object.assign({}, GlobalConfig.tooltip, GlobalConfig.form.tooltipConfig, props.tooltipConfig);
         });
         var refMaps = {
             refElem: refElem
@@ -200,6 +186,10 @@ export default defineComponent({
             }, { children: 'children' });
             return itemList;
         };
+        var getItemByField = function (field) {
+            var rest = XEUtils.findTree(reactData.formItems, function (item) { return item.field === field; }, { children: 'children' });
+            return rest ? rest.item : null;
+        };
         var getCollapseStatus = function () {
             return reactData.collapseAll;
         };
@@ -215,16 +205,15 @@ export default defineComponent({
             formMethods.dispatchEvent('toggle-collapse', { status: status, collapse: status, data: props.data }, evnt);
             formMethods.dispatchEvent('collapse', { status: status, collapse: status, data: props.data }, evnt);
         };
-        var clearValidate = function (field) {
-            var itemList = getItems();
-            if (field) {
-                var item = itemList.find(function (item) { return item.field === field; });
+        var clearValidate = function (fieldOrItem) {
+            if (fieldOrItem) {
+                var item = handleFieldOrItem($xeform, fieldOrItem);
                 if (item) {
                     item.showError = false;
                 }
             }
             else {
-                itemList.forEach(function (item) {
+                getItems().forEach(function (item) {
                     item.showError = false;
                 });
             }
@@ -255,10 +244,9 @@ export default defineComponent({
             formMethods.dispatchEvent('reset', { data: props.data }, evnt);
         };
         var handleFocus = function (fields) {
-            var itemList = getItems();
             var el = refElem.value;
             fields.some(function (property, index) {
-                var item = itemList.find(function (item) { return item.field === property; });
+                var item = getItemByField(property);
                 if (item && isEnableConf(item.itemRender)) {
                     var itemRender = item.itemRender;
                     var compConf = VXETable.renderer.get(itemRender.name);
@@ -411,8 +399,9 @@ export default defineComponent({
             clearValidate();
             return beginValidate(getItems(), '', callback);
         };
-        var validateField = function (field, callback) {
-            return beginValidate(getItems().filter(function (item) { return item.field === field; }), '', callback);
+        var validateField = function (fieldOrItem, callback) {
+            var item = handleFieldOrItem($xeform, fieldOrItem);
+            return beginValidate(item ? [item] : [], '', callback);
         };
         var submitEvent = function (evnt) {
             evnt.preventDefault();
@@ -439,7 +428,7 @@ export default defineComponent({
             }
             return nextTick();
         };
-        var triggerHeaderHelpEvent = function (evnt, params) {
+        var triggerTitleTipEvent = function (evnt, params) {
             var item = params.item;
             var tooltipStore = internalData.tooltipStore;
             var $tooltip = refTooltip.value;
@@ -447,8 +436,9 @@ export default defineComponent({
             var content = (overflowElem.textContent || '').trim();
             var isCellOverflow = overflowElem.scrollWidth > overflowElem.clientWidth;
             clearTimeout(internalData.tooltipTimeout);
-            internalData.tooltipActive = true;
-            closeTooltip();
+            if (tooltipStore.item !== item) {
+                closeTooltip();
+            }
             if (content && isCellOverflow) {
                 Object.assign(tooltipStore, {
                     item: item,
@@ -459,13 +449,16 @@ export default defineComponent({
                 }
             }
         };
-        var handleTargetLeaveEvent = function () {
+        var handleTitleTipLeaveEvent = function () {
             var tooltipOpts = computeTooltipOpts.value;
-            internalData.tooltipActive = false;
+            var $tooltip = refTooltip.value;
+            if ($tooltip) {
+                $tooltip.setActived(false);
+            }
             if (tooltipOpts.enterable) {
                 internalData.tooltipTimeout = setTimeout(function () {
-                    var $tooltip = refTooltip.value;
-                    if ($tooltip && !$tooltip.reactData.isHover) {
+                    $tooltip = refTooltip.value;
+                    if ($tooltip && !$tooltip.isActived()) {
                         closeTooltip();
                     }
                 }, tooltipOpts.leaveDelay);
@@ -488,8 +481,7 @@ export default defineComponent({
                 })
                     .catch(function (_a) {
                     var rule = _a.rule;
-                    var itemList = getItems();
-                    var item = itemList.find(function (item) { return item.field === property; });
+                    var item = getItemByField(property);
                     if (item) {
                         item.showError = true;
                         item.errRule = rule;
@@ -501,7 +493,7 @@ export default defineComponent({
             var data = props.data, rules = props.rules, allTitleOverflow = props.titleOverflow;
             var collapseAll = reactData.collapseAll;
             var validOpts = computeValidOpts.value;
-            return itemList.map(function (item, index) {
+            return itemList.map(function (item) {
                 var slots = item.slots, title = item.title, visible = item.visible, folding = item.folding, visibleMethod = item.visibleMethod, field = item.field, collapseNode = item.collapseNode, itemRender = item.itemRender, showError = item.showError, errRule = item.errRule, className = item.className, titleOverflow = item.titleOverflow, children = item.children;
                 var compConf = isEnableConf(itemRender) ? VXETable.renderer.get(itemRender.name) : null;
                 var defaultSlot = slots ? slots.default : null;
@@ -571,9 +563,9 @@ export default defineComponent({
                 }
                 var ons = showTooltip ? {
                     onMouseenter: function (evnt) {
-                        triggerHeaderHelpEvent(evnt, params);
+                        triggerTitleTipEvent(evnt, params);
                     },
-                    onMouseleave: handleTargetLeaveEvent
+                    onMouseleave: handleTitleTipLeaveEvent
                 } : {};
                 return h('div', {
                     class: ['vxe-form--item', item.id, span ? "vxe-col--" + span + " is--span" : '', className ? (XEUtils.isFunction(className) ? className(params) : className) : '', {
@@ -583,7 +575,7 @@ export default defineComponent({
                             'is--active': !itemVisibleMethod || itemVisibleMethod(params),
                             'is--error': showError
                         }],
-                    key: index
+                    key: item.id
                 }, [
                     h('div', {
                         class: 'vxe-form--item-inner'
@@ -611,13 +603,14 @@ export default defineComponent({
             updateStatus: updateStatus,
             toggleCollapse: toggleCollapse,
             getItems: getItems,
+            getItemByField: getItemByField,
             closeTooltip: closeTooltip
         };
         var formPrivateMethods = {
             callSlot: callSlot,
             toggleCollapseEvent: toggleCollapseEvent,
-            triggerHeaderHelpEvent: triggerHeaderHelpEvent,
-            handleTargetLeaveEvent: handleTargetLeaveEvent
+            triggerTitleTipEvent: triggerTitleTipEvent,
+            handleTitleTipLeaveEvent: handleTitleTipLeaveEvent
         };
         Object.assign($xeform, formMethods, formPrivateMethods);
         watch(function () { return reactData.staticItems; }, function (value) {

package/es/form/src/render.js

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { h, resolveComponent } from 'vue';
 import GlobalConfig from '../../v-x-e-table/src/conf';
 import { VXETable } from '../../v-x-e-table';
@@ -22,7 +33,9 @@ function renderSuffixIcon(titleSuffix) {
 }
 export function renderTitle($xeform, item) {
     var data = $xeform.props.data;
+    var computeTooltipOpts = $xeform.getComputeMaps().computeTooltipOpts;
     var slots = item.slots, field = item.field, itemRender = item.itemRender, titlePrefix = item.titlePrefix, titleSuffix = item.titleSuffix;
+    var tooltipOpts = computeTooltipOpts.value;
     var compConf = isEnableConf(itemRender) ? VXETable.renderer.get(itemRender.name) : null;
     var params = { data: data, property: field, item: item, $form: $xeform };
     var titleSlot = slots ? slots.title : null;
@@ -30,11 +43,7 @@ export function renderTitle($xeform, item) {
     var titVNs = [];
     if (titlePrefix) {
         titVNs.push((titlePrefix.content || titlePrefix.message)
-            ? h(resolveComponent('vxe-tooltip'), {
-                content: getFuncText(titlePrefix.content || titlePrefix.message),
-                enterable: titlePrefix.enterable,
-                theme: titlePrefix.theme
-            }, {
+            ? h(resolveComponent('vxe-tooltip'), __assign(__assign(__assign({}, tooltipOpts), titlePrefix), { content: getFuncText(titlePrefix.content || titlePrefix.message) }), {
                 default: function () { return renderPrefixIcon(titlePrefix); }
             })
             : renderPrefixIcon(titlePrefix));
@@ -48,11 +57,7 @@ export function renderTitle($xeform, item) {
     var fixVNs = [];
     if (titleSuffix) {
         fixVNs.push((titleSuffix.content || titleSuffix.message)
-            ? h(resolveComponent('vxe-tooltip'), {
-                content: getFuncText(titleSuffix.content || titleSuffix.message),
-                enterable: titleSuffix.enterable,
-                theme: titleSuffix.theme
-            }, {
+            ? h(resolveComponent('vxe-tooltip'), __assign(__assign(__assign({}, tooltipOpts), titleSuffix), { content: getFuncText(titleSuffix.content || titleSuffix.message) }), {
                 default: function () { return renderSuffixIcon(titleSuffix); }
             })
             : renderSuffixIcon(titleSuffix));

package/es/form/src/util.js

@@ -7,6 +7,12 @@ export function isFormItem(item) {
 export function createItem($xeform, _vm) {
     return isFormItem(_vm) ? _vm : new ItemInfo($xeform, _vm);
 }
+export var handleFieldOrItem = function ($xeform, fieldOrItem) {
+    if (fieldOrItem) {
+        return XEUtils.isString(fieldOrItem) ? $xeform.getItemByField(fieldOrItem) : fieldOrItem;
+    }
+    return null;
+};
 export function watchItem(props, formItem) {
     Object.keys(props).forEach(function (name) {
         watch(function () { return props[name]; }, function (value) {

package/es/form-gather/index.js

@@ -2,8 +2,8 @@ import VxeFormGatherComponent from '../form/src/form-gather';
 import { dynamicApp } from '../dynamics';
 export var FormGather = Object.assign(VxeFormGatherComponent, {
     install: function (app) {
-        dynamicApp.component(VxeFormGatherComponent.name, VxeFormGatherComponent);
         app.component(VxeFormGatherComponent.name, VxeFormGatherComponent);
     }
 });
+dynamicApp.component(VxeFormGatherComponent.name, VxeFormGatherComponent);
 export default FormGather;

package/es/form-item/index.js

@@ -2,8 +2,8 @@ import VxeFormItemComponent from '../form/src/form-item';
 import { dynamicApp } from '../dynamics';
 export var FormItem = Object.assign(VxeFormItemComponent, {
     install: function (app) {
-        dynamicApp.component(VxeFormItemComponent.name, VxeFormItemComponent);
         app.component(VxeFormItemComponent.name, VxeFormItemComponent);
     }
 });
+dynamicApp.component(VxeFormItemComponent.name, VxeFormItemComponent);
 export default FormItem;

package/es/grid/index.js

@@ -2,8 +2,8 @@ import VxeGridComponent from './src/grid';
 import { dynamicApp } from '../dynamics';
 export var Grid = Object.assign(VxeGridComponent, {
     install: function (app) {
-        dynamicApp.component(VxeGridComponent.name, VxeGridComponent);
         app.component(VxeGridComponent.name, VxeGridComponent);
     }
 });
+dynamicApp.component(VxeGridComponent.name, VxeGridComponent);
 export default Grid;