vxe-pc-ui 3.16.0 → 3.16.1

package/lib/select/src/select.js

@@ -0,0 +1,2112 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _comp = require("../../ui/src/comp");
+var _xeUtils = _interopRequireDefault(require("xe-utils"));
+var _ui = require("../../ui");
+var _dom = require("../../ui/src/dom");
+var _utils = require("../../ui/src/utils");
+var _vn = require("../../ui/src/vn");
+var _log = require("../../ui/src/log");
+var _input = _interopRequireDefault(require("../../input/src/input"));
+var _button = _interopRequireDefault(require("../../button/src/button"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var _createComponentLog = (0, _log.createComponentLog)('select'),
+  errLog = _createComponentLog.errLog;
+function isOptionVisible(option) {
+  return option.visible !== false;
+}
+function getOptUniqueId() {
+  return _xeUtils.default.uniqueId('opt_');
+}
+function createReactData() {
+  return {
+    initialized: false,
+    scrollYLoad: false,
+    bodyHeight: 0,
+    topSpaceHeight: 0,
+    optList: [],
+    staticOptions: [],
+    reactFlag: 0,
+    currentOption: null,
+    searchValue: '',
+    searchLoading: false,
+    panelIndex: 0,
+    panelStyle: {},
+    panelPlacement: null,
+    triggerFocusPanel: false,
+    visiblePanel: false,
+    isAniVisible: false,
+    isActivated: false
+  };
+}
+function createInternalData() {
+  return {
+    // isLoaded: false,
+    synchData: [],
+    fullData: [],
+    afterVisibleList: [],
+    optAddMaps: {},
+    optGroupKeyMaps: {},
+    optFullValMaps: {},
+    remoteValMaps: {},
+    lastScrollLeft: 0,
+    lastScrollTop: 0,
+    scrollYStore: {
+      startIndex: 0,
+      endIndex: 0,
+      visibleSize: 0,
+      offsetSize: 0,
+      rowHeight: 0
+    },
+    lastScrollTime: 0,
+    hpTimeout: undefined
+  };
+}
+var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defineVxeComponent)({
+  name: 'VxeSelect',
+  mixins: [_ui.globalMixins.sizeMixin],
+  model: {
+    prop: 'value',
+    event: 'modelValue'
+  },
+  props: {
+    value: [String, Number, Boolean, Array],
+    defaultConfig: Object,
+    clearable: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().select.clearable;
+      }
+    },
+    placeholder: String,
+    readonly: {
+      type: Boolean,
+      default: null
+    },
+    loading: Boolean,
+    disabled: {
+      type: Boolean,
+      default: null
+    },
+    multiple: Boolean,
+    multiCharOverflow: {
+      type: [Number, String],
+      default: function _default() {
+        return (0, _ui.getConfig)().select.multiCharOverflow;
+      }
+    },
+    prefixIcon: String,
+    allowCreate: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().select.allowCreate;
+      }
+    },
+    placement: String,
+    lazyOptions: Array,
+    options: Array,
+    optionProps: Object,
+    optionGroups: Array,
+    optionGroupProps: Object,
+    optionConfig: Object,
+    className: [String, Function],
+    /**
+     * 已废弃，请使用 popupConfig.className
+     * @deprecated
+     */
+    popupClassName: [String, Function],
+    max: {
+      type: [String, Number],
+      default: null
+    },
+    showRadio: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().select.showRadio;
+      }
+    },
+    radioConfig: Object,
+    showCheckbox: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().select.showCheckedButton;
+      }
+    },
+    checkboxConfig: Object,
+    /**
+     * 已废弃，请使用 popupConfig.zIndex
+     * @deprecated
+     */
+    zIndex: Number,
+    size: {
+      type: String,
+      default: function _default() {
+        return (0, _ui.getConfig)().select.size || (0, _ui.getConfig)().size;
+      }
+    },
+    filterable: Boolean,
+    /**
+     * 已废弃，被 filter-config.filterMethod 替换
+     * @deprecated
+     */
+    filterMethod: Function,
+    filterConfig: Object,
+    remote: Boolean,
+    remoteConfig: Object,
+    emptyText: String,
+    checkedClosable: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().select.checkedClosable;
+      }
+    },
+    clearClosable: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().select.clearClosable;
+      }
+    },
+    showCloseButton: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().select.showCloseButton;
+      }
+    },
+    showTotalButton: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().select.showTotalButton;
+      }
+    },
+    showCheckedButton: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().select.showCheckedButton;
+      }
+    },
+    showClearButton: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().select.showClearButton;
+      }
+    },
+    transfer: {
+      type: Boolean,
+      default: null
+    },
+    popupConfig: Object,
+    virtualYConfig: Object,
+    scrollY: Object,
+    /**
+     * 已废弃，被 remote-config.queryMethod 替换
+     * @deprecated
+     */
+    remoteMethod: Function,
+    /**
+     * 已废弃，被 option-config.keyField 替换
+     * @deprecated
+     */
+    optionId: {
+      type: String,
+      default: function _default() {
+        return (0, _ui.getConfig)().select.optionId;
+      }
+    },
+    /**
+     * 已废弃，被 option-config.useKey 替换
+     * @deprecated
+     */
+    optionKey: Boolean
+  },
+  inject: {
+    $xeModal: {
+      default: null
+    },
+    $xeDrawer: {
+      default: null
+    },
+    $xeTable: {
+      default: null
+    },
+    $xeForm: {
+      default: null
+    },
+    formItemInfo: {
+      from: 'xeFormItemInfo',
+      default: null
+    }
+  },
+  provide: function provide() {
+    var $xeSelect = this;
+    return {
+      $xeSelect: $xeSelect
+    };
+  },
+  data: function data() {
+    var xID = _xeUtils.default.uniqueId();
+    var reactData = createReactData();
+    return Object.assign(Object.assign({}, {}), {
+      xID: xID,
+      reactData: reactData
+    });
+  },
+  computed: Object.assign(Object.assign({}, {}), {
+    computeFormReadonly: function computeFormReadonly() {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      var $xeForm = $xeSelect.$xeForm;
+      var readonly = props.readonly;
+      if (readonly === null) {
+        if ($xeForm) {
+          return $xeForm.readonly;
+        }
+        return false;
+      }
+      return readonly;
+    },
+    computeIsDisabled: function computeIsDisabled() {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      var $xeForm = $xeSelect.$xeForm;
+      var disabled = props.disabled;
+      if (disabled === null) {
+        if ($xeForm) {
+          return $xeForm.disabled;
+        }
+        return false;
+      }
+      return disabled;
+    },
+    computeBtnTransfer: function computeBtnTransfer() {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      var $xeTable = $xeSelect.$xeTable;
+      var $xeModal = $xeSelect.$xeModal;
+      var $xeDrawer = $xeSelect.$xeDrawer;
+      var $xeForm = $xeSelect.$xeForm;
+      var transfer = props.transfer;
+      var popupOpts = $xeSelect.computePopupOpts;
+      if (_xeUtils.default.isBoolean(popupOpts.transfer)) {
+        return popupOpts.transfer;
+      }
+      if (transfer === null) {
+        var globalTransfer = (0, _ui.getConfig)().select.transfer;
+        if (_xeUtils.default.isBoolean(globalTransfer)) {
+          return globalTransfer;
+        }
+        if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
+          return true;
+        }
+      }
+      return transfer;
+    },
+    computeInpPlaceholder: function computeInpPlaceholder() {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      var placeholder = props.placeholder;
+      if (placeholder) {
+        return (0, _utils.getFuncText)(placeholder);
+      }
+      var globalPlaceholder = (0, _ui.getConfig)().select.placeholder;
+      if (globalPlaceholder) {
+        return (0, _utils.getFuncText)(globalPlaceholder);
+      }
+      return (0, _ui.getI18n)('vxe.base.pleaseSelect');
+    },
+    computeDefaultOpts: function computeDefaultOpts() {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      return Object.assign({}, props.defaultConfig);
+    },
+    computePropsOpts: function computePropsOpts() {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      return Object.assign({}, props.optionProps);
+    },
+    computeGroupPropsOpts: function computeGroupPropsOpts() {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      return Object.assign({}, props.optionGroupProps);
+    },
+    computeLabelField: function computeLabelField() {
+      var $xeSelect = this;
+      var propsOpts = $xeSelect.computePropsOpts;
+      return propsOpts.label || 'label';
+    },
+    computeValueField: function computeValueField() {
+      var $xeSelect = this;
+      var propsOpts = $xeSelect.computePropsOpts;
+      return propsOpts.value || 'value';
+    },
+    computeGroupLabelField: function computeGroupLabelField() {
+      var $xeSelect = this;
+      var groupPropsOpts = $xeSelect.computeGroupPropsOpts;
+      return groupPropsOpts.label || 'label';
+    },
+    computeGroupOptionsField: function computeGroupOptionsField() {
+      var $xeSelect = this;
+      var groupPropsOpts = $xeSelect.computeGroupPropsOpts;
+      return groupPropsOpts.options || 'options';
+    },
+    computeIsMaximize: function computeIsMaximize() {
+      var $xeSelect = this;
+      var selectVals = $xeSelect.computeSelectVals;
+      return $xeSelect.checkMaxLimit(selectVals);
+    },
+    computePopupOpts: function computePopupOpts() {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      return Object.assign({}, (0, _ui.getConfig)().select.popupConfig, props.popupConfig);
+    },
+    computeVirtualYOpts: function computeVirtualYOpts() {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      return Object.assign({}, (0, _ui.getConfig)().select.virtualYConfig || (0, _ui.getConfig)().select.scrollY, props.virtualYConfig || props.scrollY);
+    },
+    computeRemoteOpts: function computeRemoteOpts() {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      return Object.assign({}, (0, _ui.getConfig)().select.remoteConfig, props.remoteConfig);
+    },
+    computeFilterOpts: function computeFilterOpts() {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      return Object.assign({}, (0, _ui.getConfig)().select.filterConfig, props.filterConfig);
+    },
+    computeOptionOpts: function computeOptionOpts() {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      return Object.assign({}, (0, _ui.getConfig)().select.optionConfig, props.optionConfig);
+    },
+    computeRadioOpts: function computeRadioOpts() {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      return Object.assign({}, (0, _ui.getConfig)().select.radioConfig, props.radioConfig);
+    },
+    computeCheckboxOpts: function computeCheckboxOpts() {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      return Object.assign({}, (0, _ui.getConfig)().select.checkboxConfig, props.checkboxConfig);
+    },
+    computeIsGroup: function computeIsGroup() {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      return reactData.fullGroupList.some(function (item) {
+        return item.options && item.options.length;
+      });
+    },
+    computeMultiMaxCharNum: function computeMultiMaxCharNum() {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      return _xeUtils.default.toNumber(props.multiCharOverflow);
+    },
+    computePopupWrapperStyle: function computePopupWrapperStyle() {
+      var $xeSelect = this;
+      var popupOpts = $xeSelect.computePopupOpts;
+      var height = popupOpts.height,
+        width = popupOpts.width;
+      var stys = {};
+      if (width) {
+        stys.width = (0, _dom.toCssUnit)(width);
+      }
+      if (height) {
+        stys.height = (0, _dom.toCssUnit)(height);
+        stys.maxHeight = (0, _dom.toCssUnit)(height);
+      }
+      return stys;
+    },
+    computeSelectVals: function computeSelectVals() {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      var modelValue = props.value,
+        multiple = props.multiple;
+      var vals = [];
+      if (_xeUtils.default.isArray(modelValue)) {
+        vals = modelValue;
+      } else {
+        if (multiple) {
+          if (!(0, _utils.eqEmptyValue)(modelValue)) {
+            vals = "".concat(modelValue).indexOf(',') > -1 ? "".concat(modelValue).split(',') : [modelValue];
+          }
+        } else {
+          vals = modelValue === null || modelValue === undefined ? [] : [modelValue];
+        }
+      }
+      return vals;
+    },
+    computeFullLabel: function computeFullLabel() {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      var reactData = $xeSelect.reactData;
+      var remote = props.remote;
+      var reactFlag = reactData.reactFlag;
+      var selectVals = $xeSelect.computeSelectVals;
+      if (remote && reactFlag) {
+        return selectVals.map(function (val) {
+          return $xeSelect.getRemoteSelectLabel(val);
+        }).join(', ');
+      }
+      return selectVals.map(function (val) {
+        return $xeSelect.getSelectLabel(val);
+      }).join(', ');
+    },
+    computeSelectLabel: function computeSelectLabel() {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      var reactData = $xeSelect.reactData;
+      var remote = props.remote,
+        multiple = props.multiple;
+      var reactFlag = reactData.reactFlag;
+      var multiMaxCharNum = $xeSelect.computeMultiMaxCharNum;
+      var selectVals = $xeSelect.computeSelectVals;
+      if (remote && reactFlag) {
+        return selectVals.map(function (val) {
+          return $xeSelect.getRemoteSelectLabel(val);
+        }).join(', ');
+      }
+      var labels = selectVals.map(function (val) {
+        return $xeSelect.getSelectLabel(val);
+      });
+      if (multiple && multiMaxCharNum > 0 && labels.length > multiMaxCharNum) {
+        return "".concat(labels.slice(0, multiMaxCharNum), "...");
+      }
+      return labels.join(', ');
+    }
+  }),
+  methods: {
+    //
+    // Method
+    //
+    dispatchEvent: function dispatchEvent(type, params, evnt) {
+      var $xeSelect = this;
+      $xeSelect.$emit(type, (0, _ui.createEvent)(evnt, {
+        $select: $xeSelect
+      }, params));
+    },
+    emitModel: function emitModel(value) {
+      var $xeSelect = this;
+      var _events = $xeSelect._events;
+      if (_events && _events.modelValue) {
+        $xeSelect.$emit('modelValue', value);
+      } else {
+        $xeSelect.$emit('model-value', value);
+      }
+    },
+    emitDefaultValue: function emitDefaultValue(value) {
+      var $xeSelect = this;
+      $xeSelect.emitModel(value);
+      $xeSelect.dispatchEvent('default-change', {
+        value: value
+      }, null);
+    },
+    isPanelVisible: function isPanelVisible() {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      return reactData.visiblePanel;
+    },
+    togglePanel: function togglePanel() {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      if (reactData.visiblePanel) {
+        $xeSelect.hideOptionPanel();
+      } else {
+        $xeSelect.showOptionPanel();
+      }
+      return $xeSelect.$nextTick();
+    },
+    hidePanel: function hidePanel() {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      if (reactData.visiblePanel) {
+        $xeSelect.hideOptionPanel();
+      }
+      return $xeSelect.$nextTick();
+    },
+    showPanel: function showPanel() {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      if (!reactData.visiblePanel) {
+        $xeSelect.showOptionPanel();
+      }
+      return $xeSelect.$nextTick();
+    },
+    focus: function focus() {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      var $input = $xeSelect.$refs.refInput;
+      if ($input) {
+        $input.blur();
+      }
+      reactData.isActivated = true;
+      return $xeSelect.$nextTick();
+    },
+    blur: function blur() {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      var $input = $xeSelect.$refs.refInput;
+      if ($input) {
+        $input.blur();
+      }
+      reactData.isActivated = false;
+      return $xeSelect.$nextTick();
+    },
+    callSlot: function callSlot(slotFunc, params, h) {
+      var $xeSelect = this;
+      var slots = $xeSelect.$scopedSlots;
+      if (slotFunc) {
+        if (_xeUtils.default.isString(slotFunc)) {
+          slotFunc = slots[slotFunc] || null;
+        }
+        if (_xeUtils.default.isFunction(slotFunc)) {
+          return (0, _vn.getSlotVNs)(slotFunc.call($xeSelect, params, h));
+        }
+      }
+      return [];
+    },
+    getOptKey: function getOptKey() {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      var optionOpts = $xeSelect.computeOptionOpts;
+      return optionOpts.keyField || props.optionId || '_X_OPTION_KEY';
+    },
+    getOptId: function getOptId(option) {
+      var $xeSelect = this;
+      var optid = option[$xeSelect.getOptKey()];
+      return optid ? encodeURIComponent(optid) : '';
+    },
+    checkMaxLimit: function checkMaxLimit(selectVals) {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      var multiple = props.multiple,
+        max = props.max;
+      if (multiple && max) {
+        return selectVals.length >= _xeUtils.default.toNumber(max);
+      }
+      return false;
+    },
+    getRemoteSelectLabel: function getRemoteSelectLabel(value) {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      var internalData = $xeSelect.internalData;
+      var lazyOptions = props.lazyOptions;
+      var remoteValMaps = internalData.remoteValMaps,
+        optFullValMaps = internalData.optFullValMaps;
+      var valueField = $xeSelect.computeValueField;
+      var labelField = $xeSelect.computeLabelField;
+      var remoteItem = remoteValMaps[value] || optFullValMaps[value];
+      var item = remoteItem ? remoteItem.item : null;
+      if (item) {
+        return _xeUtils.default.toValueString(item[labelField]);
+      }
+      if (lazyOptions) {
+        var lazyItem = lazyOptions.find(function (item) {
+          return item[valueField] === value;
+        });
+        if (lazyItem) {
+          return lazyItem[labelField];
+        }
+      }
+      return value;
+    },
+    getSelectLabel: function getSelectLabel(value) {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      var reactData = $xeSelect.reactData;
+      var internalData = $xeSelect.internalData;
+      var lazyOptions = props.lazyOptions;
+      var optFullValMaps = internalData.optFullValMaps;
+      var valueField = $xeSelect.computeValueField;
+      var labelField = $xeSelect.computeLabelField;
+      var cacheItem = reactData.reactFlag ? optFullValMaps[value] : null;
+      if (cacheItem) {
+        return cacheItem.item[labelField];
+      }
+      if (lazyOptions) {
+        var lazyItem = lazyOptions.find(function (item) {
+          return item[valueField] === value;
+        });
+        if (lazyItem) {
+          return lazyItem[labelField];
+        }
+      }
+      return value;
+    },
+    getOptkey: function getOptkey() {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      var optionOpts = $xeSelect.computeOptionOpts;
+      return optionOpts.keyField || props.optionId || '_X_OPTION_KEY';
+    },
+    getOptid: function getOptid(option) {
+      var $xeSelect = this;
+      var optid = option[$xeSelect.getOptkey()];
+      return optid ? encodeURIComponent(optid) : '';
+    },
+    /**
+     * 处理选项，当选项被动态显示/隐藏时可能会用到
+     */
+    handleOption: function handleOption() {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      var reactData = $xeSelect.reactData;
+      var internalData = $xeSelect.internalData;
+      var remote = props.remote,
+        value = props.value,
+        filterable = props.filterable;
+      var searchValue = reactData.searchValue;
+      var fullData = internalData.fullData,
+        optFullValMaps = internalData.optFullValMaps;
+      var labelField = $xeSelect.computeLabelField;
+      var valueField = $xeSelect.computeValueField;
+      var filterOpts = $xeSelect.computeFilterOpts;
+      var frMethod = filterOpts.filterMethod || props.filterMethod;
+      var searchStr = "".concat(searchValue || '').toLowerCase();
+      var avList = [];
+      if (remote) {
+        avList = fullData.filter(isOptionVisible);
+      } else {
+        if (filterable && frMethod) {
+          avList = fullData.filter(function (option) {
+            return isOptionVisible(option) && frMethod({
+              $select: $xeSelect,
+              group: null,
+              option: option,
+              searchValue: searchValue,
+              value: value
+            });
+          });
+        } else if (filterable) {
+          avList = fullData.filter(function (option) {
+            return isOptionVisible(option) && (!searchStr || "".concat(option[labelField] || option[valueField]).toLowerCase().indexOf(searchStr) > -1);
+          });
+        } else {
+          avList = fullData.filter(isOptionVisible);
+        }
+      }
+      avList.forEach(function (item, index) {
+        var cacheItem = optFullValMaps[item[valueField]];
+        if (cacheItem) {
+          cacheItem._index = index;
+        }
+      });
+      internalData.afterVisibleList = avList;
+      return $xeSelect.$nextTick();
+    },
+    refreshOption: function refreshOption() {
+      var $xeSelect = this;
+      $xeSelect.handleOption();
+      $xeSelect.updateYData();
+      return $xeSelect.$nextTick();
+    },
+    cacheItemMap: function cacheItemMap(datas) {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      var internalData = $xeSelect.internalData;
+      var groupOptionsField = $xeSelect.computeGroupOptionsField;
+      var valueField = $xeSelect.computeValueField;
+      var key = $xeSelect.getOptKey();
+      var groupKeyMaps = {};
+      var fullKeyMaps = {};
+      var list = [];
+      var handleOptItem = function handleOptItem(item) {
+        list.push(item);
+        var optid = $xeSelect.getOptId(item);
+        if (!optid) {
+          optid = getOptUniqueId();
+          item[key] = optid;
+        }
+        fullKeyMaps[item[valueField]] = {
+          key: optid,
+          item: item,
+          _index: -1
+        };
+      };
+      datas.forEach(function (group) {
+        handleOptItem(group);
+        if (group[groupOptionsField]) {
+          groupKeyMaps[group[key]] = group;
+          group[groupOptionsField].forEach(handleOptItem);
+        }
+      });
+      internalData.fullData = list;
+      internalData.optGroupKeyMaps = groupKeyMaps;
+      internalData.optFullValMaps = fullKeyMaps;
+      reactData.reactFlag++;
+      $xeSelect.handleOption();
+    },
+    setCurrentOption: function setCurrentOption(option) {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      if (option) {
+        reactData.currentOption = option;
+      }
+    },
+    scrollToOption: function scrollToOption(option, isAlignBottom) {
+      var $xeSelect = this;
+      return $xeSelect.$nextTick().then(function () {
+        if (option) {
+          var optWrapperElem = $xeSelect.$refs.refOptionWrapper;
+          var panelElem = $xeSelect.$refs.refOptionPanel;
+          var optElem = panelElem.querySelector("[optid='".concat($xeSelect.getOptid(option), "']"));
+          if (optWrapperElem && optElem) {
+            var wrapperHeight = optWrapperElem.offsetHeight;
+            var offsetPadding = 5;
+            if (isAlignBottom) {
+              if (optElem.offsetTop + optElem.offsetHeight - optWrapperElem.scrollTop > wrapperHeight) {
+                optWrapperElem.scrollTop = optElem.offsetTop + optElem.offsetHeight - wrapperHeight;
+              }
+            } else {
+              if (optElem.offsetTop + offsetPadding < optWrapperElem.scrollTop || optElem.offsetTop + offsetPadding > optWrapperElem.scrollTop + optWrapperElem.clientHeight) {
+                optWrapperElem.scrollTop = optElem.offsetTop - offsetPadding;
+              }
+            }
+          }
+        }
+      });
+    },
+    updateZindex: function updateZindex() {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      var reactData = $xeSelect.reactData;
+      var popupOpts = $xeSelect.computePopupOpts;
+      var customZIndex = popupOpts.zIndex || props.zIndex;
+      if (customZIndex) {
+        reactData.panelIndex = _xeUtils.default.toNumber(customZIndex);
+      } else if (reactData.panelIndex < (0, _utils.getLastZIndex)()) {
+        reactData.panelIndex = (0, _utils.nextZIndex)();
+      }
+    },
+    updateZIndex: function updateZIndex() {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      if (reactData.panelIndex < (0, _utils.getLastZIndex)()) {
+        reactData.panelIndex = (0, _utils.nextZIndex)();
+      }
+    },
+    updatePlacement: function updatePlacement() {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      var reactData = $xeSelect.reactData;
+      var placement = props.placement;
+      var panelIndex = reactData.panelIndex;
+      var targetElem = $xeSelect.$refs.refElem;
+      var panelElem = $xeSelect.$refs.refOptionPanel;
+      var btnTransfer = $xeSelect.computeBtnTransfer;
+      var popupOpts = $xeSelect.computePopupOpts;
+      var handleStyle = function handleStyle() {
+        var ppObj = (0, _dom.updatePanelPlacement)(targetElem, panelElem, {
+          placement: popupOpts.placement || placement,
+          defaultPlacement: popupOpts.defaultPlacement,
+          teleportTo: btnTransfer
+        });
+        var panelStyle = Object.assign(ppObj.style, {
+          zIndex: panelIndex
+        });
+        reactData.panelStyle = panelStyle;
+        reactData.panelPlacement = ppObj.placement;
+      };
+      handleStyle();
+      return $xeSelect.$nextTick().then(handleStyle);
+    },
+    handleScrollSelect: function handleScrollSelect() {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      var internalData = $xeSelect.internalData;
+      $xeSelect.$nextTick(function () {
+        var isAniVisible = reactData.isAniVisible,
+          visiblePanel = reactData.visiblePanel;
+        var optFullValMaps = internalData.optFullValMaps;
+        var selectVals = $xeSelect.computeSelectVals;
+        if (selectVals.length && isAniVisible && visiblePanel) {
+          var cacheItem = reactData.reactFlag ? optFullValMaps["".concat(selectVals[0])] : null;
+          if (cacheItem) {
+            reactData.currentOption = cacheItem.item;
+            $xeSelect.handleScrollToOption(cacheItem.item);
+          }
+        }
+      });
+    },
+    showOptionPanel: function showOptionPanel() {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      var reactData = $xeSelect.reactData;
+      var internalData = $xeSelect.internalData;
+      var loading = props.loading,
+        filterable = props.filterable,
+        remote = props.remote;
+      var fullData = internalData.fullData,
+        hpTimeout = internalData.hpTimeout;
+      var isDisabled = $xeSelect.computeIsDisabled;
+      var remoteOpts = $xeSelect.computeRemoteOpts;
+      var selectVals = $xeSelect.computeSelectVals;
+      if (!loading && !isDisabled) {
+        if (hpTimeout) {
+          clearTimeout(hpTimeout);
+          internalData.hpTimeout = undefined;
+        }
+        if (!reactData.initialized) {
+          reactData.initialized = true;
+          var btnTransfer = $xeSelect.computeBtnTransfer;
+          var panelElem = $xeSelect.$refs.refOptionPanel;
+          if (btnTransfer && panelElem) {
+            document.body.appendChild(panelElem);
+          }
+        }
+        reactData.isActivated = true;
+        reactData.isAniVisible = true;
+        if (filterable) {
+          if (remote && remoteOpts.enabled && (remoteOpts.autoLoad && !fullData.length || fullData.length && remoteOpts.clearOnClose)) {
+            $xeSelect.handleSearchEvent();
+          } else {
+            $xeSelect.handleOption();
+            $xeSelect.updateYData();
+          }
+        }
+        setTimeout(function () {
+          reactData.visiblePanel = true;
+          $xeSelect.handleFocusSearch();
+          $xeSelect.recalculate().then(function () {
+            if (selectVals && selectVals.length) {
+              $xeSelect.handleScrollSelect();
+            } else {
+              $xeSelect.refreshScroll();
+            }
+          });
+          $xeSelect.updatePlacement();
+        }, 10);
+        setTimeout(function () {
+          $xeSelect.recalculate().then(function () {
+            return $xeSelect.refreshScroll();
+          });
+        }, 100);
+        $xeSelect.updateZIndex();
+        $xeSelect.updatePlacement();
+        $xeSelect.dispatchEvent('visible-change', {
+          visible: true
+        }, null);
+      }
+    },
+    hideOptionPanel: function hideOptionPanel(evnt) {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      var reactData = $xeSelect.reactData;
+      var internalData = $xeSelect.internalData;
+      var filterable = props.filterable,
+        remote = props.remote;
+      var filterOpts = $xeSelect.computeFilterOpts;
+      var remoteOpts = $xeSelect.computeRemoteOpts;
+      if (remote) {
+        if (remoteOpts.clearOnClose) {
+          reactData.searchValue = '';
+        }
+      } else if (filterable) {
+        if (filterOpts.clearOnClose) {
+          reactData.searchValue = '';
+        }
+      } else {
+        reactData.searchValue = '';
+      }
+      reactData.searchLoading = false;
+      reactData.visiblePanel = false;
+      internalData.hpTimeout = setTimeout(function () {
+        reactData.isAniVisible = false;
+      }, 350);
+      $xeSelect.dispatchEvent('visible-change', {
+        visible: false
+      }, evnt || null);
+    },
+    changeEvent: function changeEvent(evnt, selectValue, option) {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      var $xeForm = $xeSelect.$xeForm;
+      var formItemInfo = $xeSelect.formItemInfo;
+      $xeSelect.emitModel(selectValue);
+      if (selectValue !== props.value) {
+        $xeSelect.dispatchEvent('change', {
+          value: selectValue,
+          option: option
+        }, evnt);
+        // 自动更新校验状态
+        if ($xeForm && formItemInfo) {
+          $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, selectValue);
+        }
+      }
+    },
+    clearValueEvent: function clearValueEvent(evnt, selectValue) {
+      var $xeSelect = this;
+      var internalData = $xeSelect.internalData;
+      internalData.remoteValMaps = {};
+      $xeSelect.changeEvent(evnt, selectValue, null);
+      $xeSelect.dispatchEvent('clear', {
+        value: selectValue
+      }, evnt);
+    },
+    clearEvent: function clearEvent(params) {
+      var $xeSelect = this;
+      var $event = params.$event;
+      $xeSelect.clearValueEvent($event, null);
+      $xeSelect.hideOptionPanel($event);
+    },
+    allCheckedPanelEvent: function allCheckedPanelEvent(params) {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      var reactData = $xeSelect.reactData;
+      var $event = params.$event;
+      var multiple = props.multiple,
+        max = props.max,
+        checkedClosable = props.checkedClosable;
+      var optList = reactData.optList;
+      var valueField = $xeSelect.computeValueField;
+      if (multiple) {
+        var selectVals = $xeSelect.computeSelectVals;
+        var currVlas = selectVals.slice(0);
+        var _loop = function _loop() {
+          var option = optList[i];
+          var selectValue = option[valueField];
+          // 检测是否超过最大可选数量
+          if ($xeSelect.checkMaxLimit(currVlas)) {
+            if (_ui.VxeUI) {
+              _ui.VxeUI.modal.message({
+                content: (0, _ui.getI18n)('vxe.select.overSizeErr', [max]),
+                status: 'warning'
+              });
+            }
+            return 1; // break
+          }
+          if (!currVlas.some(function (val) {
+            return val === selectValue;
+          })) {
+            currVlas.push(selectValue);
+          }
+        };
+        for (var i = 0; i < optList.length; i++) {
+          if (_loop()) break;
+        }
+        $xeSelect.changeEvent($event, currVlas, optList[0]);
+        if (checkedClosable) {
+          $xeSelect.hideOptionPanel($event);
+        }
+        $xeSelect.dispatchEvent('all-change', {
+          value: currVlas
+        }, $event);
+      }
+    },
+    clearCheckedPanelEvent: function clearCheckedPanelEvent(params) {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      var clearClosable = props.clearClosable;
+      var $event = params.$event;
+      $xeSelect.clearValueEvent($event, null);
+      if (clearClosable) {
+        $xeSelect.hideOptionPanel($event);
+      }
+    },
+    closePanelEvent: function closePanelEvent(params) {
+      var $xeSelect = this;
+      var $event = params.$event;
+      $xeSelect.hideOptionPanel($event);
+    },
+    changeOptionEvent: function changeOptionEvent(evnt, option) {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      var reactData = $xeSelect.reactData;
+      var internalData = $xeSelect.internalData;
+      var multiple = props.multiple;
+      var remoteValMaps = internalData.remoteValMaps;
+      var valueField = $xeSelect.computeValueField;
+      var selectValue = option[valueField];
+      var remoteItem = remoteValMaps[selectValue];
+      if (!reactData.visiblePanel) {
+        return;
+      }
+      if (remoteItem) {
+        remoteItem.item = option;
+      } else {
+        remoteValMaps[selectValue] = {
+          key: $xeSelect.getOptId(option),
+          item: option,
+          _index: -1
+        };
+      }
+      if (multiple) {
+        var multipleValue = [];
+        var selectVals = $xeSelect.computeSelectVals;
+        var index = _xeUtils.default.findIndexOf(selectVals, function (val) {
+          return val === selectValue;
+        });
+        if (index === -1) {
+          multipleValue = selectVals.concat([selectValue]);
+        } else {
+          multipleValue = selectVals.filter(function (val) {
+            return val !== selectValue;
+          });
+        }
+        $xeSelect.changeEvent(evnt, multipleValue, option);
+      } else {
+        $xeSelect.changeEvent(evnt, selectValue, option);
+        $xeSelect.hideOptionPanel(evnt);
+      }
+      reactData.reactFlag++;
+    },
+    handleGlobalMousewheelEvent: function handleGlobalMousewheelEvent(evnt) {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      var visiblePanel = reactData.visiblePanel;
+      var isDisabled = $xeSelect.computeIsDisabled;
+      if (!isDisabled) {
+        if (visiblePanel) {
+          var panelElem = $xeSelect.$refs.refOptionPanel;
+          if ((0, _dom.getEventTargetNode)(evnt, panelElem).flag) {
+            $xeSelect.updatePlacement();
+          } else {
+            $xeSelect.hideOptionPanel(evnt);
+          }
+        }
+      }
+    },
+    handleGlobalMousedownEvent: function handleGlobalMousedownEvent(evnt) {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      var visiblePanel = reactData.visiblePanel;
+      var isDisabled = $xeSelect.computeIsDisabled;
+      var popupOpts = $xeSelect.computePopupOpts;
+      var trigger = popupOpts.trigger;
+      if (!isDisabled) {
+        var el = $xeSelect.$refs.refElem;
+        var panelElem = $xeSelect.$refs.refOptionPanel;
+        reactData.isActivated = (0, _dom.getEventTargetNode)(evnt, el).flag || (0, _dom.getEventTargetNode)(evnt, panelElem).flag;
+        if (visiblePanel && !reactData.isActivated) {
+          if (trigger !== 'manual') {
+            $xeSelect.hideOptionPanel(evnt);
+          }
+        }
+      }
+    },
+    validOffsetOption: function validOffsetOption(option) {
+      var $xeSelect = this;
+      var isDisabled = option.disabled;
+      var optid = $xeSelect.getOptId(option);
+      if (!isDisabled && !$xeSelect.hasOptGroupById(optid)) {
+        return true;
+      }
+      return false;
+    },
+    findOffsetOption: function findOffsetOption(option, isDwArrow) {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      var reactData = $xeSelect.reactData;
+      var internalData = $xeSelect.internalData;
+      var allowCreate = props.allowCreate;
+      var optList = reactData.optList;
+      var optFullValMaps = internalData.optFullValMaps,
+        optAddMaps = internalData.optAddMaps,
+        afterVisibleList = internalData.afterVisibleList;
+      var valueField = $xeSelect.computeValueField;
+      var fullList = afterVisibleList;
+      var offsetAddIndex = 0;
+      if (allowCreate && optList.length) {
+        var firstItem = optList[0];
+        var optid = $xeSelect.getOptId(firstItem);
+        if (optAddMaps[optid]) {
+          offsetAddIndex = 1;
+          fullList = [optAddMaps[optid]].concat(fullList);
+        }
+      }
+      if (!option) {
+        if (isDwArrow) {
+          for (var i = 0; i < fullList.length; i++) {
+            var item = fullList[i];
+            if ($xeSelect.validOffsetOption(item)) {
+              return item;
+            }
+          }
+        } else {
+          for (var len = fullList.length - 1; len >= 0; len--) {
+            var _item = fullList[len];
+            if ($xeSelect.validOffsetOption(_item)) {
+              return _item;
+            }
+          }
+        }
+      }
+      var avIndex = 0;
+      var cacheItem = option ? optFullValMaps[option[valueField]] : null;
+      if (cacheItem) {
+        avIndex = cacheItem._index + offsetAddIndex;
+      }
+      if (avIndex > -1) {
+        if (isDwArrow) {
+          for (var _i = avIndex + 1; _i <= fullList.length - 1; _i++) {
+            var _item2 = fullList[_i];
+            if ($xeSelect.validOffsetOption(_item2)) {
+              return _item2;
+            }
+          }
+        } else {
+          if (avIndex > 0) {
+            for (var _len = avIndex - 1; _len >= 0; _len--) {
+              var _item3 = fullList[_len];
+              if ($xeSelect.validOffsetOption(_item3)) {
+                return _item3;
+              }
+            }
+          }
+        }
+      }
+      return null;
+    },
+    handleGlobalKeydownEvent: function handleGlobalKeydownEvent(evnt) {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      var reactData = $xeSelect.reactData;
+      var clearable = props.clearable;
+      var visiblePanel = reactData.visiblePanel,
+        currentOption = reactData.currentOption;
+      var isDisabled = $xeSelect.computeIsDisabled;
+      var popupOpts = $xeSelect.computePopupOpts;
+      var trigger = popupOpts.trigger;
+      if (!isDisabled) {
+        var isTab = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.TAB);
+        var isEnter = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ENTER);
+        var isEsc = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ESCAPE);
+        var isUpArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_UP);
+        var isDwArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_DOWN);
+        var isDel = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.DELETE);
+        if (isTab) {
+          reactData.isActivated = false;
+        }
+        if (visiblePanel) {
+          if (isEsc || isTab) {
+            if (trigger !== 'manual') {
+              $xeSelect.hideOptionPanel(evnt);
+            }
+          } else if (isEnter) {
+            if (currentOption) {
+              evnt.preventDefault();
+              evnt.stopPropagation();
+              $xeSelect.changeOptionEvent(evnt, currentOption);
+            }
+          } else if (isUpArrow || isDwArrow) {
+            evnt.preventDefault();
+            var offsetOption = $xeSelect.findOffsetOption(currentOption, isDwArrow);
+            // 如果不匹配，默认最接近一个
+            if (!offsetOption) {
+              offsetOption = $xeSelect.findOffsetOption(null, isDwArrow);
+            }
+            if (offsetOption) {
+              $xeSelect.setCurrentOption(offsetOption);
+              $xeSelect.handleScrollToOption(offsetOption, isDwArrow);
+            }
+          }
+        } else if ((isUpArrow || isDwArrow || isEnter) && reactData.isActivated) {
+          evnt.preventDefault();
+          $xeSelect.showOptionPanel();
+        }
+        if (reactData.isActivated) {
+          if (isDel && clearable) {
+            $xeSelect.clearValueEvent(evnt, null);
+          }
+        }
+      }
+    },
+    handleGlobalBlurEvent: function handleGlobalBlurEvent(evnt) {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      var visiblePanel = reactData.visiblePanel,
+        isActivated = reactData.isActivated;
+      var popupOpts = $xeSelect.computePopupOpts;
+      var trigger = popupOpts.trigger;
+      if (visiblePanel) {
+        if (trigger !== 'manual') {
+          $xeSelect.hideOptionPanel(evnt);
+        }
+      }
+      if (isActivated) {
+        reactData.isActivated = false;
+      }
+      if (visiblePanel || isActivated) {
+        var $input = $xeSelect.$refs.refInput;
+        if ($input) {
+          $input.blur();
+        }
+      }
+    },
+    handleGlobalResizeEvent: function handleGlobalResizeEvent() {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      var visiblePanel = reactData.visiblePanel;
+      if (visiblePanel) {
+        $xeSelect.updatePlacement();
+      }
+    },
+    handleFocusSearch: function handleFocusSearch() {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      if (props.filterable) {
+        $xeSelect.$nextTick(function () {
+          var inpSearch = $xeSelect.$refs.refInpSearch;
+          if (inpSearch) {
+            inpSearch.focus();
+          }
+        });
+      }
+    },
+    focusEvent: function focusEvent(evnt) {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      var isDisabled = $xeSelect.computeIsDisabled;
+      var popupOpts = $xeSelect.computePopupOpts;
+      var trigger = popupOpts.trigger;
+      if (!isDisabled) {
+        if (!reactData.visiblePanel) {
+          if (!trigger || trigger === 'default') {
+            reactData.triggerFocusPanel = true;
+            $xeSelect.showOptionPanel();
+            setTimeout(function () {
+              reactData.triggerFocusPanel = false;
+            }, 500);
+          }
+        }
+      }
+      $xeSelect.dispatchEvent('focus', {}, evnt);
+    },
+    clickEvent: function clickEvent(evnt) {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      var popupOpts = $xeSelect.computePopupOpts;
+      var trigger = popupOpts.trigger;
+      if (!trigger || trigger === 'default') {
+        $xeSelect.togglePanelEvent(evnt);
+      }
+      $xeSelect.dispatchEvent('click', {
+        triggerButton: false,
+        visible: reactData.visiblePanel
+      }, evnt);
+    },
+    blurEvent: function blurEvent(evnt) {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      reactData.isActivated = false;
+      $xeSelect.dispatchEvent('blur', {}, evnt);
+    },
+    suffixClickEvent: function suffixClickEvent(evnt) {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      var popupOpts = $xeSelect.computePopupOpts;
+      var trigger = popupOpts.trigger;
+      if (!trigger || trigger === 'default' || trigger === 'icon') {
+        $xeSelect.togglePanelEvent(evnt);
+      }
+      $xeSelect.dispatchEvent('click', {
+        triggerButton: true,
+        visible: reactData.visiblePanel
+      }, evnt);
+    },
+    modelSearchEvent: function modelSearchEvent(value) {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      reactData.searchValue = value;
+    },
+    focusSearchEvent: function focusSearchEvent() {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      reactData.isActivated = true;
+    },
+    handleSearchEvent: function handleSearchEvent() {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      var reactData = $xeSelect.reactData;
+      var value = props.value,
+        remote = props.remote;
+      var searchValue = reactData.searchValue;
+      var remoteOpts = $xeSelect.computeRemoteOpts;
+      var qyMethod = remoteOpts.queryMethod || props.remoteMethod;
+      if (remote && qyMethod && remoteOpts.enabled) {
+        reactData.searchLoading = true;
+        Promise.resolve(qyMethod({
+          $select: $xeSelect,
+          searchValue: searchValue,
+          value: value
+        })).then(function () {
+          return $xeSelect.$nextTick();
+        }).catch(function () {
+          return $xeSelect.$nextTick();
+        }).finally(function () {
+          reactData.searchLoading = false;
+          $xeSelect.handleOption();
+          $xeSelect.updateYData();
+        });
+      } else {
+        $xeSelect.handleOption();
+        $xeSelect.updateYData();
+      }
+    },
+    triggerSearchEvent: _xeUtils.default.debounce(function () {
+      var $xeSelect = this;
+      $xeSelect.handleSearchEvent();
+    }, 350, {
+      trailing: true
+    }),
+    togglePanelEvent: function togglePanelEvent(params) {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      var $event = params.$event;
+      $event.preventDefault();
+      if (reactData.triggerFocusPanel) {
+        reactData.triggerFocusPanel = false;
+      } else {
+        if (reactData.visiblePanel) {
+          $xeSelect.hideOptionPanel($event);
+        } else {
+          $xeSelect.showOptionPanel();
+        }
+      }
+    },
+    checkOptionDisabled: function checkOptionDisabled(isSelected, option) {
+      var $xeSelect = this;
+      if (option.disabled) {
+        return true;
+      }
+      var isMaximize = $xeSelect.computeIsMaximize;
+      if (isMaximize && !isSelected) {
+        return true;
+      }
+      return false;
+    },
+    updateYSpace: function updateYSpace() {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      var internalData = $xeSelect.internalData;
+      var scrollYLoad = reactData.scrollYLoad;
+      var scrollYStore = internalData.scrollYStore,
+        afterVisibleList = internalData.afterVisibleList;
+      reactData.bodyHeight = scrollYLoad ? afterVisibleList.length * scrollYStore.rowHeight : 0;
+      reactData.topSpaceHeight = scrollYLoad ? Math.max(scrollYStore.startIndex * scrollYStore.rowHeight, 0) : 0;
+    },
+    handleData: function handleData() {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      var reactData = $xeSelect.reactData;
+      var internalData = $xeSelect.internalData;
+      var filterable = props.filterable,
+        allowCreate = props.allowCreate;
+      var scrollYLoad = reactData.scrollYLoad,
+        searchValue = reactData.searchValue;
+      var optAddMaps = internalData.optAddMaps,
+        scrollYStore = internalData.scrollYStore,
+        afterVisibleList = internalData.afterVisibleList;
+      var labelField = $xeSelect.computeLabelField;
+      var valueField = $xeSelect.computeValueField;
+      var restList = scrollYLoad ? afterVisibleList.slice(scrollYStore.startIndex, scrollYStore.endIndex) : afterVisibleList.slice(0);
+      if (filterable && allowCreate && searchValue) {
+        if (!restList.some(function (option) {
+          return option[labelField] === searchValue;
+        })) {
+          var addItem = optAddMaps[searchValue] || _defineProperty(_defineProperty(_defineProperty({}, $xeSelect.getOptKey(), searchValue), labelField, searchValue), valueField, searchValue);
+          optAddMaps[searchValue] = addItem;
+          restList.unshift(addItem);
+        }
+      }
+      reactData.optList = restList;
+      return $xeSelect.$nextTick();
+    },
+    updateYData: function updateYData() {
+      var $xeSelect = this;
+      $xeSelect.handleData();
+      $xeSelect.updateYSpace();
+    },
+    computeScrollLoad: function computeScrollLoad() {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      var internalData = $xeSelect.internalData;
+      return $xeSelect.$nextTick().then(function () {
+        var scrollYLoad = reactData.scrollYLoad;
+        var scrollYStore = internalData.scrollYStore;
+        var virtualBodyElem = $xeSelect.$refs.refVirtualBody;
+        var virtualYOpts = $xeSelect.computeVirtualYOpts;
+        var rowHeight = 0;
+        var firstItemElem;
+        if (virtualBodyElem) {
+          if (!firstItemElem) {
+            firstItemElem = virtualBodyElem.children[0];
+          }
+        }
+        if (firstItemElem) {
+          rowHeight = firstItemElem.offsetHeight;
+        }
+        rowHeight = Math.max(20, rowHeight);
+        scrollYStore.rowHeight = rowHeight;
+        // 计算 Y 逻辑
+        if (scrollYLoad) {
+          var scrollBodyElem = $xeSelect.$refs.refVirtualWrapper;
+          var visibleYSize = Math.max(8, scrollBodyElem ? Math.ceil(scrollBodyElem.clientHeight / rowHeight) : 0);
+          var offsetYSize = Math.max(0, Math.min(2, _xeUtils.default.toNumber(virtualYOpts.oSize)));
+          scrollYStore.offsetSize = offsetYSize;
+          scrollYStore.visibleSize = visibleYSize;
+          scrollYStore.endIndex = Math.max(scrollYStore.startIndex, visibleYSize + offsetYSize, scrollYStore.endIndex);
+          $xeSelect.updateYData();
+        } else {
+          $xeSelect.updateYSpace();
+        }
+      });
+    },
+    handleScrollToOption: function handleScrollToOption(option, isDwArrow) {
+      var $xeSelect = this;
+      var internalData = $xeSelect.internalData;
+      var optFullValMaps = internalData.optFullValMaps,
+        scrollYStore = internalData.scrollYStore;
+      var valueField = $xeSelect.computeValueField;
+      var cacheItem = optFullValMaps[option[valueField]];
+      if (cacheItem) {
+        var optid = cacheItem.key;
+        var avIndex = cacheItem._index;
+        if (avIndex > -1) {
+          var optWrapperElem = $xeSelect.$refs.refVirtualWrapper;
+          var panelElem = $xeSelect.$refs.refOptionPanel;
+          var optElem = panelElem.querySelector("[optid='".concat(optid, "']"));
+          if (optWrapperElem) {
+            if (optElem) {
+              var wrapperHeight = optWrapperElem.offsetHeight;
+              var offsetPadding = 1;
+              if (isDwArrow) {
+                if (Math.ceil(optElem.offsetTop + optElem.offsetHeight - optWrapperElem.scrollTop) >= wrapperHeight) {
+                  optWrapperElem.scrollTop = optElem.offsetTop + optElem.offsetHeight - wrapperHeight;
+                } else if (optElem.offsetTop + offsetPadding < optWrapperElem.scrollTop || optElem.offsetTop + offsetPadding > optWrapperElem.scrollTop + optWrapperElem.clientHeight) {
+                  optWrapperElem.scrollTop = optElem.offsetTop - offsetPadding;
+                }
+              } else {
+                if (optElem.offsetTop + offsetPadding < optWrapperElem.scrollTop || optElem.offsetTop + offsetPadding > optWrapperElem.scrollTop + optWrapperElem.clientHeight) {
+                  optWrapperElem.scrollTop = optElem.offsetTop - offsetPadding;
+                } else if (optElem.offsetTop + optElem.offsetHeight - optWrapperElem.scrollTop > wrapperHeight) {
+                  optWrapperElem.scrollTop = optElem.offsetTop + optElem.offsetHeight - wrapperHeight;
+                }
+              }
+            } else {
+              if (isDwArrow) {
+                optWrapperElem.scrollTop = avIndex * scrollYStore.rowHeight - optWrapperElem.clientHeight + scrollYStore.rowHeight;
+              } else {
+                optWrapperElem.scrollTop = avIndex * scrollYStore.rowHeight;
+              }
+            }
+          }
+        }
+      }
+    },
+    /**
+     * 如果有滚动条，则滚动到对应的位置
+     * @param {Number} scrollLeft 左距离
+     * @param {Number} scrollTop 上距离
+     */
+    scrollTo: function scrollTo(scrollLeft, scrollTop) {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      var scrollBodyElem = $xeSelect.$refs.refVirtualWrapper;
+      if (scrollBodyElem) {
+        if (_xeUtils.default.isNumber(scrollLeft)) {
+          scrollBodyElem.scrollLeft = scrollLeft;
+        }
+        if (_xeUtils.default.isNumber(scrollTop)) {
+          scrollBodyElem.scrollTop = scrollTop;
+        }
+      }
+      if (reactData.scrollYLoad) {
+        return new Promise(function (resolve) {
+          setTimeout(function () {
+            $xeSelect.$nextTick(function () {
+              resolve();
+            });
+          }, 50);
+        });
+      }
+      return $xeSelect.$nextTick();
+    },
+    /**
+     * 刷新滚动条
+     */
+    refreshScroll: function refreshScroll() {
+      var $xeSelect = this;
+      var internalData = $xeSelect.internalData;
+      var lastScrollLeft = internalData.lastScrollLeft,
+        lastScrollTop = internalData.lastScrollTop;
+      return $xeSelect.clearScroll().then(function () {
+        if (lastScrollLeft || lastScrollTop) {
+          internalData.lastScrollLeft = 0;
+          internalData.lastScrollTop = 0;
+          return $xeSelect.scrollTo(lastScrollLeft, lastScrollTop);
+        }
+      });
+    },
+    /**
+     * 重新计算列表
+     */
+    recalculate: function recalculate() {
+      var $xeSelect = this;
+      var el = $xeSelect.$refs.refElem;
+      if (el && el.clientWidth && el.clientHeight) {
+        return $xeSelect.computeScrollLoad();
+      }
+      return Promise.resolve();
+    },
+    loadYData: function loadYData(evnt) {
+      var $xeSelect = this;
+      var internalData = $xeSelect.internalData;
+      var scrollYStore = internalData.scrollYStore;
+      var startIndex = scrollYStore.startIndex,
+        endIndex = scrollYStore.endIndex,
+        visibleSize = scrollYStore.visibleSize,
+        offsetSize = scrollYStore.offsetSize,
+        rowHeight = scrollYStore.rowHeight;
+      var scrollBodyElem = evnt.target;
+      var scrollTop = scrollBodyElem.scrollTop;
+      var toVisibleIndex = Math.floor(scrollTop / rowHeight);
+      var offsetStartIndex = Math.max(0, toVisibleIndex - 1 - offsetSize);
+      var offsetEndIndex = toVisibleIndex + visibleSize + offsetSize;
+      if (toVisibleIndex <= startIndex || toVisibleIndex >= endIndex - visibleSize - 1) {
+        if (startIndex !== offsetStartIndex || endIndex !== offsetEndIndex) {
+          scrollYStore.startIndex = offsetStartIndex;
+          scrollYStore.endIndex = offsetEndIndex;
+          $xeSelect.updateYData();
+        }
+      }
+    },
+    // 滚动、拖动过程中不需要触发
+    isVMScrollProcess: function isVMScrollProcess() {
+      var $xeSelect = this;
+      var internalData = $xeSelect.internalData;
+      var delayHover = 250;
+      var lastScrollTime = internalData.lastScrollTime;
+      return !!(lastScrollTime && Date.now() < lastScrollTime + delayHover);
+    },
+    scrollEvent: function scrollEvent(evnt) {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      var internalData = $xeSelect.internalData;
+      var scrollBodyElem = evnt.target;
+      var scrollTop = scrollBodyElem.scrollTop;
+      var scrollLeft = scrollBodyElem.scrollLeft;
+      var isX = scrollLeft !== internalData.lastScrollLeft;
+      var isY = scrollTop !== internalData.lastScrollTop;
+      internalData.lastScrollTop = scrollTop;
+      internalData.lastScrollLeft = scrollLeft;
+      if (reactData.scrollYLoad) {
+        $xeSelect.loadYData(evnt);
+      }
+      internalData.lastScrollTime = Date.now();
+      $xeSelect.dispatchEvent('scroll', {
+        scrollLeft: scrollLeft,
+        scrollTop: scrollTop,
+        isX: isX,
+        isY: isY
+      }, evnt);
+    },
+    /**
+     * 加载数据
+     * @param {Array} datas 数据
+     */
+    loadData: function loadData(datas) {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      var reactData = $xeSelect.reactData;
+      var internalData = $xeSelect.internalData;
+      $xeSelect.cacheItemMap(datas || []);
+      var multiple = props.multiple;
+      var isLoaded = internalData.isLoaded,
+        fullData = internalData.fullData,
+        scrollYStore = internalData.scrollYStore;
+      var defaultOpts = $xeSelect.computeDefaultOpts;
+      var virtualYOpts = $xeSelect.computeVirtualYOpts;
+      var valueField = $xeSelect.computeValueField;
+      Object.assign(scrollYStore, {
+        startIndex: 0,
+        endIndex: 1,
+        visibleSize: 0
+      });
+      internalData.synchData = datas || [];
+      // 如果gt为0，则总是启用
+      reactData.scrollYLoad = !!virtualYOpts.enabled && virtualYOpts.gt > -1 && (virtualYOpts.gt === 0 || virtualYOpts.gt <= fullData.length);
+      $xeSelect.handleData();
+      if (!isLoaded) {
+        var selectMode = defaultOpts.selectMode;
+        if (datas.length > 0 && _xeUtils.default.eqNull(props.value)) {
+          if (selectMode === 'all') {
+            if (multiple) {
+              $xeSelect.$nextTick(function () {
+                $xeSelect.emitDefaultValue(datas.map(function (item) {
+                  return item[valueField];
+                }));
+              });
+            } else {
+              errLog('vxe.error.notConflictProp', ['default-config.selectMode=all', 'multiple=true']);
+            }
+          } else if (selectMode === 'first' || selectMode === 'last') {
+            var selectItem = _xeUtils.default[selectMode](datas);
+            if (selectItem) {
+              $xeSelect.$nextTick(function () {
+                if (_xeUtils.default.eqNull(props.value)) {
+                  $xeSelect.emitDefaultValue(selectItem[valueField]);
+                }
+              });
+            }
+          }
+          internalData.isLoaded = true;
+        }
+      }
+      return $xeSelect.computeScrollLoad().then(function () {
+        $xeSelect.refreshScroll();
+      });
+    },
+    reloadData: function reloadData(datas) {
+      var $xeSelect = this;
+      var internalData = $xeSelect.internalData;
+      internalData.isLoaded = false;
+      $xeSelect.clearScroll();
+      return $xeSelect.loadData(datas);
+    },
+    clearScroll: function clearScroll() {
+      var $xeSelect = this;
+      var internalData = $xeSelect.internalData;
+      var scrollBodyElem = $xeSelect.$refs.refVirtualWrapper;
+      if (scrollBodyElem) {
+        scrollBodyElem.scrollTop = 0;
+        scrollBodyElem.scrollLeft = 0;
+      }
+      internalData.lastScrollTop = 0;
+      internalData.lastScrollLeft = 0;
+      return $xeSelect.$nextTick();
+    },
+    hasOptGroupById: function hasOptGroupById(optid) {
+      var $xeSelect = this;
+      var internalData = $xeSelect.internalData;
+      var optGroupKeyMaps = internalData.optGroupKeyMaps;
+      return !!optGroupKeyMaps[optid];
+    },
+    //
+    // Render
+    //
+    renderRadio: function renderRadio(h, option, isOptGroup, isChecked, isDisabled) {
+      var $xeSelect = this;
+      var radioOpts = $xeSelect.computeRadioOpts;
+      var showIcon = radioOpts.showIcon,
+        trigger = radioOpts.trigger;
+      if (isOptGroup || showIcon === false) {
+        return (0, _ui.renderEmptyElement)($xeSelect);
+      }
+      var ons = {};
+      if (!trigger || trigger === 'default') {
+        ons.click = function (evnt) {
+          if (!isDisabled && !isOptGroup) {
+            $xeSelect.changeOptionEvent(evnt, option);
+          }
+        };
+      }
+      return h('div', {
+        key: 2,
+        class: ['vxe-select-option--radio', {
+          'is--checked': isChecked,
+          'is--disabled': isDisabled
+        }],
+        on: ons
+      }, [h('span', {
+        class: ['vxe-radio--icon', isChecked ? (0, _ui.getIcon)().RADIO_CHECKED : (0, _ui.getIcon)().RADIO_UNCHECKED]
+      })]);
+    },
+    renderCheckbox: function renderCheckbox(h, option, isOptGroup, isChecked, isDisabled) {
+      var $xeSelect = this;
+      var checkboxOpts = $xeSelect.computeCheckboxOpts;
+      var showIcon = checkboxOpts.showIcon,
+        trigger = checkboxOpts.trigger;
+      if (isOptGroup || showIcon === false) {
+        return (0, _ui.renderEmptyElement)($xeSelect);
+      }
+      var ons = {};
+      if (!trigger || trigger === 'default') {
+        ons.click = function (evnt) {
+          if (!isDisabled && !isOptGroup) {
+            $xeSelect.changeOptionEvent(evnt, option);
+          }
+        };
+      }
+      return h('div', {
+        key: 3,
+        class: ['vxe-select-option--checkbox', {
+          'is--checked': isChecked,
+          'is--disabled': isDisabled
+        }],
+        on: ons
+      }, [h('span', {
+        class: ['vxe-checkbox--icon', isChecked ? (0, _ui.getIcon)().CHECKBOX_CHECKED : (0, _ui.getIcon)().CHECKBOX_UNCHECKED]
+      })]);
+    },
+    renderOption: function renderOption(h, list) {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      var slots = $xeSelect.$scopedSlots;
+      var reactData = $xeSelect.reactData;
+      var internalData = $xeSelect.internalData;
+      var allowCreate = props.allowCreate,
+        optionKey = props.optionKey,
+        multiple = props.multiple,
+        showRadio = props.showRadio,
+        showCheckbox = props.showCheckbox;
+      var currentOption = reactData.currentOption;
+      var optAddMaps = internalData.optAddMaps;
+      var optionOpts = $xeSelect.computeOptionOpts;
+      var labelField = $xeSelect.computeLabelField;
+      var valueField = $xeSelect.computeValueField;
+      var groupLabelField = $xeSelect.computeGroupLabelField;
+      var selectVals = $xeSelect.computeSelectVals;
+      var radioOpts = $xeSelect.computeRadioOpts;
+      var checkboxOpts = $xeSelect.computeCheckboxOpts;
+      var useKey = optionOpts.useKey,
+        height = optionOpts.height;
+      var optionSlot = slots.option;
+      var isCheckboxMode = showCheckbox && multiple;
+      var isRadioMode = showRadio && !multiple;
+      return list.map(function (option, cIndex) {
+        var slots = option.slots,
+          className = option.className;
+        var optid = $xeSelect.getOptId(option);
+        var optionValue = option[valueField];
+        var isOptGroup = $xeSelect.hasOptGroupById(optid);
+        var isAdd = !!(allowCreate && optAddMaps[optid]);
+        var isSelected = !isAdd && selectVals.indexOf(optionValue) > -1;
+        var isVisible = isAdd || !isOptGroup || isOptionVisible(option);
+        var isDisabled = !isAdd && $xeSelect.checkOptionDisabled(isSelected, option);
+        var defaultSlot = slots ? slots.default : null;
+        var optSlot = defaultSlot || optionSlot;
+        var optParams = {
+          option: option,
+          group: isOptGroup ? option : null,
+          $select: $xeSelect
+        };
+        var optLabel = '';
+        var optVNs = [];
+        if (isCheckboxMode) {
+          optVNs.push($xeSelect.renderCheckbox(h, option, isOptGroup, isSelected, isDisabled));
+        } else if (isRadioMode) {
+          optVNs.push($xeSelect.renderRadio(h, option, isOptGroup, isSelected, isDisabled));
+        }
+        var otlbVNs = [];
+        if (optSlot) {
+          otlbVNs = $xeSelect.callSlot(optSlot, optParams, h);
+        } else {
+          optLabel = (0, _utils.getFuncText)(option[isOptGroup ? groupLabelField : labelField] || optionValue);
+          otlbVNs = [optLabel];
+        }
+        optVNs.push(h('div', {
+          key: 1,
+          class: 'vxe-select-option--label'
+        }, otlbVNs));
+        var ons = {
+          mousedown: function mousedown(evnt) {
+            var isLeftBtn = evnt.button === 0;
+            if (isLeftBtn) {
+              evnt.stopPropagation();
+            }
+          },
+          mouseenter: function mouseenter() {
+            if (!isDisabled && !isOptGroup && !$xeSelect.isVMScrollProcess()) {
+              $xeSelect.setCurrentOption(option);
+            }
+          }
+        };
+        if (isCheckboxMode ? checkboxOpts.trigger === 'option' : isRadioMode ? radioOpts.trigger === 'option' : true) {
+          ons.click = function (evnt) {
+            if (!isDisabled && !isOptGroup) {
+              $xeSelect.changeOptionEvent(evnt, option);
+            }
+          };
+        }
+        return isVisible ? h('div', {
+          key: useKey || optionKey ? optid : cIndex,
+          class: ['vxe-select-option', className ? _xeUtils.default.isFunction(className) ? className(optParams) : className : '', {
+            'vxe-select-optgroup': isOptGroup,
+            'is--disabled': isDisabled,
+            'is--selected': isSelected,
+            'is--add': isAdd,
+            'is--hover': currentOption && $xeSelect.getOptId(currentOption) === optid
+          }],
+          attrs: {
+            optid: optid,
+            title: optLabel || null
+          },
+          style: height ? {
+            height: (0, _dom.toCssUnit)(height)
+          } : undefined,
+          on: ons
+        }, allowCreate ? [h('span', {
+          key: 1,
+          class: 'vxe-select-option--add-label'
+        }, optVNs), isAdd ? h('span', {
+          key: 2,
+          class: 'vxe-select-option--add-icon'
+        }, [h('i', {
+          class: (0, _ui.getIcon)().SELECT_ADD_OPTION
+        })]) : (0, _ui.renderEmptyElement)($xeSelect)] : optVNs) : (0, _ui.renderEmptyElement)($xeSelect);
+      });
+    },
+    renderOpts: function renderOpts(h) {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      var reactData = $xeSelect.reactData;
+      var optList = reactData.optList,
+        searchLoading = reactData.searchLoading;
+      if (searchLoading) {
+        return [h('div', {
+          class: 'vxe-select--search-loading'
+        }, [h('i', {
+          class: ['vxe-select--search-icon', (0, _ui.getIcon)().SELECT_LOADED]
+        }), h('span', {
+          class: 'vxe-select--search-text'
+        }, (0, _ui.getI18n)('vxe.select.loadingText'))])];
+      }
+      if (optList.length) {
+        return $xeSelect.renderOption(h, optList);
+      }
+      return [h('div', {
+        class: 'vxe-select--empty-placeholder'
+      }, props.emptyText || (0, _ui.getI18n)('vxe.select.emptyText'))];
+    },
+    renderVN: function renderVN(h) {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      var slots = $xeSelect.$scopedSlots;
+      var reactData = $xeSelect.reactData;
+      var className = props.className,
+        multiple = props.multiple,
+        loading = props.loading,
+        filterable = props.filterable,
+        showTotalButton = props.showTotalButton,
+        showCheckedButton = props.showCheckedButton,
+        showClearButton = props.showClearButton,
+        showCloseButton = props.showCloseButton;
+      var initialized = reactData.initialized,
+        isActivated = reactData.isActivated,
+        isAniVisible = reactData.isAniVisible,
+        optList = reactData.optList,
+        visiblePanel = reactData.visiblePanel,
+        bodyHeight = reactData.bodyHeight,
+        topSpaceHeight = reactData.topSpaceHeight;
+      var vSize = $xeSelect.computeSize;
+      var isDisabled = $xeSelect.computeIsDisabled;
+      var selectLabel = $xeSelect.computeSelectLabel;
+      var fullLabel = $xeSelect.computeFullLabel;
+      var btnTransfer = $xeSelect.computeBtnTransfer;
+      var formReadonly = $xeSelect.computeFormReadonly;
+      var inpPlaceholder = $xeSelect.computeInpPlaceholder;
+      var popupOpts = $xeSelect.computePopupOpts;
+      var popupWrapperStyle = $xeSelect.computePopupWrapperStyle;
+      var defaultSlot = slots.default;
+      var headerSlot = slots.header;
+      var footerSlot = slots.footer;
+      var prefixSlot = slots.prefix;
+      var ppClassName = popupOpts.className || props.popupClassName;
+      if (formReadonly) {
+        return h('div', {
+          ref: 'refElem',
+          class: ['vxe-select--readonly', className]
+        }, [h('div', {
+          class: 'vxe-select-slots',
+          ref: 'hideOption'
+        }, defaultSlot ? $xeSelect.callSlot(defaultSlot, {}, h) : []), h('span', {
+          class: 'vxe-select-label',
+          attrs: {
+            fullLabel: fullLabel
+          }
+        }, selectLabel)]);
+      }
+      var selectVals = $xeSelect.computeSelectVals;
+      return h('div', {
+        ref: 'refElem',
+        class: ['vxe-select', className ? _xeUtils.default.isFunction(className) ? className({
+          $select: $xeSelect
+        }) : className : '', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--visible', visiblePanel), 'is--disabled', isDisabled), 'is--filter', filterable), 'is--loading', loading), 'is--active', isActivated)]
+      }, [h('div', {
+        class: 'vxe-select-slots',
+        ref: 'hideOption'
+      }, defaultSlot ? defaultSlot.call($xeSelect, {}) : []), h(_input.default, {
+        ref: 'refInput',
+        props: {
+          clearable: props.clearable,
+          placeholder: inpPlaceholder,
+          editable: false,
+          disabled: isDisabled,
+          type: 'text',
+          prefixIcon: props.prefixIcon,
+          suffixIcon: loading ? (0, _ui.getIcon)().SELECT_LOADED : visiblePanel ? (0, _ui.getIcon)().SELECT_OPEN : (0, _ui.getIcon)().SELECT_CLOSE,
+          autoFocus: false,
+          title: fullLabel,
+          value: selectLabel
+        },
+        on: {
+          clear: $xeSelect.clearEvent,
+          click: $xeSelect.clickEvent,
+          focus: $xeSelect.focusEvent,
+          blur: $xeSelect.blurEvent,
+          'suffix-click': $xeSelect.suffixClickEvent
+        },
+        scopedSlots: prefixSlot ? {
+          prefix: function prefix() {
+            return prefixSlot({});
+          }
+        } : {}
+      }), h('div', {
+        ref: 'refOptionPanel',
+        class: ['vxe-table--ignore-clear vxe-select--panel', ppClassName ? _xeUtils.default.isFunction(ppClassName) ? ppClassName({
+          $select: $xeSelect
+        }) : ppClassName : '', _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--transfer', btnTransfer), 'ani--leave', !loading && isAniVisible), 'ani--enter', !loading && visiblePanel)],
+        attrs: {
+          placement: reactData.panelPlacement
+        },
+        style: reactData.panelStyle
+      }, initialized && (visiblePanel || isAniVisible) ? [h('div', {
+        class: 'vxe-select--panel-wrapper',
+        style: popupWrapperStyle
+      }, [filterable ? h('div', {
+        class: 'vxe-select--panel-search'
+      }, [h(_input.default, {
+        ref: 'refInpSearch',
+        class: 'vxe-select-search--input',
+        props: {
+          value: reactData.searchValue,
+          type: 'text',
+          clearable: true,
+          disabled: false,
+          readonly: false,
+          placeholder: (0, _ui.getI18n)('vxe.select.search'),
+          prefixIcon: (0, _ui.getIcon)().INPUT_SEARCH
+        },
+        on: {
+          'model-value': $xeSelect.modelSearchEvent,
+          focus: $xeSelect.focusSearchEvent,
+          change: $xeSelect.triggerSearchEvent,
+          search: $xeSelect.triggerSearchEvent
+        }
+      })]) : (0, _ui.renderEmptyElement)($xeSelect), showCheckedButton && multiple || showClearButton || headerSlot ? h('div', {
+        class: 'vxe-select--panel-header'
+      }, headerSlot ? $xeSelect.callSlot(headerSlot, {}, h) : [h('div', {
+        class: 'vxe-tree-select--header-button'
+      }, [h('div', {
+        class: 'vxe-tree-select--header-btns'
+      }, [showCheckedButton && multiple ? h(_button.default, {
+        props: {
+          content: (0, _ui.getI18n)('vxe.select.allChecked'),
+          mode: 'text'
+        },
+        on: {
+          click: $xeSelect.allCheckedPanelEvent
+        }
+      }) : (0, _ui.renderEmptyElement)($xeSelect), showClearButton ? h(_button.default, {
+        props: {
+          content: (0, _ui.getI18n)('vxe.select.clear'),
+          mode: 'text'
+        },
+        on: {
+          click: $xeSelect.clearCheckedPanelEvent
+        }
+      }) : (0, _ui.renderEmptyElement)($xeSelect)])])]) : (0, _ui.renderEmptyElement)($xeSelect), h('div', {
+        class: 'vxe-select--panel-body'
+      }, [h('div', {
+        ref: 'refVirtualWrapper',
+        class: 'vxe-select-option--wrapper',
+        on: {
+          scroll: $xeSelect.scrollEvent
+        }
+      }, [h('div', {
+        class: 'vxe-select--y-space',
+        style: {
+          height: bodyHeight ? "".concat(bodyHeight, "px") : ''
+        }
+      }), h('div', {
+        ref: 'refVirtualBody',
+        class: 'vxe-select--body',
+        style: {
+          transform: "translateY(".concat(topSpaceHeight, "px)")
+        }
+      }, $xeSelect.renderOpts(h))])]), footerSlot || showTotalButton || showCloseButton && multiple ? h('div', {
+        class: 'vxe-select--panel-footer'
+      }, footerSlot ? $xeSelect.callSlot(footerSlot, {}, h) : [h('div', {
+        class: 'vxe-select--footer-button'
+      }, [showTotalButton ? h('div', {
+        class: 'vxe-select--total-btns'
+      }, (0, _ui.getI18n)('vxe.select.total', [selectVals.length, optList.length])) : (0, _ui.renderEmptyElement)($xeSelect), showCloseButton && multiple ? h('div', {
+        class: 'vxe-select--oper-btns'
+      }, [h(_button.default, {
+        props: {
+          content: (0, _ui.getI18n)('vxe.select.close'),
+          mode: 'text'
+        },
+        on: {
+          click: $xeSelect.closePanelEvent
+        }
+      })]) : (0, _ui.renderEmptyElement)($xeSelect)])]) : (0, _ui.renderEmptyElement)($xeSelect)])] : [])]);
+    }
+  },
+  watch: {
+    'reactData.staticOptions': function reactDataStaticOptions(val) {
+      var $xeSelect = this;
+      $xeSelect.loadData(val);
+    },
+    options: function options(val) {
+      var $xeSelect = this;
+      $xeSelect.loadData(val);
+    },
+    optionGroups: function optionGroups(val) {
+      var $xeSelect = this;
+      $xeSelect.loadData(val);
+    }
+  },
+  created: function created() {
+    var $xeSelect = this;
+    $xeSelect.internalData = createInternalData();
+  },
+  mounted: function mounted() {
+    var $xeSelect = this;
+    var props = $xeSelect;
+    $xeSelect.$nextTick(function () {
+      var options = props.options,
+        optionGroups = props.optionGroups;
+      if (optionGroups) {
+        $xeSelect.loadData(optionGroups);
+      } else if (options) {
+        $xeSelect.loadData(options);
+      }
+    });
+    _ui.globalEvents.on($xeSelect, 'mousewheel', $xeSelect.handleGlobalMousewheelEvent);
+    _ui.globalEvents.on($xeSelect, 'mousedown', $xeSelect.handleGlobalMousedownEvent);
+    _ui.globalEvents.on($xeSelect, 'keydown', $xeSelect.handleGlobalKeydownEvent);
+    _ui.globalEvents.on($xeSelect, 'blur', $xeSelect.handleGlobalBlurEvent);
+    _ui.globalEvents.on($xeSelect, 'resize', $xeSelect.handleGlobalResizeEvent);
+  },
+  beforeDestroy: function beforeDestroy() {
+    var $xeSelect = this;
+    var panelElem = $xeSelect.$refs.refOptionPanel;
+    if (panelElem && panelElem.parentNode) {
+      panelElem.parentNode.removeChild(panelElem);
+    }
+    _ui.globalEvents.off($xeSelect, 'mousewheel');
+    _ui.globalEvents.off($xeSelect, 'mousedown');
+    _ui.globalEvents.off($xeSelect, 'keydown');
+    _ui.globalEvents.off($xeSelect, 'blur');
+    _ui.globalEvents.off($xeSelect, 'resize');
+  },
+  destroyed: function destroyed() {
+    var $xeSelect = this;
+    var reactData = $xeSelect.reactData;
+    var internalData = $xeSelect.internalData;
+    _xeUtils.default.assign(reactData, createReactData());
+    _xeUtils.default.assign(internalData, createInternalData());
+  },
+  render: function render(h) {
+    return this.renderVN(h);
+  }
+});
+/* define-vxe-component end */