vxe-table 4.2.0-beta.0 → 4.2.0-beta.4

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/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/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/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/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-item.js

@@ -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

@@ -119,7 +119,6 @@ export default defineComponent({
         });
         var internalData = reactive({
             tooltipTimeout: null,
-            tooltipActive: false,
             tooltipStore: {
                 item: null,
                 visible: false
@@ -131,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
@@ -443,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;
@@ -451,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,
@@ -463,10 +449,9 @@ export default defineComponent({
                 }
             }
         };
-        var handleTargetLeaveEvent = function () {
+        var handleTitleTipLeaveEvent = function () {
             var tooltipOpts = computeTooltipOpts.value;
             var $tooltip = refTooltip.value;
-            internalData.tooltipActive = false;
             if ($tooltip) {
                 $tooltip.setActived(false);
             }
@@ -508,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;
@@ -578,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) : '', {
@@ -590,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'
@@ -624,8 +609,8 @@ export default defineComponent({
         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-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;

package/es/header/index.js

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

package/es/input/index.js

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

package/es/list/index.js

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

package/es/menu/index.js

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

package/es/modal/index.js

@@ -98,9 +98,9 @@ var ModalController = {
 export var modal = ModalController;
 export var Modal = Object.assign(VxeModalComponent, {
     install: function (app) {
-        dynamicApp.component(VxeModalComponent.name, VxeModalComponent);
         app.component(VxeModalComponent.name, VxeModalComponent);
         VXETable.modal = ModalController;
     }
 });
+dynamicApp.component(VxeModalComponent.name, VxeModalComponent);
 export default Modal;

package/es/optgroup/index.js

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

package/es/option/index.js

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

package/es/pager/index.js

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

package/es/pulldown/index.js

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

package/es/radio/index.js

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

package/es/radio-button/index.js

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

package/es/radio-group/index.js

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

package/es/select/index.js

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

package/es/select/src/select.js

@@ -27,10 +27,13 @@ export default defineComponent({
         optionProps: Object,
         optionGroups: Array,
         optionGroupProps: Object,
+        optionConfig: Object,
         className: [String, Function],
         size: { type: String, default: function () { return GlobalConfig.select.size || GlobalConfig.size; } },
         emptyText: String,
+        // 已废弃，被 option-config.keyField 替换
         optionId: { type: String, default: function () { return GlobalConfig.select.optionId; } },
+        // 已废弃，被 option-config.useKey 替换
         optionKey: Boolean,
         transfer: { type: Boolean, default: function () { return GlobalConfig.select.transfer; } }
     },
@@ -95,6 +98,9 @@ export default defineComponent({
             var groupPropsOpts = computeGroupPropsOpts.value;
             return groupPropsOpts.options || 'options';
         });
+        var computeOptionOpts = computed(function () {
+            return Object.assign({}, GlobalConfig.select.optionConfig, props.optionConfig);
+        });
         var computeIsGroup = computed(function () {
             return reactData.fullGroupList.some(function (item) { return item.options && item.options.length; });
         });
@@ -151,7 +157,8 @@ export default defineComponent({
             return getSelectLabel(modelValue);
         });
         var getOptkey = function () {
-            return props.optionId || '_X_ID';
+            var optionOpts = computeOptionOpts.value;
+            return optionOpts.keyField || props.optionId || '_X_OPTION_KEY';
         };
         var getOptid = function (option) {
             var optid = option[getOptkey()];
@@ -537,9 +544,11 @@ export default defineComponent({
         var renderOption = function (list, group) {
             var optionKey = props.optionKey, modelValue = props.modelValue, multiple = props.multiple;
             var currentValue = reactData.currentValue;
+            var optionOpts = computeOptionOpts.value;
             var labelField = computeLabelField.value;
             var valueField = computeValueField.value;
             var isGroup = computeIsGroup.value;
+            var useKey = optionOpts.useKey;
             return list.map(function (option, cIndex) {
                 var slots = option.slots, className = option.className;
                 var isVisible = !isGroup || isOptionVisible(option);
@@ -548,7 +557,7 @@ export default defineComponent({
                 var optid = getOptid(option);
                 var defaultSlot = slots ? slots.default : null;
                 return isVisible ? h('div', {
-                    key: optionKey ? optid : cIndex,
+                    key: useKey || optionKey ? optid : cIndex,
                     class: ['vxe-select-option', className ? (XEUtils.isFunction(className) ? className({ option: option, $select: $xeselect }) : className) : '', {
                             'is--disabled': isDisabled,
                             'is--selected': multiple ? (modelValue && modelValue.indexOf(optionValue) > -1) : modelValue === optionValue,
@@ -579,15 +588,17 @@ export default defineComponent({
         var renderOptgroup = function () {
             var optionKey = props.optionKey;
             var visibleGroupList = reactData.visibleGroupList;
+            var optionOpts = computeOptionOpts.value;
             var groupLabelField = computeGroupLabelField.value;
             var groupOptionsField = computeGroupOptionsField.value;
+            var useKey = optionOpts.useKey;
             return visibleGroupList.map(function (group, gIndex) {
                 var slots = group.slots, className = group.className;
                 var optid = getOptid(group);
                 var isGroupDisabled = group.disabled;
                 var defaultSlot = slots ? slots.default : null;
                 return h('div', {
-                    key: optionKey ? optid : gIndex,
+                    key: useKey || optionKey ? optid : gIndex,
                     class: ['vxe-optgroup', className ? (XEUtils.isFunction(className) ? className({ option: group, $select: $xeselect }) : className) : '', {
                             'is--disabled': isGroupDisabled
                         }],

package/es/select/style.css

@@ -155,7 +155,7 @@
 
 .vxe-select-option {
   padding: 0 10px;
-  max-width: 400px;
+  max-width: 600px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;