vxe-pc-ui 4.20.34 → 4.20.35

package/es/select/src/select.js

@@ -70,874 +70,853 @@ function createInternalData() {
     hpTimeout: void 0
   };
 }
-var select_default = defineVxeComponent({
-  name: "VxeSelect",
-  props: {
-    modelValue: [String, Number, Boolean, Array],
-    defaultConfig: Object,
-    emptyValue: {
-      type: [String, Number, Boolean, Array],
-      default: () => getConfig().select.emptyValue
-    },
-    clearable: {
-      type: Boolean,
-      default: () => getConfig().select.clearable
-    },
-    placeholder: String,
-    readonly: {
-      type: Boolean,
-      default: null
-    },
-    loading: Boolean,
-    disabled: {
-      type: Boolean,
-      default: null
-    },
-    multiple: Boolean,
-    multiCharOverflow: {
-      type: [Number, String],
-      default: () => getConfig().select.multiCharOverflow
-    },
-    prefixIcon: String,
-    allowCreate: {
-      type: Boolean,
-      default: () => 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],
-    width: [String, Number],
-    max: {
-      type: [String, Number],
-      default: null
-    },
-    showRadio: {
-      type: Boolean,
-      default: () => getConfig().select.showRadio
-    },
-    radioConfig: Object,
-    showCheckbox: {
-      type: Boolean,
-      default: () => getConfig().select.showCheckedButton
-    },
-    checkboxConfig: Object,
-    /**
-     * 已废弃，请使用 popupConfig.zIndex
-     * @deprecated
-     */
-    zIndex: Number,
-    size: {
-      type: String,
-      default: () => getConfig().select.size || getConfig().size
-    },
-    filterable: Boolean,
-    /**
-     * 已废弃，被 filter-config.filterMethod 替换
-     * @deprecated
-     */
-    filterMethod: Function,
-    filterConfig: Object,
-    remote: Boolean,
-    remoteConfig: Object,
-    showBadge: Boolean,
-    badgeConfig: Object,
-    emptyText: String,
-    checkedClosable: {
-      type: Boolean,
-      default: () => getConfig().select.checkedClosable
-    },
-    clearClosable: {
-      type: Boolean,
-      default: () => getConfig().select.clearClosable
-    },
-    showCloseButton: {
-      type: Boolean,
-      default: () => getConfig().select.showCloseButton
-    },
-    showTotalButton: {
-      type: Boolean,
-      default: () => getConfig().select.showTotalButton
-    },
-    showCheckedButton: {
-      type: Boolean,
-      default: () => getConfig().select.showCheckedButton
-    },
-    showClearButton: {
-      type: Boolean,
-      default: () => getConfig().select.showClearButton
-    },
-    transfer: {
-      type: Boolean,
-      default: null
-    },
-    popupConfig: Object,
-    virtualYConfig: Object,
-    scrollY: Object,
-    useScrollbar: {
-      type: Boolean,
-      default: () => getDefVal(getConfig().select.useScrollbar, getConfig().useScrollbar)
-    },
-    scrollbarConfig: Object,
-    /**
-     * 已废弃，被 remote-config.queryMethod 替换
-     * @deprecated
-     */
-    remoteMethod: Function,
-    /**
-     * 已废弃，被 option-config.keyField 替换
-     * @deprecated
-     */
-    optionId: {
-      type: String,
-      default: () => getConfig().select.optionId
+var select_default = (
+  /* define-vxe-component start */
+  defineVxeComponent({
+    name: "VxeSelect",
+    props: {
+      modelValue: [String, Number, Boolean, Array],
+      defaultConfig: Object,
+      emptyValue: {
+        type: [String, Number, Boolean, Array],
+        default: () => getConfig().select.emptyValue
+      },
+      clearable: {
+        type: Boolean,
+        default: () => getConfig().select.clearable
+      },
+      placeholder: String,
+      readonly: {
+        type: Boolean,
+        default: null
+      },
+      loading: Boolean,
+      disabled: {
+        type: Boolean,
+        default: null
+      },
+      multiple: Boolean,
+      multiCharOverflow: {
+        type: [Number, String],
+        default: () => getConfig().select.multiCharOverflow
+      },
+      prefixIcon: String,
+      allowCreate: {
+        type: Boolean,
+        default: () => 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],
+      width: [String, Number],
+      max: {
+        type: [String, Number],
+        default: null
+      },
+      showRadio: {
+        type: Boolean,
+        default: () => getConfig().select.showRadio
+      },
+      radioConfig: Object,
+      showCheckbox: {
+        type: Boolean,
+        default: () => getConfig().select.showCheckedButton
+      },
+      checkboxConfig: Object,
+      /**
+       * 已废弃，请使用 popupConfig.zIndex
+       * @deprecated
+       */
+      zIndex: Number,
+      size: {
+        type: String,
+        default: () => getConfig().select.size || getConfig().size
+      },
+      filterable: Boolean,
+      /**
+       * 已废弃，被 filter-config.filterMethod 替换
+       * @deprecated
+       */
+      filterMethod: Function,
+      filterConfig: Object,
+      remote: Boolean,
+      remoteConfig: Object,
+      showBadge: Boolean,
+      badgeConfig: Object,
+      emptyText: String,
+      checkedClosable: {
+        type: Boolean,
+        default: () => getConfig().select.checkedClosable
+      },
+      clearClosable: {
+        type: Boolean,
+        default: () => getConfig().select.clearClosable
+      },
+      showCloseButton: {
+        type: Boolean,
+        default: () => getConfig().select.showCloseButton
+      },
+      showTotalButton: {
+        type: Boolean,
+        default: () => getConfig().select.showTotalButton
+      },
+      showCheckedButton: {
+        type: Boolean,
+        default: () => getConfig().select.showCheckedButton
+      },
+      showClearButton: {
+        type: Boolean,
+        default: () => getConfig().select.showClearButton
+      },
+      transfer: {
+        type: Boolean,
+        default: null
+      },
+      popupConfig: Object,
+      virtualYConfig: Object,
+      scrollY: Object,
+      useScrollbar: {
+        type: Boolean,
+        default: () => getDefVal(getConfig().select.useScrollbar, getConfig().useScrollbar)
+      },
+      scrollbarConfig: Object,
+      /**
+       * 已废弃，被 remote-config.queryMethod 替换
+       * @deprecated
+       */
+      remoteMethod: Function,
+      /**
+       * 已废弃，被 option-config.keyField 替换
+       * @deprecated
+       */
+      optionId: {
+        type: String,
+        default: () => getConfig().select.optionId
+      },
+      /**
+       * 已废弃，被 option-config.useKey 替换
+       * @deprecated
+       */
+      optionKey: Boolean
     },
-    /**
-     * 已废弃，被 option-config.useKey 替换
-     * @deprecated
-     */
-    optionKey: Boolean
-  },
-  emits: ["update:modelValue", "change", "default-change", "all-change", "clear", "blur", "focus", "click", "scroll", "visible-change"],
-  setup(props, context) {
-    const { slots, emit } = context;
-    const $xeModal = inject("$xeModal", null);
-    const $xeDrawer = inject("$xeDrawer", null);
-    const $xeTable = inject("$xeTable", null);
-    const $xeCard = inject("$xeCard", null);
-    const $xeForm = inject("$xeForm", null);
-    const formItemInfo = inject("xeFormItemInfo", null);
-    const xID = XEUtils.uniqueId();
-    const refElem = ref();
-    const refInput = ref();
-    const refInpSearch = ref();
-    const refVirtualWrapper = ref();
-    const refOptionPanel = ref();
-    const refVirtualSpaceElem = ref();
-    const refVirtualBody = ref();
-    const { computeSize } = useFns.useSize(props);
-    const { computeIsVScrollbar } = useFns.useVScrollbar(props);
-    const reactData = reactive(createReactData());
-    const internalData = createInternalData();
-    const refMaps = {
-      refElem
-    };
-    const $xeSelect = {
-      xID,
-      props,
-      context,
-      reactData,
-      internalData,
-      getRefMaps: () => refMaps
-    };
-    const { refTrackXElem, refTrackYElem, refThumbXElem, refThumbYElem, updateThumbSize, updateThumbOffset, clickTrackXEvent, clickTrackYEvent, pointerdownThumbXEvent, pointermoveThumbXEvent, cleatPointerThumbEvent, pointerdownThumbYEvent, pointermoveThumbYEvent } = useFns.useInitVScrollbar($xeSelect);
-    const computeFormReadonly = computed(() => {
-      const { readonly } = props;
-      if (readonly === null) {
-        if ($xeForm) {
-          return $xeForm.props.readonly;
+    emits: ["update:modelValue", "change", "default-change", "all-change", "clear", "blur", "focus", "click", "scroll", "visible-change"],
+    setup(props, context) {
+      const { slots, emit } = context;
+      const $xeModal = inject("$xeModal", null);
+      const $xeDrawer = inject("$xeDrawer", null);
+      const $xeTable = inject("$xeTable", null);
+      const $xeCard = inject("$xeCard", null);
+      const $xeForm = inject("$xeForm", null);
+      const formItemInfo = inject("xeFormItemInfo", null);
+      const xID = XEUtils.uniqueId();
+      const refElem = ref();
+      const refInput = ref();
+      const refInpSearch = ref();
+      const refVirtualWrapper = ref();
+      const refOptionPanel = ref();
+      const refVirtualSpaceElem = ref();
+      const refVirtualBody = ref();
+      const { computeSize } = useFns.useSize(props);
+      const { computeIsVScrollbar } = useFns.useVScrollbar(props);
+      const reactData = reactive(createReactData());
+      const internalData = createInternalData();
+      const refMaps = {
+        refElem
+      };
+      const $xeSelect = {
+        xID,
+        props,
+        context,
+        reactData,
+        internalData,
+        getRefMaps: () => refMaps
+      };
+      const { refTrackXElem, refTrackYElem, refThumbXElem, refThumbYElem, updateThumbSize, updateThumbOffset, clickTrackXEvent, clickTrackYEvent, pointerdownThumbXEvent, pointermoveThumbXEvent, cleatPointerThumbEvent, pointerdownThumbYEvent, pointermoveThumbYEvent } = useFns.useInitVScrollbar($xeSelect);
+      const computeFormReadonly = computed(() => {
+        const { readonly } = props;
+        if (readonly === null) {
+          if ($xeForm) {
+            return $xeForm.props.readonly;
+          }
+          return false;
         }
-        return false;
-      }
-      return readonly;
-    });
-    const computeIsDisabled = computed(() => {
-      const { disabled } = props;
-      if (disabled === null) {
-        if ($xeForm) {
-          return $xeForm.props.disabled;
+        return readonly;
+      });
+      const computeIsDisabled = computed(() => {
+        const { disabled } = props;
+        if (disabled === null) {
+          if ($xeForm) {
+            return $xeForm.props.disabled;
+          }
+          return false;
         }
-        return false;
-      }
-      return disabled;
-    });
-    const computeBtnTransfer = computed(() => {
-      const { transfer } = props;
-      const popupOpts = computePopupOpts.value;
-      if (XEUtils.isBoolean(popupOpts.transfer)) {
-        return popupOpts.transfer;
-      }
-      if (transfer === null) {
-        const globalTransfer = getConfig().select.transfer;
-        if (XEUtils.isBoolean(globalTransfer)) {
-          return globalTransfer;
-        }
-        if ($xeTable || $xeModal || $xeDrawer || $xeCard || $xeForm) {
-          return true;
+        return disabled;
+      });
+      const computeBtnTransfer = computed(() => {
+        const { transfer } = props;
+        const popupOpts = computePopupOpts.value;
+        if (XEUtils.isBoolean(popupOpts.transfer)) {
+          return popupOpts.transfer;
         }
-      }
-      return transfer;
-    });
-    const computeInpPlaceholder = computed(() => {
-      const { placeholder } = props;
-      if (placeholder) {
-        return getFuncText(placeholder);
-      }
-      const globalPlaceholder = getConfig().select.placeholder;
-      if (globalPlaceholder) {
-        return getFuncText(globalPlaceholder);
-      }
-      return getI18n("vxe.base.pleaseSelect");
-    });
-    const computeDefaultOpts = computed(() => {
-      return Object.assign({}, props.defaultConfig);
-    });
-    const computePropsOpts = computed(() => {
-      return Object.assign({}, getConfig().select.optionProps, props.optionProps);
-    });
-    const computeGroupPropsOpts = computed(() => {
-      return Object.assign({}, getConfig().select.optionGroupProps, props.optionGroupProps);
-    });
-    const computeLabelField = computed(() => {
-      const propsOpts = computePropsOpts.value;
-      return propsOpts.label || "label";
-    });
-    const computeValueField = computed(() => {
-      const propsOpts = computePropsOpts.value;
-      return propsOpts.value || "value";
-    });
-    const computeGroupLabelField = computed(() => {
-      const groupPropsOpts = computeGroupPropsOpts.value;
-      return groupPropsOpts.label || "label";
-    });
-    const computeGroupOptionsField = computed(() => {
-      const groupPropsOpts = computeGroupPropsOpts.value;
-      return groupPropsOpts.options || "options";
-    });
-    const computeIsMaximize = computed(() => {
-      const selectVals = computeSelectVals.value;
-      return checkMaxLimit(selectVals);
-    });
-    const computePopupOpts = computed(() => {
-      return Object.assign({}, getConfig().select.popupConfig, props.popupConfig);
-    });
-    const computeVirtualYOpts = computed(() => {
-      return Object.assign({}, getConfig().select.virtualYConfig || getConfig().select.scrollY, props.virtualYConfig || props.scrollY);
-    });
-    const computeRemoteOpts = computed(() => {
-      return Object.assign({}, getConfig().select.remoteConfig, props.remoteConfig);
-    });
-    const computeBadgeOpts = computed(() => {
-      return Object.assign({}, getConfig().select.badgeConfig, props.badgeConfig);
-    });
-    const computeBadgeCountNum = computed(() => {
-      const { showBadge } = props;
-      if (!showBadge) {
-        return 0;
-      }
-      const badgeOpts = computeBadgeOpts.value;
-      const { count } = badgeOpts;
-      return count ? XEUtils.toNumber(count) : 0;
-    });
-    const computeBadgeLabel = computed(() => {
-      const { showBadge } = props;
-      if (!showBadge) {
-        return "";
-      }
-      const badgeOpts = computeBadgeOpts.value;
-      const { dot, text, max } = badgeOpts;
-      if (dot) {
-        return "";
-      }
-      if (text) {
-        return `${text}`;
-      }
-      const countNum = computeBadgeCountNum.value;
-      if (countNum) {
-        const maxNum = max ? XEUtils.toNumber(max) : 99;
-        return countNum > maxNum ? `${maxNum}+` : `${countNum}`;
-      }
-      return "";
-    });
-    const computeFilterOpts = computed(() => {
-      return Object.assign({}, getConfig().select.filterConfig, props.filterConfig);
-    });
-    const computeOptionOpts = computed(() => {
-      return Object.assign({}, getConfig().select.optionConfig, props.optionConfig);
-    });
-    const computeRadioOpts = computed(() => {
-      return Object.assign({}, getConfig().select.radioConfig, props.radioConfig);
-    });
-    const computeCheckboxOpts = computed(() => {
-      return Object.assign({}, getConfig().select.checkboxConfig, props.checkboxConfig);
-    });
-    const computeMultiMaxCharNum = computed(() => {
-      return XEUtils.toNumber(props.multiCharOverflow);
-    });
-    const computeCurrStyle = computed(() => {
-      const { width } = props;
-      const stys = {};
-      if (width) {
-        stys.width = toCssUnit(width);
-      }
-      return stys;
-    });
-    const computePopupWrapperStyle = computed(() => {
-      const popupOpts = computePopupOpts.value;
-      const { height, width } = popupOpts;
-      const stys = {};
-      if (width) {
-        stys.width = toCssUnit(width);
-      }
-      if (height) {
-        stys.height = toCssUnit(height);
-        stys.maxHeight = toCssUnit(height);
-      }
-      return stys;
-    });
-    const computeSelectVals = computed(() => {
-      const { modelValue, multiple } = props;
-      let vals = [];
-      if (XEUtils.isArray(modelValue)) {
-        vals = modelValue;
-      } else {
-        if (multiple) {
-          if (!eqEmptyValue(modelValue)) {
-            vals = `${modelValue}`.indexOf(",") > -1 ? `${modelValue}`.split(",") : [modelValue];
+        if (transfer === null) {
+          const globalTransfer = getConfig().select.transfer;
+          if (XEUtils.isBoolean(globalTransfer)) {
+            return globalTransfer;
           }
-        } else {
-          vals = modelValue === null || modelValue === void 0 ? [] : [modelValue];
-        }
-      }
-      return vals;
-    });
-    const computeFullLabel = computed(() => {
-      const { remote } = props;
-      const { reactFlag } = reactData;
-      const selectVals = computeSelectVals.value;
-      if (remote && reactFlag) {
-        return selectVals.map((val) => getRemoteSelectLabel(val)).join(", ");
-      }
-      return selectVals.map((val) => getSelectLabel(val)).join(", ");
-    });
-    const computeSelectLabel = computed(() => {
-      const { remote, multiple } = props;
-      const { reactFlag } = reactData;
-      const multiMaxCharNum = computeMultiMaxCharNum.value;
-      const selectVals = computeSelectVals.value;
-      if (remote && reactFlag) {
-        return selectVals.map((val) => getRemoteSelectLabel(val)).join(", ");
-      }
-      const labels = selectVals.map((val) => getSelectLabel(val));
-      if (multiple && multiMaxCharNum > 0 && labels.length > multiMaxCharNum) {
-        return `${labels.slice(0, multiMaxCharNum)}...`;
-      }
-      return labels.join(", ");
-    });
-    const computeScrollbarOpts = computed(() => {
-      return Object.assign({}, getConfig().tree.scrollbarConfig, props.scrollbarConfig);
-    });
-    const computeScrollbarXOpts = computed(() => {
-      const scrollbarOpts = computeScrollbarOpts.value;
-      return Object.assign({}, getConfig().scrollbar.xConfig, scrollbarOpts.xConfig, {
-        visible: false
+          if ($xeTable || $xeModal || $xeDrawer || $xeCard || $xeForm) {
+            return true;
+          }
+        }
+        return transfer;
       });
-    });
-    const computeScrollbarYOpts = computed(() => {
-      const scrollbarOpts = computeScrollbarOpts.value;
-      return Object.assign({}, getConfig().scrollbar.yConfig, scrollbarOpts.yConfig);
-    });
-    const computeScrollXHeight = computed(() => {
-      const scrollbarOpts = computeScrollbarOpts.value;
-      const scrollbarXOpts = computeScrollbarXOpts.value;
-      return getDefVal(getDefVal(scrollbarXOpts.height, scrollbarOpts.height), getConfig().scrollbar.height);
-    });
-    const computeScrollYWidth = computed(() => {
-      const scrollbarOpts = computeScrollbarOpts.value;
-      const scrollbarYOpts = computeScrollbarYOpts.value;
-      return getDefVal(getDefVal(scrollbarYOpts.width, scrollbarOpts.width), getConfig().scrollbar.width);
-    });
-    const computeScrollXVisible = computed(() => {
-      const scrollbarOpts = computeScrollbarOpts.value;
-      const scrollbarXOpts = computeScrollbarXOpts.value;
-      return getDefVal(scrollbarXOpts.visible, scrollbarOpts.visible);
-    });
-    const computeScrollYVisible = computed(() => {
-      const scrollbarOpts = computeScrollbarOpts.value;
-      const scrollbarYOpts = computeScrollbarYOpts.value;
-      return getDefVal(scrollbarYOpts.visible, scrollbarOpts.visible);
-    });
-    const computeScrollXAutoHide = computed(() => {
-      const scrollbarOpts = computeScrollbarOpts.value;
-      const scrollbarXOpts = computeScrollbarXOpts.value;
-      return getDefVal(getDefVal(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
-    });
-    const computeScrollYAutoHide = computed(() => {
-      const scrollbarOpts = computeScrollbarOpts.value;
-      const scrollbarYOpts = computeScrollbarYOpts.value;
-      return getDefVal(getDefVal(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
-    });
-    const computeScrollbarWrapperClss = computed(() => {
-      const { yThumbHeight, xThumbWidth } = reactData;
-      const scrollbarOpts = computeScrollbarOpts.value;
-      const scrollbarXToTop = computeScrollbarXToTop.value;
-      const scrollbarYToLeft = computeScrollbarYToLeft.value;
-      const scrollXVisible = computeScrollXVisible.value;
-      const scrollYVisible = computeScrollYVisible.value;
-      return domUtils.buildClass(
-        [
-          "vxe-scrollbar is--virtual",
-          scrollbarOpts.fluentOverlay ? "is--fluent-overlay" : "is--default-mode",
-          `ov-x--${scrollXVisible === false ? "hidden" : "visible"}`,
-          `ov-y--${scrollYVisible === false ? "hidden" : "visible"}`,
-          `sx-pos--${scrollbarXToTop ? "top" : "bottom"}`,
-          `sy-pos--${scrollbarYToLeft ? "left" : "right"}`
-        ],
-        {
-          "overflow-y": yThumbHeight,
-          "overflow-x": xThumbWidth
+      const computeInpPlaceholder = computed(() => {
+        const { placeholder } = props;
+        if (placeholder) {
+          return getFuncText(placeholder);
         }
-      );
-    });
-    const computeScrollbarXToTop = computed(() => {
-      const scrollbarXOpts = computeScrollbarXOpts.value;
-      return scrollbarXOpts.position === "top";
-    });
-    const computeScrollbarYToLeft = computed(() => {
-      const scrollbarYOpts = computeScrollbarYOpts.value;
-      return scrollbarYOpts.position === "left";
-    });
-    const callSlot = (slotFunc, params) => {
-      if (slotFunc) {
-        if (XEUtils.isString(slotFunc)) {
-          slotFunc = slots[slotFunc] || null;
-        }
-        if (XEUtils.isFunction(slotFunc)) {
-          return getSlotVNs(slotFunc(params));
-        }
-      }
-      return [];
-    };
-    const dispatchEvent = (type, params, evnt) => {
-      emit(type, createEvent(evnt, { $select: $xeSelect }, params));
-    };
-    const emitModel = (value) => {
-      emit("update:modelValue", value);
-    };
-    const emitDefaultValue = (value) => {
-      emitModel(value);
-      dispatchEvent("default-change", { value }, null);
-    };
-    const getOptKey = () => {
-      const optionOpts = computeOptionOpts.value;
-      return optionOpts.keyField || props.optionId || "_X_OPTION_KEY";
-    };
-    const getOptId = (option) => {
-      const optid = option[getOptKey()];
-      return optid ? encodeURIComponent(optid) : "";
-    };
-    const checkMaxLimit = (selectVals) => {
-      const { multiple, max } = props;
-      if (multiple && max) {
-        return selectVals.length >= XEUtils.toNumber(max);
-      }
-      return false;
-    };
-    const getRemoteSelectLabel = (value) => {
-      const { lazyOptions } = props;
-      const { remoteValMaps, optFullValMaps } = internalData;
-      const valueField = computeValueField.value;
-      const labelField = computeLabelField.value;
-      const remoteItem = remoteValMaps[value] || optFullValMaps[value];
-      const item = remoteItem ? remoteItem.item : null;
-      if (item) {
-        return XEUtils.toValueString(item[labelField]);
-      }
-      if (lazyOptions) {
-        const lazyItem = lazyOptions.find((item2) => item2[valueField] === value);
-        if (lazyItem) {
-          return lazyItem[labelField];
-        }
-      }
-      return value;
-    };
-    const getSelectLabel = (value) => {
-      const { lazyOptions } = props;
-      const { optFullValMaps } = internalData;
-      const valueField = computeValueField.value;
-      const labelField = computeLabelField.value;
-      const cacheItem = reactData.reactFlag ? optFullValMaps[value] : null;
-      if (cacheItem) {
-        return cacheItem.item[labelField];
-      }
-      if (lazyOptions) {
-        const lazyItem = lazyOptions.find((item) => item[valueField] === value);
-        if (lazyItem) {
-          return lazyItem[labelField];
-        }
-      }
-      return value;
-    };
-    const cacheItemMap = (datas) => {
-      const groupOptionsField = computeGroupOptionsField.value;
-      const valueField = computeValueField.value;
-      const key = getOptKey();
-      const groupKeyMaps = {};
-      const fullKeyMaps = {};
-      const list = [];
-      const handleOptItem = (item) => {
-        list.push(item);
-        let optid = getOptId(item);
-        if (!optid) {
-          optid = getOptUniqueId();
-          item[key] = optid;
-        }
-        fullKeyMaps[item[valueField]] = {
-          key: optid,
-          item,
-          _index: -1
-        };
-      };
-      datas.forEach((group) => {
-        handleOptItem(group);
-        if (group[groupOptionsField]) {
-          groupKeyMaps[group[key]] = group;
-          group[groupOptionsField].forEach(handleOptItem);
+        const globalPlaceholder = getConfig().select.placeholder;
+        if (globalPlaceholder) {
+          return getFuncText(globalPlaceholder);
         }
+        return getI18n("vxe.base.pleaseSelect");
       });
-      internalData.fullData = list;
-      internalData.optGroupKeyMaps = groupKeyMaps;
-      internalData.optFullValMaps = fullKeyMaps;
-      reactData.reactFlag++;
-      handleOption();
-    };
-    const handleOption = () => {
-      const { remote, modelValue, filterable } = props;
-      const { searchValue } = reactData;
-      const { fullData, optFullValMaps } = internalData;
-      const labelField = computeLabelField.value;
-      const valueField = computeValueField.value;
-      const filterOpts = computeFilterOpts.value;
-      const frMethod = filterOpts.filterMethod || props.filterMethod;
-      const searchStr = `${searchValue || ""}`.toLowerCase();
-      let avList = [];
-      if (remote) {
-        avList = fullData.filter(isOptionVisible);
-      } else {
-        if (filterable && frMethod) {
-          avList = searchValue ? fullData.filter((option) => {
-            return isOptionVisible(option) && frMethod({
-              $select: $xeSelect,
-              group: null,
-              option,
-              filterValue: searchValue,
-              searchValue,
-              value: modelValue
-            });
-          }) : fullData;
-        } else if (filterable) {
-          avList = searchStr ? fullData.filter((option) => isOptionVisible(option) && `${option[labelField] || option[valueField]}`.toLowerCase().indexOf(searchStr) > -1) : fullData;
+      const computeDefaultOpts = computed(() => {
+        return Object.assign({}, props.defaultConfig);
+      });
+      const computePropsOpts = computed(() => {
+        return Object.assign({}, getConfig().select.optionProps, props.optionProps);
+      });
+      const computeGroupPropsOpts = computed(() => {
+        return Object.assign({}, getConfig().select.optionGroupProps, props.optionGroupProps);
+      });
+      const computeLabelField = computed(() => {
+        const propsOpts = computePropsOpts.value;
+        return propsOpts.label || "label";
+      });
+      const computeValueField = computed(() => {
+        const propsOpts = computePropsOpts.value;
+        return propsOpts.value || "value";
+      });
+      const computeGroupLabelField = computed(() => {
+        const groupPropsOpts = computeGroupPropsOpts.value;
+        return groupPropsOpts.label || "label";
+      });
+      const computeGroupOptionsField = computed(() => {
+        const groupPropsOpts = computeGroupPropsOpts.value;
+        return groupPropsOpts.options || "options";
+      });
+      const computeIsMaximize = computed(() => {
+        const selectVals = computeSelectVals.value;
+        return checkMaxLimit(selectVals);
+      });
+      const computePopupOpts = computed(() => {
+        return Object.assign({}, getConfig().select.popupConfig, props.popupConfig);
+      });
+      const computeVirtualYOpts = computed(() => {
+        return Object.assign({}, getConfig().select.virtualYConfig || getConfig().select.scrollY, props.virtualYConfig || props.scrollY);
+      });
+      const computeRemoteOpts = computed(() => {
+        return Object.assign({}, getConfig().select.remoteConfig, props.remoteConfig);
+      });
+      const computeBadgeOpts = computed(() => {
+        return Object.assign({}, getConfig().select.badgeConfig, props.badgeConfig);
+      });
+      const computeBadgeCountNum = computed(() => {
+        const { showBadge } = props;
+        if (!showBadge) {
+          return 0;
+        }
+        const badgeOpts = computeBadgeOpts.value;
+        const { count } = badgeOpts;
+        return count ? XEUtils.toNumber(count) : 0;
+      });
+      const computeBadgeLabel = computed(() => {
+        const { showBadge } = props;
+        if (!showBadge) {
+          return "";
+        }
+        const badgeOpts = computeBadgeOpts.value;
+        const { dot, text, max } = badgeOpts;
+        if (dot) {
+          return "";
+        }
+        if (text) {
+          return `${text}`;
+        }
+        const countNum = computeBadgeCountNum.value;
+        if (countNum) {
+          const maxNum = max ? XEUtils.toNumber(max) : 99;
+          return countNum > maxNum ? `${maxNum}+` : `${countNum}`;
+        }
+        return "";
+      });
+      const computeFilterOpts = computed(() => {
+        return Object.assign({}, getConfig().select.filterConfig, props.filterConfig);
+      });
+      const computeOptionOpts = computed(() => {
+        return Object.assign({}, getConfig().select.optionConfig, props.optionConfig);
+      });
+      const computeRadioOpts = computed(() => {
+        return Object.assign({}, getConfig().select.radioConfig, props.radioConfig);
+      });
+      const computeCheckboxOpts = computed(() => {
+        return Object.assign({}, getConfig().select.checkboxConfig, props.checkboxConfig);
+      });
+      const computeMultiMaxCharNum = computed(() => {
+        return XEUtils.toNumber(props.multiCharOverflow);
+      });
+      const computeCurrStyle = computed(() => {
+        const { width } = props;
+        const stys = {};
+        if (width) {
+          stys.width = toCssUnit(width);
+        }
+        return stys;
+      });
+      const computePopupWrapperStyle = computed(() => {
+        const popupOpts = computePopupOpts.value;
+        const { height, width } = popupOpts;
+        const stys = {};
+        if (width) {
+          stys.width = toCssUnit(width);
+        }
+        if (height) {
+          stys.height = toCssUnit(height);
+          stys.maxHeight = toCssUnit(height);
+        }
+        return stys;
+      });
+      const computeSelectVals = computed(() => {
+        const { modelValue, multiple } = props;
+        let vals = [];
+        if (XEUtils.isArray(modelValue)) {
+          vals = modelValue;
         } else {
-          avList = fullData.filter(isOptionVisible);
+          if (multiple) {
+            if (!eqEmptyValue(modelValue)) {
+              vals = `${modelValue}`.indexOf(",") > -1 ? `${modelValue}`.split(",") : [modelValue];
+            }
+          } else {
+            vals = modelValue === null || modelValue === void 0 ? [] : [modelValue];
+          }
         }
-      }
-      avList.forEach((item, index) => {
-        const cacheItem = optFullValMaps[item[valueField]];
-        if (cacheItem) {
-          cacheItem._index = index;
+        return vals;
+      });
+      const computeFullLabel = computed(() => {
+        const { remote } = props;
+        const { reactFlag } = reactData;
+        const selectVals = computeSelectVals.value;
+        if (remote && reactFlag) {
+          return selectVals.map((val) => getRemoteSelectLabel(val)).join(", ");
         }
+        return selectVals.map((val) => getSelectLabel(val)).join(", ");
       });
-      internalData.afterVisibleList = avList;
-      return nextTick();
-    };
-    const setCurrentOption = (option) => {
-      if (option) {
-        reactData.currentOption = option;
-      }
-    };
-    const updateZIndex = () => {
-      const popupOpts = computePopupOpts.value;
-      const customZIndex = popupOpts.zIndex || props.zIndex;
-      if (customZIndex) {
-        reactData.panelIndex = XEUtils.toNumber(customZIndex);
-      } else if (reactData.panelIndex < getLastZIndex()) {
-        reactData.panelIndex = nextZIndex();
-      }
-    };
-    const updatePlacement = () => {
-      const { placement } = props;
-      const { panelIndex } = reactData;
-      const targetElem = refElem.value;
-      const panelElem = refOptionPanel.value;
-      const btnTransfer = computeBtnTransfer.value;
-      const popupOpts = computePopupOpts.value;
-      const handleStyle = () => {
-        const ppObj = updatePanelPlacement(targetElem, panelElem, {
-          placement: popupOpts.placement || placement,
-          defaultPlacement: popupOpts.defaultPlacement,
-          appendTo: popupOpts.appendTo,
-          teleportTo: btnTransfer
-        });
-        const panelStyle = Object.assign(ppObj.style, {
-          zIndex: panelIndex
-        });
-        reactData.panelStyle = panelStyle;
-        reactData.panelPlacement = ppObj.placement;
-      };
-      handleStyle();
-      return nextTick().then(handleStyle);
-    };
-    const handleScrollSelect = () => {
-      nextTick(() => {
-        const { isAniVisible, visiblePanel } = reactData;
-        const { optFullValMaps } = internalData;
+      const computeSelectLabel = computed(() => {
+        const { remote, multiple } = props;
+        const { reactFlag } = reactData;
+        const multiMaxCharNum = computeMultiMaxCharNum.value;
         const selectVals = computeSelectVals.value;
-        if (selectVals.length && isAniVisible && visiblePanel) {
-          const cacheItem = reactData.reactFlag ? optFullValMaps[`${selectVals[0]}`] : null;
-          if (cacheItem) {
-            reactData.currentOption = cacheItem.item;
-            handleScrollToOption(cacheItem.item);
-          }
+        if (remote && reactFlag) {
+          return selectVals.map((val) => getRemoteSelectLabel(val)).join(", ");
+        }
+        const labels = selectVals.map((val) => getSelectLabel(val));
+        if (multiple && multiMaxCharNum > 0 && labels.length > multiMaxCharNum) {
+          return `${labels.slice(0, multiMaxCharNum)}...`;
         }
+        return labels.join(", ");
       });
-    };
-    const showOptionPanel = () => {
-      const { loading, filterable, remote } = props;
-      const { fullData, hpTimeout } = internalData;
-      const isDisabled = computeIsDisabled.value;
-      const remoteOpts = computeRemoteOpts.value;
-      const selectVals = computeSelectVals.value;
-      if (!loading && !isDisabled) {
-        if (hpTimeout) {
-          clearTimeout(hpTimeout);
-          internalData.hpTimeout = void 0;
-        }
-        if (!reactData.initialized) {
-          reactData.initialized = true;
-          nextTick(() => {
-            bindScrollbarResize();
-          });
+      const computeScrollbarOpts = computed(() => {
+        return Object.assign({}, getConfig().tree.scrollbarConfig, props.scrollbarConfig);
+      });
+      const computeScrollbarXOpts = computed(() => {
+        const scrollbarOpts = computeScrollbarOpts.value;
+        return Object.assign({}, getConfig().scrollbar.xConfig, scrollbarOpts.xConfig, {
+          visible: false
+        });
+      });
+      const computeScrollbarYOpts = computed(() => {
+        const scrollbarOpts = computeScrollbarOpts.value;
+        return Object.assign({}, getConfig().scrollbar.yConfig, scrollbarOpts.yConfig);
+      });
+      const computeScrollXHeight = computed(() => {
+        const scrollbarOpts = computeScrollbarOpts.value;
+        const scrollbarXOpts = computeScrollbarXOpts.value;
+        return getDefVal(getDefVal(scrollbarXOpts.height, scrollbarOpts.height), getConfig().scrollbar.height);
+      });
+      const computeScrollYWidth = computed(() => {
+        const scrollbarOpts = computeScrollbarOpts.value;
+        const scrollbarYOpts = computeScrollbarYOpts.value;
+        return getDefVal(getDefVal(scrollbarYOpts.width, scrollbarOpts.width), getConfig().scrollbar.width);
+      });
+      const computeScrollXVisible = computed(() => {
+        const scrollbarOpts = computeScrollbarOpts.value;
+        const scrollbarXOpts = computeScrollbarXOpts.value;
+        return getDefVal(scrollbarXOpts.visible, scrollbarOpts.visible);
+      });
+      const computeScrollYVisible = computed(() => {
+        const scrollbarOpts = computeScrollbarOpts.value;
+        const scrollbarYOpts = computeScrollbarYOpts.value;
+        return getDefVal(scrollbarYOpts.visible, scrollbarOpts.visible);
+      });
+      const computeScrollXAutoHide = computed(() => {
+        const scrollbarOpts = computeScrollbarOpts.value;
+        const scrollbarXOpts = computeScrollbarXOpts.value;
+        return getDefVal(getDefVal(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
+      });
+      const computeScrollYAutoHide = computed(() => {
+        const scrollbarOpts = computeScrollbarOpts.value;
+        const scrollbarYOpts = computeScrollbarYOpts.value;
+        return getDefVal(getDefVal(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
+      });
+      const computeScrollbarWrapperClss = computed(() => {
+        const { yThumbHeight, xThumbWidth } = reactData;
+        const scrollbarOpts = computeScrollbarOpts.value;
+        const scrollbarXToTop = computeScrollbarXToTop.value;
+        const scrollbarYToLeft = computeScrollbarYToLeft.value;
+        const scrollXVisible = computeScrollXVisible.value;
+        const scrollYVisible = computeScrollYVisible.value;
+        return domUtils.buildClass(
+          [
+            "vxe-scrollbar is--virtual",
+            scrollbarOpts.fluentOverlay ? "is--fluent-overlay" : "is--default-mode",
+            `ov-x--${scrollXVisible === false ? "hidden" : "visible"}`,
+            `ov-y--${scrollYVisible === false ? "hidden" : "visible"}`,
+            `sx-pos--${scrollbarXToTop ? "top" : "bottom"}`,
+            `sy-pos--${scrollbarYToLeft ? "left" : "right"}`
+          ],
+          {
+            "overflow-y": yThumbHeight,
+            "overflow-x": xThumbWidth
+          }
+        );
+      });
+      const computeScrollbarXToTop = computed(() => {
+        const scrollbarXOpts = computeScrollbarXOpts.value;
+        return scrollbarXOpts.position === "top";
+      });
+      const computeScrollbarYToLeft = computed(() => {
+        const scrollbarYOpts = computeScrollbarYOpts.value;
+        return scrollbarYOpts.position === "left";
+      });
+      const callSlot = (slotFunc, params) => {
+        if (slotFunc) {
+          if (XEUtils.isString(slotFunc)) {
+            slotFunc = slots[slotFunc] || null;
+          }
+          if (XEUtils.isFunction(slotFunc)) {
+            return getSlotVNs(slotFunc(params));
+          }
         }
-        reactData.isActivated = true;
-        reactData.isAniVisible = true;
-        if (filterable) {
-          if (remote && remoteOpts.enabled && (remoteOpts.autoLoad && !fullData.length || fullData.length && remoteOpts.clearOnClose)) {
-            handleSearchEvent();
+        return [];
+      };
+      const dispatchEvent = (type, params, evnt) => {
+        emit(type, createEvent(evnt, { $select: $xeSelect }, params));
+      };
+      const emitModel = (value) => {
+        emit("update:modelValue", value);
+      };
+      const emitDefaultValue = (value) => {
+        emitModel(value);
+        dispatchEvent("default-change", { value }, null);
+      };
+      const getOptKey = () => {
+        const optionOpts = computeOptionOpts.value;
+        return optionOpts.keyField || props.optionId || "_X_OPTION_KEY";
+      };
+      const getOptId = (option) => {
+        const optid = option[getOptKey()];
+        return optid ? encodeURIComponent(optid) : "";
+      };
+      const checkMaxLimit = (selectVals) => {
+        const { multiple, max } = props;
+        if (multiple && max) {
+          return selectVals.length >= XEUtils.toNumber(max);
+        }
+        return false;
+      };
+      const getRemoteSelectLabel = (value) => {
+        const { lazyOptions } = props;
+        const { remoteValMaps, optFullValMaps } = internalData;
+        const valueField = computeValueField.value;
+        const labelField = computeLabelField.value;
+        const remoteItem = remoteValMaps[value] || optFullValMaps[value];
+        const item = remoteItem ? remoteItem.item : null;
+        if (item) {
+          return XEUtils.toValueString(item[labelField]);
+        }
+        if (lazyOptions) {
+          const lazyItem = lazyOptions.find((item2) => item2[valueField] === value);
+          if (lazyItem) {
+            return lazyItem[labelField];
+          }
+        }
+        return value;
+      };
+      const getSelectLabel = (value) => {
+        const { lazyOptions } = props;
+        const { optFullValMaps } = internalData;
+        const valueField = computeValueField.value;
+        const labelField = computeLabelField.value;
+        const cacheItem = reactData.reactFlag ? optFullValMaps[value] : null;
+        if (cacheItem) {
+          return cacheItem.item[labelField];
+        }
+        if (lazyOptions) {
+          const lazyItem = lazyOptions.find((item) => item[valueField] === value);
+          if (lazyItem) {
+            return lazyItem[labelField];
+          }
+        }
+        return value;
+      };
+      const cacheItemMap = (datas) => {
+        const groupOptionsField = computeGroupOptionsField.value;
+        const valueField = computeValueField.value;
+        const key = getOptKey();
+        const groupKeyMaps = {};
+        const fullKeyMaps = {};
+        const list = [];
+        const handleOptItem = (item) => {
+          list.push(item);
+          let optid = getOptId(item);
+          if (!optid) {
+            optid = getOptUniqueId();
+            item[key] = optid;
+          }
+          fullKeyMaps[item[valueField]] = {
+            key: optid,
+            item,
+            _index: -1
+          };
+        };
+        datas.forEach((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++;
+        handleOption();
+      };
+      const handleOption = () => {
+        const { remote, modelValue, filterable } = props;
+        const { searchValue } = reactData;
+        const { fullData, optFullValMaps } = internalData;
+        const labelField = computeLabelField.value;
+        const valueField = computeValueField.value;
+        const filterOpts = computeFilterOpts.value;
+        const frMethod = filterOpts.filterMethod || props.filterMethod;
+        const searchStr = `${searchValue || ""}`.toLowerCase();
+        let avList = [];
+        if (remote) {
+          avList = fullData.filter(isOptionVisible);
+        } else {
+          if (filterable && frMethod) {
+            avList = searchValue ? fullData.filter((option) => {
+              return isOptionVisible(option) && frMethod({
+                $select: $xeSelect,
+                group: null,
+                option,
+                filterValue: searchValue,
+                searchValue,
+                value: modelValue
+              });
+            }) : fullData;
+          } else if (filterable) {
+            avList = searchStr ? fullData.filter((option) => isOptionVisible(option) && `${option[labelField] || option[valueField]}`.toLowerCase().indexOf(searchStr) > -1) : fullData;
           } else {
-            handleOption();
-            updateYData();
+            avList = fullData.filter(isOptionVisible);
           }
         }
-        setTimeout(() => {
-          reactData.visiblePanel = true;
-          handleFocusSearch();
-          recalculate().then(() => {
-            if (selectVals && selectVals.length) {
-              handleScrollSelect();
+        avList.forEach((item, index) => {
+          const cacheItem = optFullValMaps[item[valueField]];
+          if (cacheItem) {
+            cacheItem._index = index;
+          }
+        });
+        internalData.afterVisibleList = avList;
+        return nextTick();
+      };
+      const setCurrentOption = (option) => {
+        if (option) {
+          reactData.currentOption = option;
+        }
+      };
+      const updateZIndex = () => {
+        const popupOpts = computePopupOpts.value;
+        const customZIndex = popupOpts.zIndex || props.zIndex;
+        if (customZIndex) {
+          reactData.panelIndex = XEUtils.toNumber(customZIndex);
+        } else if (reactData.panelIndex < getLastZIndex()) {
+          reactData.panelIndex = nextZIndex();
+        }
+      };
+      const updatePlacement = () => {
+        const { placement } = props;
+        const { panelIndex } = reactData;
+        const targetElem = refElem.value;
+        const panelElem = refOptionPanel.value;
+        const btnTransfer = computeBtnTransfer.value;
+        const popupOpts = computePopupOpts.value;
+        const handleStyle = () => {
+          const ppObj = updatePanelPlacement(targetElem, panelElem, {
+            placement: popupOpts.placement || placement,
+            defaultPlacement: popupOpts.defaultPlacement,
+            appendTo: popupOpts.appendTo,
+            teleportTo: btnTransfer
+          });
+          const panelStyle = Object.assign(ppObj.style, {
+            zIndex: panelIndex
+          });
+          reactData.panelStyle = panelStyle;
+          reactData.panelPlacement = ppObj.placement;
+        };
+        handleStyle();
+        return nextTick().then(handleStyle);
+      };
+      const handleScrollSelect = () => {
+        nextTick(() => {
+          const { isAniVisible, visiblePanel } = reactData;
+          const { optFullValMaps } = internalData;
+          const selectVals = computeSelectVals.value;
+          if (selectVals.length && isAniVisible && visiblePanel) {
+            const cacheItem = reactData.reactFlag ? optFullValMaps[`${selectVals[0]}`] : null;
+            if (cacheItem) {
+              reactData.currentOption = cacheItem.item;
+              handleScrollToOption(cacheItem.item);
+            }
+          }
+        });
+      };
+      const showOptionPanel = () => {
+        const { loading, filterable, remote } = props;
+        const { fullData, hpTimeout } = internalData;
+        const isDisabled = computeIsDisabled.value;
+        const remoteOpts = computeRemoteOpts.value;
+        const selectVals = computeSelectVals.value;
+        if (!loading && !isDisabled) {
+          if (hpTimeout) {
+            clearTimeout(hpTimeout);
+            internalData.hpTimeout = void 0;
+          }
+          if (!reactData.initialized) {
+            reactData.initialized = true;
+            nextTick(() => {
+              bindScrollbarResize();
+            });
+          }
+          reactData.isActivated = true;
+          reactData.isAniVisible = true;
+          if (filterable) {
+            if (remote && remoteOpts.enabled && (remoteOpts.autoLoad && !fullData.length || fullData.length && remoteOpts.clearOnClose)) {
+              handleSearchEvent();
             } else {
-              refreshScroll();
+              handleOption();
+              updateYData();
             }
-          });
+          }
+          setTimeout(() => {
+            reactData.visiblePanel = true;
+            handleFocusSearch();
+            recalculate().then(() => {
+              if (selectVals && selectVals.length) {
+                handleScrollSelect();
+              } else {
+                refreshScroll();
+              }
+            });
+            updatePlacement();
+          }, 10);
+          setTimeout(() => {
+            recalculate().then(() => refreshScroll());
+          }, 100);
+          updateZIndex();
           updatePlacement();
-        }, 10);
-        setTimeout(() => {
-          recalculate().then(() => refreshScroll());
-        }, 100);
-        updateZIndex();
-        updatePlacement();
-        dispatchEvent("visible-change", { visible: true }, null);
-      }
-    };
-    const hideOptionPanel = (evnt) => {
-      const { filterable, remote } = props;
-      const filterOpts = computeFilterOpts.value;
-      const remoteOpts = computeRemoteOpts.value;
-      if (remote) {
-        if (remoteOpts.clearOnClose) {
-          reactData.searchValue = "";
+          dispatchEvent("visible-change", { visible: true }, null);
         }
-      } else if (filterable) {
-        if (filterOpts.clearOnClose) {
+      };
+      const hideOptionPanel = (evnt) => {
+        const { filterable, remote } = props;
+        const filterOpts = computeFilterOpts.value;
+        const remoteOpts = computeRemoteOpts.value;
+        if (remote) {
+          if (remoteOpts.clearOnClose) {
+            reactData.searchValue = "";
+          }
+        } else if (filterable) {
+          if (filterOpts.clearOnClose) {
+            reactData.searchValue = "";
+          }
+        } else {
           reactData.searchValue = "";
         }
-      } else {
-        reactData.searchValue = "";
-      }
-      reactData.searchLoading = false;
-      reactData.visiblePanel = false;
-      internalData.hpTimeout = setTimeout(() => {
-        reactData.isAniVisible = false;
-      }, 350);
-      dispatchEvent("visible-change", { visible: false }, evnt || null);
-    };
-    const changeEvent = (evnt, selectValue, option) => {
-      emitModel(selectValue);
-      if (selectValue !== props.modelValue) {
-        dispatchEvent("change", { value: selectValue, option }, evnt);
-        if ($xeForm && formItemInfo) {
-          $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, selectValue);
-        }
-      }
-    };
-    const clearValueEvent = (evnt, selectValue) => {
-      internalData.remoteValMaps = {};
-      changeEvent(evnt, selectValue, null);
-      dispatchEvent("clear", { value: selectValue }, evnt);
-    };
-    const clearEvent = (params) => {
-      const { emptyValue } = props;
-      const { $event } = params;
-      clearValueEvent($event, emptyValue);
-      hideOptionPanel($event);
-    };
-    const allCheckedPanelEvent = (params) => {
-      const { $event } = params;
-      const { multiple, max, checkedClosable } = props;
-      const { optList } = reactData;
-      const valueField = computeValueField.value;
-      if (multiple) {
-        const selectVals = computeSelectVals.value;
-        const currVlas = selectVals.slice(0);
-        for (let i = 0; i < optList.length; i++) {
-          const option = optList[i];
-          const selectValue = option[valueField];
-          if (checkMaxLimit(currVlas)) {
-            if (VxeUI) {
-              VxeUI.modal.message({
-                content: getI18n("vxe.select.overSizeErr", [max]),
-                status: "warning"
-              });
+        reactData.searchLoading = false;
+        reactData.visiblePanel = false;
+        internalData.hpTimeout = setTimeout(() => {
+          reactData.isAniVisible = false;
+        }, 350);
+        dispatchEvent("visible-change", { visible: false }, evnt || null);
+      };
+      const changeEvent = (evnt, selectValue, option) => {
+        emitModel(selectValue);
+        if (selectValue !== props.modelValue) {
+          dispatchEvent("change", { value: selectValue, option }, evnt);
+          if ($xeForm && formItemInfo) {
+            $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, selectValue);
+          }
+        }
+      };
+      const clearValueEvent = (evnt, selectValue) => {
+        internalData.remoteValMaps = {};
+        changeEvent(evnt, selectValue, null);
+        dispatchEvent("clear", { value: selectValue }, evnt);
+      };
+      const clearEvent = (params) => {
+        const { emptyValue } = props;
+        const { $event } = params;
+        clearValueEvent($event, emptyValue);
+        hideOptionPanel($event);
+      };
+      const allCheckedPanelEvent = (params) => {
+        const { $event } = params;
+        const { multiple, max, checkedClosable } = props;
+        const { optList } = reactData;
+        const valueField = computeValueField.value;
+        if (multiple) {
+          const selectVals = computeSelectVals.value;
+          const currVlas = selectVals.slice(0);
+          for (let i = 0; i < optList.length; i++) {
+            const option = optList[i];
+            const selectValue = option[valueField];
+            if (checkMaxLimit(currVlas)) {
+              if (VxeUI) {
+                VxeUI.modal.message({
+                  content: getI18n("vxe.select.overSizeErr", [max]),
+                  status: "warning"
+                });
+              }
+              break;
+            }
+            if (!currVlas.some((val) => val === selectValue)) {
+              currVlas.push(selectValue);
             }
-            break;
           }
-          if (!currVlas.some((val) => val === selectValue)) {
-            currVlas.push(selectValue);
+          changeEvent($event, currVlas, optList[0]);
+          if (checkedClosable) {
+            hideOptionPanel($event);
           }
+          dispatchEvent("all-change", { value: currVlas }, $event);
         }
-        changeEvent($event, currVlas, optList[0]);
-        if (checkedClosable) {
+      };
+      const clearCheckedPanelEvent = (params) => {
+        const { emptyValue, clearClosable } = props;
+        const { $event } = params;
+        clearValueEvent($event, emptyValue);
+        if (clearClosable) {
           hideOptionPanel($event);
         }
-        dispatchEvent("all-change", { value: currVlas }, $event);
-      }
-    };
-    const clearCheckedPanelEvent = (params) => {
-      const { emptyValue, clearClosable } = props;
-      const { $event } = params;
-      clearValueEvent($event, emptyValue);
-      if (clearClosable) {
+      };
+      const closePanelEvent = (params) => {
+        const { $event } = params;
         hideOptionPanel($event);
-      }
-    };
-    const closePanelEvent = (params) => {
-      const { $event } = params;
-      hideOptionPanel($event);
-    };
-    const changeOptionEvent = (evnt, option) => {
-      const { multiple } = props;
-      const { remoteValMaps } = internalData;
-      const valueField = computeValueField.value;
-      const selectValue = option[valueField];
-      const remoteItem = remoteValMaps[selectValue];
-      if (!reactData.visiblePanel) {
-        return;
-      }
-      if (remoteItem) {
-        remoteItem.item = option;
-      } else {
-        remoteValMaps[selectValue] = {
-          key: getOptId(option),
-          item: option,
-          _index: -1
-        };
-      }
-      if (multiple) {
-        let multipleValue = [];
-        const selectVals = computeSelectVals.value;
-        const index = XEUtils.findIndexOf(selectVals, (val) => val === selectValue);
-        if (index === -1) {
-          multipleValue = selectVals.concat([selectValue]);
+      };
+      const changeOptionEvent = (evnt, option) => {
+        const { multiple } = props;
+        const { remoteValMaps } = internalData;
+        const valueField = computeValueField.value;
+        const selectValue = option[valueField];
+        const remoteItem = remoteValMaps[selectValue];
+        if (!reactData.visiblePanel) {
+          return;
+        }
+        if (remoteItem) {
+          remoteItem.item = option;
         } else {
-          multipleValue = selectVals.filter((val) => val !== selectValue);
-        }
-        changeEvent(evnt, multipleValue, option);
-      } else {
-        changeEvent(evnt, selectValue, option);
-        hideOptionPanel(evnt);
-      }
-      reactData.reactFlag++;
-    };
-    const handleGlobalMousedownEvent = (evnt) => {
-      const { visiblePanel } = reactData;
-      const isDisabled = computeIsDisabled.value;
-      const popupOpts = computePopupOpts.value;
-      const { trigger } = popupOpts;
-      if (!isDisabled) {
-        const el = refElem.value;
-        const panelElem = refOptionPanel.value;
-        reactData.isActivated = getEventTargetNode(evnt, el).flag || getEventTargetNode(evnt, panelElem).flag;
-        if (visiblePanel && !reactData.isActivated) {
-          if (trigger !== "manual") {
-            hideOptionPanel(evnt);
-          }
+          remoteValMaps[selectValue] = {
+            key: getOptId(option),
+            item: option,
+            _index: -1
+          };
         }
-      }
-    };
-    const validOffsetOption = (option) => {
-      const isDisabled = option.disabled;
-      const optid = getOptId(option);
-      if (!isDisabled && !hasOptGroupById(optid)) {
-        return true;
-      }
-      return false;
-    };
-    const findOffsetOption = (option, isDwArrow) => {
-      const { allowCreate } = props;
-      const { optList } = reactData;
-      const { optFullValMaps, optAddMaps, afterVisibleList } = internalData;
-      const valueField = computeValueField.value;
-      let fullList = afterVisibleList;
-      let offsetAddIndex = 0;
-      if (allowCreate && optList.length) {
-        const firstItem = optList[0];
-        const optid = getOptId(firstItem);
-        if (optAddMaps[optid]) {
-          offsetAddIndex = 1;
-          fullList = [optAddMaps[optid]].concat(fullList);
-        }
-      }
-      if (!option) {
-        if (isDwArrow) {
-          for (let i = 0; i < fullList.length; i++) {
-            const item = fullList[i];
-            if (validOffsetOption(item)) {
-              return item;
-            }
+        if (multiple) {
+          let multipleValue = [];
+          const selectVals = computeSelectVals.value;
+          const index = XEUtils.findIndexOf(selectVals, (val) => val === selectValue);
+          if (index === -1) {
+            multipleValue = selectVals.concat([selectValue]);
+          } else {
+            multipleValue = selectVals.filter((val) => val !== selectValue);
           }
+          changeEvent(evnt, multipleValue, option);
         } else {
-          for (let len = fullList.length - 1; len >= 0; len--) {
-            const item = fullList[len];
-            if (validOffsetOption(item)) {
-              return item;
+          changeEvent(evnt, selectValue, option);
+          hideOptionPanel(evnt);
+        }
+        reactData.reactFlag++;
+      };
+      const handleGlobalMousedownEvent = (evnt) => {
+        const { visiblePanel } = reactData;
+        const isDisabled = computeIsDisabled.value;
+        const popupOpts = computePopupOpts.value;
+        const { trigger } = popupOpts;
+        if (!isDisabled) {
+          const el = refElem.value;
+          const panelElem = refOptionPanel.value;
+          reactData.isActivated = getEventTargetNode(evnt, el).flag || getEventTargetNode(evnt, panelElem).flag;
+          if (visiblePanel && !reactData.isActivated) {
+            if (trigger !== "manual") {
+              hideOptionPanel(evnt);
             }
           }
         }
-      }
-      let avIndex = 0;
-      const cacheItem = option ? optFullValMaps[option[valueField]] : null;
-      if (cacheItem) {
-        avIndex = cacheItem._index + offsetAddIndex;
-      }
-      if (avIndex > -1) {
-        if (isDwArrow) {
-          for (let i = avIndex + 1; i <= fullList.length - 1; i++) {
-            const item = fullList[i];
-            if (validOffsetOption(item)) {
-              return item;
-            }
+      };
+      const validOffsetOption = (option) => {
+        const isDisabled = option.disabled;
+        const optid = getOptId(option);
+        if (!isDisabled && !hasOptGroupById(optid)) {
+          return true;
+        }
+        return false;
+      };
+      const findOffsetOption = (option, isDwArrow) => {
+        const { allowCreate } = props;
+        const { optList } = reactData;
+        const { optFullValMaps, optAddMaps, afterVisibleList } = internalData;
+        const valueField = computeValueField.value;
+        let fullList = afterVisibleList;
+        let offsetAddIndex = 0;
+        if (allowCreate && optList.length) {
+          const firstItem = optList[0];
+          const optid = getOptId(firstItem);
+          if (optAddMaps[optid]) {
+            offsetAddIndex = 1;
+            fullList = [optAddMaps[optid]].concat(fullList);
           }
-        } else {
-          if (avIndex > 0) {
-            for (let len = avIndex - 1; len >= 0; len--) {
+        }
+        if (!option) {
+          if (isDwArrow) {
+            for (let i = 0; i < fullList.length; i++) {
+              const item = fullList[i];
+              if (validOffsetOption(item)) {
+                return item;
+              }
+            }
+          } else {
+            for (let len = fullList.length - 1; len >= 0; len--) {
               const item = fullList[len];
               if (validOffsetOption(item)) {
                 return item;
@@ -945,767 +924,854 @@ var select_default = defineVxeComponent({
             }
           }
         }
-      }
-      return null;
-    };
-    const handleGlobalKeydownEvent = (evnt) => {
-      const { emptyValue, clearable } = props;
-      const { visiblePanel, currentOption } = reactData;
-      const isDisabled = computeIsDisabled.value;
-      const popupOpts = computePopupOpts.value;
-      const { trigger } = popupOpts;
-      if (!isDisabled) {
-        const isTab = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.TAB);
-        const isEnter = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ENTER);
-        const isEsc = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ESCAPE);
-        const isUpArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_UP);
-        const isDwArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_DOWN);
-        const isDel = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.DELETE);
-        if (isTab) {
-          reactData.isActivated = false;
+        let avIndex = 0;
+        const cacheItem = option ? optFullValMaps[option[valueField]] : null;
+        if (cacheItem) {
+          avIndex = cacheItem._index + offsetAddIndex;
         }
-        if (visiblePanel) {
-          if (isEsc || isTab) {
-            if (trigger !== "manual") {
-              hideOptionPanel(evnt);
+        if (avIndex > -1) {
+          if (isDwArrow) {
+            for (let i = avIndex + 1; i <= fullList.length - 1; i++) {
+              const item = fullList[i];
+              if (validOffsetOption(item)) {
+                return item;
+              }
+            }
+          } else {
+            if (avIndex > 0) {
+              for (let len = avIndex - 1; len >= 0; len--) {
+                const item = fullList[len];
+                if (validOffsetOption(item)) {
+                  return item;
+                }
+              }
             }
-          } else if (isEnter) {
-            if (currentOption) {
+          }
+        }
+        return null;
+      };
+      const handleGlobalKeydownEvent = (evnt) => {
+        const { emptyValue, clearable } = props;
+        const { visiblePanel, currentOption } = reactData;
+        const isDisabled = computeIsDisabled.value;
+        const popupOpts = computePopupOpts.value;
+        const { trigger } = popupOpts;
+        if (!isDisabled) {
+          const isTab = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.TAB);
+          const isEnter = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ENTER);
+          const isEsc = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ESCAPE);
+          const isUpArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_UP);
+          const isDwArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_DOWN);
+          const isDel = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.DELETE);
+          if (isTab) {
+            reactData.isActivated = false;
+          }
+          if (visiblePanel) {
+            if (isEsc || isTab) {
+              if (trigger !== "manual") {
+                hideOptionPanel(evnt);
+              }
+            } else if (isEnter) {
+              if (currentOption) {
+                evnt.preventDefault();
+                evnt.stopPropagation();
+                changeOptionEvent(evnt, currentOption);
+              }
+            } else if (isUpArrow || isDwArrow) {
               evnt.preventDefault();
-              evnt.stopPropagation();
-              changeOptionEvent(evnt, currentOption);
+              let offsetOption = findOffsetOption(currentOption, isDwArrow);
+              if (!offsetOption) {
+                offsetOption = findOffsetOption(null, isDwArrow);
+              }
+              if (offsetOption) {
+                setCurrentOption(offsetOption);
+                handleScrollToOption(offsetOption, isDwArrow);
+              }
             }
-          } else if (isUpArrow || isDwArrow) {
+          } else if ((isUpArrow || isDwArrow || isEnter) && reactData.isActivated) {
             evnt.preventDefault();
-            let offsetOption = findOffsetOption(currentOption, isDwArrow);
-            if (!offsetOption) {
-              offsetOption = findOffsetOption(null, isDwArrow);
-            }
-            if (offsetOption) {
-              setCurrentOption(offsetOption);
-              handleScrollToOption(offsetOption, isDwArrow);
+            showOptionPanel();
+          }
+          if (reactData.isActivated) {
+            if (isDel && clearable) {
+              clearValueEvent(evnt, emptyValue);
             }
           }
-        } else if ((isUpArrow || isDwArrow || isEnter) && reactData.isActivated) {
-          evnt.preventDefault();
-          showOptionPanel();
         }
-        if (reactData.isActivated) {
-          if (isDel && clearable) {
-            clearValueEvent(evnt, emptyValue);
+      };
+      const handleGlobalBlurEvent = (evnt) => {
+        const { visiblePanel, isActivated } = reactData;
+        const popupOpts = computePopupOpts.value;
+        const { trigger } = popupOpts;
+        if (visiblePanel) {
+          if (trigger !== "manual") {
+            hideOptionPanel(evnt);
           }
         }
-      }
-    };
-    const handleGlobalBlurEvent = (evnt) => {
-      const { visiblePanel, isActivated } = reactData;
-      const popupOpts = computePopupOpts.value;
-      const { trigger } = popupOpts;
-      if (visiblePanel) {
-        if (trigger !== "manual") {
-          hideOptionPanel(evnt);
+        if (isActivated) {
+          reactData.isActivated = false;
         }
-      }
-      if (isActivated) {
-        reactData.isActivated = false;
-      }
-      if (visiblePanel || isActivated) {
-        const $input = refInput.value;
-        if ($input) {
-          $input.blur();
-        }
-      }
-    };
-    const handleGlobalResizeEvent = () => {
-      const { visiblePanel } = reactData;
-      if (visiblePanel) {
-        updatePlacement();
-      }
-    };
-    const handleGlobalScrollEvent = () => {
-      const { visiblePanel } = reactData;
-      if (visiblePanel) {
-        updatePlacement();
-      }
-    };
-    const handleFocusSearch = () => {
-      if (props.filterable) {
-        nextTick(() => {
-          const inpSearch = refInpSearch.value;
-          if (inpSearch) {
-            inpSearch.focus();
+        if (visiblePanel || isActivated) {
+          const $input = refInput.value;
+          if ($input) {
+            $input.blur();
           }
-        });
-      }
-    };
-    const focusEvent = (evnt) => {
-      const isDisabled = computeIsDisabled.value;
-      const popupOpts = computePopupOpts.value;
-      const { trigger } = popupOpts;
-      if (!isDisabled) {
-        if (!reactData.visiblePanel) {
-          if (!trigger || trigger === "default") {
-            reactData.triggerFocusPanel = true;
-            showOptionPanel();
-            setTimeout(() => {
-              reactData.triggerFocusPanel = false;
-            }, 500);
+        }
+      };
+      const handleGlobalResizeEvent = () => {
+        const { visiblePanel } = reactData;
+        if (visiblePanel) {
+          updatePlacement();
+        }
+      };
+      const handleGlobalScrollEvent = () => {
+        const { visiblePanel } = reactData;
+        if (visiblePanel) {
+          updatePlacement();
+        }
+      };
+      const handleFocusSearch = () => {
+        if (props.filterable) {
+          nextTick(() => {
+            const inpSearch = refInpSearch.value;
+            if (inpSearch) {
+              inpSearch.focus();
+            }
+          });
+        }
+      };
+      const focusEvent = (evnt) => {
+        const isDisabled = computeIsDisabled.value;
+        const popupOpts = computePopupOpts.value;
+        const { trigger } = popupOpts;
+        if (!isDisabled) {
+          if (!reactData.visiblePanel) {
+            if (!trigger || trigger === "default") {
+              reactData.triggerFocusPanel = true;
+              showOptionPanel();
+              setTimeout(() => {
+                reactData.triggerFocusPanel = false;
+              }, 500);
+            }
           }
         }
-      }
-      dispatchEvent("focus", {}, evnt);
-    };
-    const clickEvent = (evnt) => {
-      const popupOpts = computePopupOpts.value;
-      const { trigger } = popupOpts;
-      if (!trigger || trigger === "default") {
-        togglePanelEvent(evnt);
-      }
-      dispatchEvent("click", { triggerButton: false, visible: reactData.visiblePanel }, evnt);
-    };
-    const blurEvent = (evnt) => {
-      reactData.isActivated = false;
-      dispatchEvent("blur", {}, evnt);
-    };
-    const suffixClickEvent = (evnt) => {
-      const popupOpts = computePopupOpts.value;
-      const { trigger } = popupOpts;
-      if (!trigger || trigger === "default" || trigger === "icon") {
-        togglePanelEvent(evnt);
-      }
-      dispatchEvent("click", { triggerButton: true, visible: reactData.visiblePanel }, evnt);
-    };
-    const modelSearchEvent = (value) => {
-      reactData.searchValue = value;
-    };
-    const focusSearchEvent = () => {
-      reactData.isActivated = true;
-    };
-    const handleSearchEvent = () => {
-      const { modelValue, remote } = props;
-      const { searchValue } = reactData;
-      const remoteOpts = computeRemoteOpts.value;
-      const qyMethod = remoteOpts.queryMethod || props.remoteMethod;
-      if (remote && qyMethod && remoteOpts.enabled) {
-        reactData.searchLoading = true;
-        Promise.resolve(qyMethod({ $select: $xeSelect, searchValue, value: modelValue })).then(() => nextTick()).catch(() => nextTick()).finally(() => {
-          reactData.searchLoading = false;
+        dispatchEvent("focus", {}, evnt);
+      };
+      const clickEvent = (evnt) => {
+        const popupOpts = computePopupOpts.value;
+        const { trigger } = popupOpts;
+        if (!trigger || trigger === "default") {
+          togglePanelEvent(evnt);
+        }
+        dispatchEvent("click", { triggerButton: false, visible: reactData.visiblePanel }, evnt);
+      };
+      const blurEvent = (evnt) => {
+        reactData.isActivated = false;
+        dispatchEvent("blur", {}, evnt);
+      };
+      const suffixClickEvent = (evnt) => {
+        const popupOpts = computePopupOpts.value;
+        const { trigger } = popupOpts;
+        if (!trigger || trigger === "default" || trigger === "icon") {
+          togglePanelEvent(evnt);
+        }
+        dispatchEvent("click", { triggerButton: true, visible: reactData.visiblePanel }, evnt);
+      };
+      const modelSearchEvent = (value) => {
+        reactData.searchValue = value;
+      };
+      const focusSearchEvent = () => {
+        reactData.isActivated = true;
+      };
+      const handleSearchEvent = () => {
+        const { modelValue, remote } = props;
+        const { searchValue } = reactData;
+        const remoteOpts = computeRemoteOpts.value;
+        const qyMethod = remoteOpts.queryMethod || props.remoteMethod;
+        if (remote && qyMethod && remoteOpts.enabled) {
+          reactData.searchLoading = true;
+          Promise.resolve(qyMethod({ $select: $xeSelect, searchValue, value: modelValue })).then(() => nextTick()).catch(() => nextTick()).finally(() => {
+            reactData.searchLoading = false;
+            handleOption();
+            updateYData();
+          });
+        } else {
           handleOption();
           updateYData();
-        });
-      } else {
-        handleOption();
-        updateYData();
-      }
-    };
-    const triggerSearchEvent = XEUtils.debounce(handleSearchEvent, 350, { trailing: true });
-    const togglePanelEvent = (params) => {
-      const { $event } = params;
-      $event.preventDefault();
-      if (reactData.triggerFocusPanel) {
-        reactData.triggerFocusPanel = false;
-      } else {
-        if (reactData.visiblePanel) {
-          hideOptionPanel($event);
+        }
+      };
+      const triggerSearchEvent = XEUtils.debounce(handleSearchEvent, 350, { trailing: true });
+      const togglePanelEvent = (params) => {
+        const { $event } = params;
+        $event.preventDefault();
+        if (reactData.triggerFocusPanel) {
+          reactData.triggerFocusPanel = false;
         } else {
-          showOptionPanel();
-        }
-      }
-    };
-    const checkOptionDisabled = (isSelected, option) => {
-      if (option.disabled) {
-        return true;
-      }
-      const isMaximize = computeIsMaximize.value;
-      if (isMaximize && !isSelected) {
-        return true;
-      }
-      return false;
-    };
-    const updateYSpace = () => {
-      const { scrollYLoad } = reactData;
-      const { scrollYStore, afterVisibleList } = internalData;
-      reactData.bodyHeight = scrollYLoad ? afterVisibleList.length * scrollYStore.rowHeight : 0;
-      reactData.topSpaceHeight = scrollYLoad ? Math.max(scrollYStore.startIndex * scrollYStore.rowHeight, 0) : 0;
-    };
-    const handleData = () => {
-      const { filterable, allowCreate } = props;
-      const { scrollYLoad, searchValue } = reactData;
-      const { optAddMaps, scrollYStore, afterVisibleList } = internalData;
-      const labelField = computeLabelField.value;
-      const valueField = computeValueField.value;
-      const restList = scrollYLoad ? afterVisibleList.slice(scrollYStore.startIndex, scrollYStore.endIndex) : afterVisibleList.slice(0);
-      if (filterable && allowCreate && searchValue) {
-        if (!restList.some((option) => option[labelField] === searchValue)) {
-          const addItem = optAddMaps[searchValue] || reactive({
-            [getOptKey()]: searchValue,
-            [labelField]: searchValue,
-            [valueField]: searchValue
-          });
-          optAddMaps[searchValue] = addItem;
-          restList.unshift(addItem);
-        }
-      }
-      reactData.optList = restList;
-      return nextTick();
-    };
-    const updateYData = () => {
-      handleData();
-      updateYSpace();
-    };
-    const computeScrollLoad = () => {
-      return nextTick().then(() => {
-        const { scrollYLoad } = reactData;
-        const { scrollYStore } = internalData;
-        const virtualBodyElem = refVirtualBody.value;
-        const virtualYOpts = computeVirtualYOpts.value;
-        let rowHeight = 0;
-        let firstItemElem;
-        if (virtualBodyElem) {
-          if (!firstItemElem) {
-            firstItemElem = virtualBodyElem.children[0];
+          if (reactData.visiblePanel) {
+            hideOptionPanel($event);
+          } else {
+            showOptionPanel();
           }
         }
-        if (firstItemElem) {
-          rowHeight = firstItemElem.offsetHeight;
-        }
-        rowHeight = Math.max(20, rowHeight);
-        scrollYStore.rowHeight = rowHeight;
-        if (scrollYLoad) {
-          const scrollBodyElem = refVirtualWrapper.value;
-          const visibleYSize = Math.max(8, scrollBodyElem ? Math.ceil(scrollBodyElem.clientHeight / rowHeight) : 0);
-          const offsetYSize = Math.max(0, Math.min(2, XEUtils.toNumber(virtualYOpts.oSize)));
-          scrollYStore.offsetSize = offsetYSize;
-          scrollYStore.visibleSize = visibleYSize;
-          scrollYStore.endIndex = Math.max(scrollYStore.startIndex, visibleYSize + offsetYSize, scrollYStore.endIndex);
-          updateYData();
-        } else {
-          updateYSpace();
+      };
+      const checkOptionDisabled = (isSelected, option) => {
+        if (option.disabled) {
+          return true;
         }
-      });
-    };
-    const handleScrollToOption = (option, isDwArrow) => {
-      const { optFullValMaps, scrollYStore } = internalData;
-      const valueField = computeValueField.value;
-      const cacheItem = optFullValMaps[option[valueField]];
-      if (cacheItem) {
-        const optid = cacheItem.key;
-        const avIndex = cacheItem._index;
-        if (avIndex > -1) {
-          const optWrapperElem = refVirtualWrapper.value;
-          const panelElem = refOptionPanel.value;
-          if (!panelElem) {
-            return;
+        const isMaximize = computeIsMaximize.value;
+        if (isMaximize && !isSelected) {
+          return true;
+        }
+        return false;
+      };
+      const updateYSpace = () => {
+        const { scrollYLoad } = reactData;
+        const { scrollYStore, afterVisibleList } = internalData;
+        reactData.bodyHeight = scrollYLoad ? afterVisibleList.length * scrollYStore.rowHeight : 0;
+        reactData.topSpaceHeight = scrollYLoad ? Math.max(scrollYStore.startIndex * scrollYStore.rowHeight, 0) : 0;
+      };
+      const handleData = () => {
+        const { filterable, allowCreate } = props;
+        const { scrollYLoad, searchValue } = reactData;
+        const { optAddMaps, scrollYStore, afterVisibleList } = internalData;
+        const labelField = computeLabelField.value;
+        const valueField = computeValueField.value;
+        const restList = scrollYLoad ? afterVisibleList.slice(scrollYStore.startIndex, scrollYStore.endIndex) : afterVisibleList.slice(0);
+        if (filterable && allowCreate && searchValue) {
+          if (!restList.some((option) => option[labelField] === searchValue)) {
+            const addItem = optAddMaps[searchValue] || reactive({
+              [getOptKey()]: searchValue,
+              [labelField]: searchValue,
+              [valueField]: searchValue
+            });
+            optAddMaps[searchValue] = addItem;
+            restList.unshift(addItem);
           }
-          const optElem = panelElem.querySelector(`[optid='${optid}']`);
-          if (optWrapperElem) {
-            if (optElem) {
-              const wrapperHeight = optWrapperElem.offsetHeight;
-              const 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;
+        }
+        reactData.optList = restList;
+        return nextTick();
+      };
+      const updateYData = () => {
+        handleData();
+        updateYSpace();
+      };
+      const computeScrollLoad = () => {
+        return nextTick().then(() => {
+          const { scrollYLoad } = reactData;
+          const { scrollYStore } = internalData;
+          const virtualBodyElem = refVirtualBody.value;
+          const virtualYOpts = computeVirtualYOpts.value;
+          let rowHeight = 0;
+          let firstItemElem;
+          if (virtualBodyElem) {
+            if (!firstItemElem) {
+              firstItemElem = virtualBodyElem.children[0];
+            }
+          }
+          if (firstItemElem) {
+            rowHeight = firstItemElem.offsetHeight;
+          }
+          rowHeight = Math.max(20, rowHeight);
+          scrollYStore.rowHeight = rowHeight;
+          if (scrollYLoad) {
+            const scrollBodyElem = refVirtualWrapper.value;
+            const visibleYSize = Math.max(8, scrollBodyElem ? Math.ceil(scrollBodyElem.clientHeight / rowHeight) : 0);
+            const offsetYSize = Math.max(0, Math.min(2, XEUtils.toNumber(virtualYOpts.oSize)));
+            scrollYStore.offsetSize = offsetYSize;
+            scrollYStore.visibleSize = visibleYSize;
+            scrollYStore.endIndex = Math.max(scrollYStore.startIndex, visibleYSize + offsetYSize, scrollYStore.endIndex);
+            updateYData();
+          } else {
+            updateYSpace();
+          }
+        });
+      };
+      const handleScrollToOption = (option, isDwArrow) => {
+        const { optFullValMaps, scrollYStore } = internalData;
+        const valueField = computeValueField.value;
+        const cacheItem = optFullValMaps[option[valueField]];
+        if (cacheItem) {
+          const optid = cacheItem.key;
+          const avIndex = cacheItem._index;
+          if (avIndex > -1) {
+            const optWrapperElem = refVirtualWrapper.value;
+            const panelElem = refOptionPanel.value;
+            if (!panelElem) {
+              return;
+            }
+            const optElem = panelElem.querySelector(`[optid='${optid}']`);
+            if (optWrapperElem) {
+              if (optElem) {
+                const wrapperHeight = optWrapperElem.offsetHeight;
+                const 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 (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;
+                if (isDwArrow) {
+                  optWrapperElem.scrollTop = avIndex * scrollYStore.rowHeight - optWrapperElem.clientHeight + scrollYStore.rowHeight;
+                } else {
+                  optWrapperElem.scrollTop = avIndex * scrollYStore.rowHeight;
                 }
               }
-            } else {
-              if (isDwArrow) {
-                optWrapperElem.scrollTop = avIndex * scrollYStore.rowHeight - optWrapperElem.clientHeight + scrollYStore.rowHeight;
-              } else {
-                optWrapperElem.scrollTop = avIndex * scrollYStore.rowHeight;
-              }
             }
           }
         }
-      }
-    };
-    const scrollTo = (scrollLeft, scrollTop) => {
-      const scrollBodyElem = refVirtualWrapper.value;
-      if (scrollBodyElem) {
-        if (XEUtils.isNumber(scrollLeft)) {
-          scrollBodyElem.scrollLeft = scrollLeft;
-        }
-        if (XEUtils.isNumber(scrollTop)) {
-          scrollBodyElem.scrollTop = scrollTop;
-        }
-      }
-      if (reactData.scrollYLoad) {
-        return new Promise((resolve) => {
-          setTimeout(() => {
-            nextTick(() => {
-              resolve();
-            });
-          }, 50);
-        });
-      }
-      return nextTick();
-    };
-    const refreshScroll = () => {
-      const { lastScrollLeft, lastScrollTop } = internalData;
-      return clearScroll().then(() => {
-        if (lastScrollLeft || lastScrollTop) {
-          internalData.lastScrollLeft = 0;
-          internalData.lastScrollTop = 0;
-          return scrollTo(lastScrollLeft, lastScrollTop);
-        }
-      });
-    };
-    const updateScrollbar = () => {
-      const isVScrollbar = computeIsVScrollbar.value;
-      if (isVScrollbar) {
-        return nextTick().then(() => {
-          updateThumbSize();
-          updateThumbOffset();
-        });
-      }
-      return Promise.resolve();
-    };
-    const recalculate = () => {
-      const el = refElem.value;
-      if (el && el.clientWidth && el.clientHeight) {
-        return computeScrollLoad().then(() => {
-          return updateScrollbar();
-        });
-      }
-      return Promise.resolve();
-    };
-    const loadYData = (evnt) => {
-      const { scrollYStore } = internalData;
-      const { startIndex, endIndex, visibleSize, offsetSize, rowHeight } = scrollYStore;
-      const scrollBodyElem = evnt.target;
-      const scrollTop = scrollBodyElem.scrollTop;
-      const toVisibleIndex = Math.floor(scrollTop / rowHeight);
-      const offsetStartIndex = Math.max(0, toVisibleIndex - 1 - offsetSize);
-      const offsetEndIndex = toVisibleIndex + visibleSize + offsetSize;
-      if (toVisibleIndex <= startIndex || toVisibleIndex >= endIndex - visibleSize - 1) {
-        if (startIndex !== offsetStartIndex || endIndex !== offsetEndIndex) {
-          scrollYStore.startIndex = offsetStartIndex;
-          scrollYStore.endIndex = offsetEndIndex;
-          updateYData();
+      };
+      const scrollTo = (scrollLeft, scrollTop) => {
+        const scrollBodyElem = refVirtualWrapper.value;
+        if (scrollBodyElem) {
+          if (XEUtils.isNumber(scrollLeft)) {
+            scrollBodyElem.scrollLeft = scrollLeft;
+          }
+          if (XEUtils.isNumber(scrollTop)) {
+            scrollBodyElem.scrollTop = scrollTop;
+          }
         }
-      }
-    };
-    const isVMScrollProcess = () => {
-      const delayHover = 250;
-      const { lastScrollTime } = internalData;
-      return !!(lastScrollTime && Date.now() < lastScrollTime + delayHover);
-    };
-    const scrollEvent = (evnt) => {
-      const scrollBodyElem = evnt.target;
-      const scrollTop = scrollBodyElem.scrollTop;
-      const scrollLeft = scrollBodyElem.scrollLeft;
-      const isX = scrollLeft !== internalData.lastScrollLeft;
-      const isY = scrollTop !== internalData.lastScrollTop;
-      const isVScrollbar = computeIsVScrollbar.value;
-      if (isVScrollbar) {
-        updateThumbOffset();
-      }
-      internalData.lastScrollTop = scrollTop;
-      internalData.lastScrollLeft = scrollLeft;
-      if (reactData.scrollYLoad) {
-        loadYData(evnt);
-      }
-      internalData.lastScrollTime = Date.now();
-      dispatchEvent("scroll", { scrollLeft, scrollTop, isX, isY }, evnt);
-    };
-    const loadData = (datas) => {
-      cacheItemMap(datas || []);
-      const { multiple } = props;
-      const { isLoaded, fullData, scrollYStore } = internalData;
-      const defaultOpts = computeDefaultOpts.value;
-      const virtualYOpts = computeVirtualYOpts.value;
-      const valueField = computeValueField.value;
-      Object.assign(scrollYStore, {
-        startIndex: 0,
-        endIndex: 1,
-        visibleSize: 0
-      });
-      internalData.synchData = datas || [];
-      reactData.scrollYLoad = !!virtualYOpts.enabled && virtualYOpts.gt > -1 && (virtualYOpts.gt === 0 || virtualYOpts.gt <= fullData.length);
-      handleData();
-      if (!isLoaded) {
-        const { selectMode } = defaultOpts;
-        if (datas.length > 0 && XEUtils.eqNull(props.modelValue)) {
-          if (selectMode === "all") {
-            if (multiple) {
-              nextTick(() => {
-                emitDefaultValue(datas.map((item) => item[valueField]));
-              });
-            } else {
-              errLog("vxe.error.notConflictProp", ["default-config.selectMode=all", "multiple=true"]);
-            }
-          } else if (selectMode === "first" || selectMode === "last") {
-            const selectItem = XEUtils[selectMode](datas);
-            if (selectItem) {
+        if (reactData.scrollYLoad) {
+          return new Promise((resolve) => {
+            setTimeout(() => {
               nextTick(() => {
-                if (XEUtils.eqNull(props.modelValue)) {
-                  emitDefaultValue(selectItem[valueField]);
-                }
+                resolve();
               });
-            }
+            }, 50);
+          });
+        }
+        return nextTick();
+      };
+      const refreshScroll = () => {
+        const { lastScrollLeft, lastScrollTop } = internalData;
+        return clearScroll().then(() => {
+          if (lastScrollLeft || lastScrollTop) {
+            internalData.lastScrollLeft = 0;
+            internalData.lastScrollTop = 0;
+            return scrollTo(lastScrollLeft, lastScrollTop);
           }
-          internalData.isLoaded = true;
+        });
+      };
+      const updateScrollbar = () => {
+        const isVScrollbar = computeIsVScrollbar.value;
+        if (isVScrollbar) {
+          return nextTick().then(() => {
+            updateThumbSize();
+            updateThumbOffset();
+          });
         }
-      }
-      return computeScrollLoad().then(() => {
-        refreshScroll();
-      });
-    };
-    const clearScroll = () => {
-      const scrollBodyElem = refVirtualWrapper.value;
-      if (scrollBodyElem) {
-        scrollBodyElem.scrollTop = 0;
-        scrollBodyElem.scrollLeft = 0;
-      }
-      internalData.lastScrollTop = 0;
-      internalData.lastScrollLeft = 0;
-      return nextTick();
-    };
-    const hasOptGroupById = (optid) => {
-      const { optGroupKeyMaps } = internalData;
-      return !!optGroupKeyMaps[optid];
-    };
-    const selectMethods = {
-      dispatchEvent,
-      getScrollViewElem() {
-        const viewEl = refVirtualWrapper.value;
-        return viewEl || null;
-      },
-      loadData,
-      reloadData(datas) {
-        internalData.isLoaded = false;
-        clearScroll();
-        return loadData(datas);
-      },
-      isPanelVisible() {
-        return reactData.visiblePanel;
-      },
-      togglePanel() {
-        if (reactData.visiblePanel) {
-          hideOptionPanel();
-        } else {
-          showOptionPanel();
+        return Promise.resolve();
+      };
+      const recalculate = () => {
+        const el = refElem.value;
+        if (el && el.clientWidth && el.clientHeight) {
+          return computeScrollLoad().then(() => {
+            return updateScrollbar();
+          });
         }
-        return nextTick();
-      },
-      hidePanel() {
-        if (reactData.visiblePanel) {
-          hideOptionPanel();
+        return Promise.resolve();
+      };
+      const loadYData = (evnt) => {
+        const { scrollYStore } = internalData;
+        const { startIndex, endIndex, visibleSize, offsetSize, rowHeight } = scrollYStore;
+        const scrollBodyElem = evnt.target;
+        const scrollTop = scrollBodyElem.scrollTop;
+        const toVisibleIndex = Math.floor(scrollTop / rowHeight);
+        const offsetStartIndex = Math.max(0, toVisibleIndex - 1 - offsetSize);
+        const offsetEndIndex = toVisibleIndex + visibleSize + offsetSize;
+        if (toVisibleIndex <= startIndex || toVisibleIndex >= endIndex - visibleSize - 1) {
+          if (startIndex !== offsetStartIndex || endIndex !== offsetEndIndex) {
+            scrollYStore.startIndex = offsetStartIndex;
+            scrollYStore.endIndex = offsetEndIndex;
+            updateYData();
+          }
         }
-        return nextTick();
-      },
-      showPanel() {
-        if (!reactData.visiblePanel) {
-          showOptionPanel();
+      };
+      const isVMScrollProcess = () => {
+        const delayHover = 250;
+        const { lastScrollTime } = internalData;
+        return !!(lastScrollTime && Date.now() < lastScrollTime + delayHover);
+      };
+      const scrollEvent = (evnt) => {
+        const scrollBodyElem = evnt.target;
+        const scrollTop = scrollBodyElem.scrollTop;
+        const scrollLeft = scrollBodyElem.scrollLeft;
+        const isX = scrollLeft !== internalData.lastScrollLeft;
+        const isY = scrollTop !== internalData.lastScrollTop;
+        const isVScrollbar = computeIsVScrollbar.value;
+        if (isVScrollbar) {
+          updateThumbOffset();
         }
-        return nextTick();
-      },
-      refreshOption() {
-        handleOption();
-        updateYData();
-        return nextTick();
-      },
-      focus() {
-        const $input = refInput.value;
-        if ($input) {
-          $input.blur();
+        internalData.lastScrollTop = scrollTop;
+        internalData.lastScrollLeft = scrollLeft;
+        if (reactData.scrollYLoad) {
+          loadYData(evnt);
         }
-        reactData.isActivated = true;
-        return nextTick();
-      },
-      blur() {
-        const $input = refInput.value;
-        if ($input) {
-          $input.blur();
+        internalData.lastScrollTime = Date.now();
+        dispatchEvent("scroll", { scrollLeft, scrollTop, isX, isY }, evnt);
+      };
+      const loadData = (datas) => {
+        cacheItemMap(datas || []);
+        const { multiple } = props;
+        const { isLoaded, fullData, scrollYStore } = internalData;
+        const defaultOpts = computeDefaultOpts.value;
+        const virtualYOpts = computeVirtualYOpts.value;
+        const valueField = computeValueField.value;
+        Object.assign(scrollYStore, {
+          startIndex: 0,
+          endIndex: 1,
+          visibleSize: 0
+        });
+        internalData.synchData = datas || [];
+        reactData.scrollYLoad = !!virtualYOpts.enabled && virtualYOpts.gt > -1 && (virtualYOpts.gt === 0 || virtualYOpts.gt <= fullData.length);
+        handleData();
+        if (!isLoaded) {
+          const { selectMode } = defaultOpts;
+          if (datas.length > 0 && XEUtils.eqNull(props.modelValue)) {
+            if (selectMode === "all") {
+              if (multiple) {
+                nextTick(() => {
+                  emitDefaultValue(datas.map((item) => item[valueField]));
+                });
+              } else {
+                errLog("vxe.error.notConflictProp", ["default-config.selectMode=all", "multiple=true"]);
+              }
+            } else if (selectMode === "first" || selectMode === "last") {
+              const selectItem = XEUtils[selectMode](datas);
+              if (selectItem) {
+                nextTick(() => {
+                  if (XEUtils.eqNull(props.modelValue)) {
+                    emitDefaultValue(selectItem[valueField]);
+                  }
+                });
+              }
+            }
+            internalData.isLoaded = true;
+          }
         }
-        reactData.isActivated = false;
+        return computeScrollLoad().then(() => {
+          refreshScroll();
+        });
+      };
+      const clearScroll = () => {
+        const scrollBodyElem = refVirtualWrapper.value;
+        if (scrollBodyElem) {
+          scrollBodyElem.scrollTop = 0;
+          scrollBodyElem.scrollLeft = 0;
+        }
+        internalData.lastScrollTop = 0;
+        internalData.lastScrollLeft = 0;
         return nextTick();
-      },
-      recalculate,
-      clearScroll
-    };
-    const bindScrollbarResize = () => {
-      const isVScrollbar = computeIsVScrollbar.value;
-      const { scrollObserver } = internalData;
-      if (isVScrollbar) {
-        if (!scrollObserver) {
-          const el = refElem.value;
-          const viewSpaceEl = refVirtualSpaceElem.value;
-          const viewInnerEl = refVirtualBody.value;
-          const scrollObserver2 = globalResize.create(() => {
-            reScrollFlag.value++;
-          });
-          if (el) {
-            scrollObserver2.observe(el);
+      };
+      const hasOptGroupById = (optid) => {
+        const { optGroupKeyMaps } = internalData;
+        return !!optGroupKeyMaps[optid];
+      };
+      const selectMethods = {
+        dispatchEvent,
+        getScrollViewElem() {
+          const viewEl = refVirtualWrapper.value;
+          return viewEl || null;
+        },
+        loadData,
+        reloadData(datas) {
+          internalData.isLoaded = false;
+          clearScroll();
+          return loadData(datas);
+        },
+        isPanelVisible() {
+          return reactData.visiblePanel;
+        },
+        togglePanel() {
+          if (reactData.visiblePanel) {
+            hideOptionPanel();
+          } else {
+            showOptionPanel();
           }
-          if (viewSpaceEl) {
-            scrollObserver2.observe(viewSpaceEl);
+          return nextTick();
+        },
+        hidePanel() {
+          if (reactData.visiblePanel) {
+            hideOptionPanel();
           }
-          if (viewInnerEl) {
-            scrollObserver2.observe(viewInnerEl);
+          return nextTick();
+        },
+        showPanel() {
+          if (!reactData.visiblePanel) {
+            showOptionPanel();
           }
-          internalData.scrollObserver = scrollObserver2;
-        }
-      }
-    };
-    Object.assign($xeSelect, selectMethods);
-    const renderRadio = (option, isOptGroup, isChecked, isDisabled) => {
-      const radioOpts = computeRadioOpts.value;
-      const { showIcon, trigger } = radioOpts;
-      if (isOptGroup || showIcon === false) {
-        return renderEmptyElement($xeSelect);
-      }
-      const ons = {};
-      if (!trigger || trigger === "default") {
-        ons.onClick = (evnt) => {
-          if (!isDisabled && !isOptGroup) {
-            changeOptionEvent(evnt, option);
+          return nextTick();
+        },
+        refreshOption() {
+          handleOption();
+          updateYData();
+          return nextTick();
+        },
+        focus() {
+          const $input = refInput.value;
+          if ($input) {
+            $input.blur();
           }
-        };
-      }
-      return h(
-        "div",
-        {
-          key: 2,
-          class: [
-            "vxe-select-option--radio",
-            {
-              "is--checked": isChecked,
-              "is--disabled": isDisabled
-            }
-          ],
-          ...ons
+          reactData.isActivated = true;
+          return nextTick();
         },
-        [
-          h("span", {
-            class: ["vxe-radio--icon", isChecked ? getIcon().RADIO_CHECKED : isDisabled ? getIcon().RADIO_DISABLED_UNCHECKED : getIcon().RADIO_UNCHECKED]
-          })
-        ]
-      );
-    };
-    const renderCheckbox = (option, isOptGroup, isChecked, isDisabled) => {
-      const checkboxOpts = computeCheckboxOpts.value;
-      const { showIcon, trigger } = checkboxOpts;
-      if (isOptGroup || showIcon === false) {
-        return renderEmptyElement($xeSelect);
-      }
-      const ons = {};
-      if (!trigger || trigger === "default") {
-        ons.onClick = (evnt) => {
-          if (!isDisabled && !isOptGroup) {
-            changeOptionEvent(evnt, option);
+        blur() {
+          const $input = refInput.value;
+          if ($input) {
+            $input.blur();
           }
-        };
-      }
-      return h(
-        "div",
-        {
-          key: 3,
-          class: [
-            "vxe-select-option--checkbox",
-            {
-              "is--checked": isChecked,
-              "is--disabled": isDisabled
-            }
-          ],
-          ...ons
+          reactData.isActivated = false;
+          return nextTick();
         },
-        [
-          h("span", {
-            class: ["vxe-checkbox--icon", isChecked ? getIcon().CHECKBOX_CHECKED : isDisabled ? getIcon().CHECKBOX_DISABLED_UNCHECKED : getIcon().CHECKBOX_UNCHECKED]
-          })
-        ]
-      );
-    };
-    const renderOption = (list) => {
-      const { allowCreate, optionKey, multiple, showRadio, showCheckbox } = props;
-      const { currentOption } = reactData;
-      const { optAddMaps } = internalData;
-      const optionOpts = computeOptionOpts.value;
-      const labelField = computeLabelField.value;
-      const valueField = computeValueField.value;
-      const groupLabelField = computeGroupLabelField.value;
-      const selectVals = computeSelectVals.value;
-      const radioOpts = computeRadioOpts.value;
-      const checkboxOpts = computeCheckboxOpts.value;
-      const { useKey, height } = optionOpts;
-      const optionSlot = slots.option;
-      const isCheckboxMode = showCheckbox && multiple;
-      const isRadioMode = showRadio && !multiple;
-      return list.map((option, cIndex) => {
-        const { slots: slots2, className } = option;
-        const optid = getOptId(option);
-        const optionValue = option[valueField];
-        const isOptGroup = hasOptGroupById(optid);
-        const isAdd = !!(allowCreate && optAddMaps[optid]);
-        const isSelected = !isAdd && selectVals.indexOf(optionValue) > -1;
-        const isVisible = isAdd || !isOptGroup || isOptionVisible(option);
-        const isDisabled = !isAdd && checkOptionDisabled(isSelected, option);
-        const defaultSlot = slots2 ? slots2.default : null;
-        const optSlot = defaultSlot || optionSlot;
-        const optParams = { option, group: isOptGroup ? option : null, $select: $xeSelect };
-        let optLabel = "";
-        const optVNs = [];
-        if (isCheckboxMode) {
-          optVNs.push(renderCheckbox(option, isOptGroup, isSelected, isDisabled));
-        } else if (isRadioMode) {
-          optVNs.push(renderRadio(option, isOptGroup, isSelected, isDisabled));
-        }
-        let otlbVNs = [];
-        if (optSlot) {
-          otlbVNs = callSlot(optSlot, optParams);
-        } else {
-          optLabel = getFuncText(option[isOptGroup ? groupLabelField : labelField] || optionValue);
-          otlbVNs = [optLabel];
-        }
-        optVNs.push(
-          h(
-            "div",
-            {
-              key: 1,
-              class: "vxe-select-option--label"
-            },
-            otlbVNs
-          )
-        );
-        const ons = {
-          onMousedown: (evnt) => {
-            const isLeftBtn = evnt.button === 0;
-            if (isLeftBtn) {
-              evnt.stopPropagation();
+        recalculate,
+        clearScroll
+      };
+      const bindScrollbarResize = () => {
+        const isVScrollbar = computeIsVScrollbar.value;
+        const { scrollObserver } = internalData;
+        if (isVScrollbar) {
+          if (!scrollObserver) {
+            const el = refElem.value;
+            const viewSpaceEl = refVirtualSpaceElem.value;
+            const viewInnerEl = refVirtualBody.value;
+            const scrollObserver2 = globalResize.create(() => {
+              reScrollFlag.value++;
+            });
+            if (el) {
+              scrollObserver2.observe(el);
             }
-          },
-          onMouseenter: () => {
-            if (!isDisabled && !isOptGroup && !isVMScrollProcess()) {
-              setCurrentOption(option);
+            if (viewSpaceEl) {
+              scrollObserver2.observe(viewSpaceEl);
             }
+            if (viewInnerEl) {
+              scrollObserver2.observe(viewInnerEl);
+            }
+            internalData.scrollObserver = scrollObserver2;
           }
-        };
-        if (isCheckboxMode ? checkboxOpts.trigger === "option" : isRadioMode ? radioOpts.trigger === "option" : true) {
+        }
+      };
+      Object.assign($xeSelect, selectMethods);
+      const renderRadio = (option, isOptGroup, isChecked, isDisabled) => {
+        const radioOpts = computeRadioOpts.value;
+        const { showIcon, trigger } = radioOpts;
+        if (isOptGroup || showIcon === false) {
+          return renderEmptyElement($xeSelect);
+        }
+        const ons = {};
+        if (!trigger || trigger === "default") {
           ons.onClick = (evnt) => {
             if (!isDisabled && !isOptGroup) {
               changeOptionEvent(evnt, option);
             }
           };
         }
-        return isVisible ? h(
+        return h(
           "div",
           {
-            key: useKey || optionKey ? optid : cIndex,
+            key: 2,
             class: [
-              "vxe-select-option",
-              className ? XEUtils.isFunction(className) ? className(optParams) : className : "",
+              "vxe-select-option--radio",
               {
-                "vxe-select-optgroup": isOptGroup,
-                "is--disabled": isDisabled,
-                "is--selected": isSelected,
-                "is--add": isAdd,
-                "is--hover": currentOption && getOptId(currentOption) === optid
+                "is--checked": isChecked,
+                "is--disabled": isDisabled
+              }
+            ],
+            ...ons
+          },
+          [
+            h("span", {
+              class: ["vxe-radio--icon", isChecked ? getIcon().RADIO_CHECKED : isDisabled ? getIcon().RADIO_DISABLED_UNCHECKED : getIcon().RADIO_UNCHECKED]
+            })
+          ]
+        );
+      };
+      const renderCheckbox = (option, isOptGroup, isChecked, isDisabled) => {
+        const checkboxOpts = computeCheckboxOpts.value;
+        const { showIcon, trigger } = checkboxOpts;
+        if (isOptGroup || showIcon === false) {
+          return renderEmptyElement($xeSelect);
+        }
+        const ons = {};
+        if (!trigger || trigger === "default") {
+          ons.onClick = (evnt) => {
+            if (!isDisabled && !isOptGroup) {
+              changeOptionEvent(evnt, option);
+            }
+          };
+        }
+        return h(
+          "div",
+          {
+            key: 3,
+            class: [
+              "vxe-select-option--checkbox",
+              {
+                "is--checked": isChecked,
+                "is--disabled": isDisabled
               }
             ],
-            optid,
-            title: optLabel || null,
-            style: height ? {
-              height: toCssUnit(height)
-            } : void 0,
             ...ons
           },
-          allowCreate ? [
+          [
+            h("span", {
+              class: ["vxe-checkbox--icon", isChecked ? getIcon().CHECKBOX_CHECKED : isDisabled ? getIcon().CHECKBOX_DISABLED_UNCHECKED : getIcon().CHECKBOX_UNCHECKED]
+            })
+          ]
+        );
+      };
+      const renderOption = (list) => {
+        const { allowCreate, optionKey, multiple, showRadio, showCheckbox } = props;
+        const { currentOption } = reactData;
+        const { optAddMaps } = internalData;
+        const optionOpts = computeOptionOpts.value;
+        const labelField = computeLabelField.value;
+        const valueField = computeValueField.value;
+        const groupLabelField = computeGroupLabelField.value;
+        const selectVals = computeSelectVals.value;
+        const radioOpts = computeRadioOpts.value;
+        const checkboxOpts = computeCheckboxOpts.value;
+        const { useKey, height } = optionOpts;
+        const optionSlot = slots.option;
+        const isCheckboxMode = showCheckbox && multiple;
+        const isRadioMode = showRadio && !multiple;
+        return list.map((option, cIndex) => {
+          const { slots: slots2, className } = option;
+          const optid = getOptId(option);
+          const optionValue = option[valueField];
+          const isOptGroup = hasOptGroupById(optid);
+          const isAdd = !!(allowCreate && optAddMaps[optid]);
+          const isSelected = !isAdd && selectVals.indexOf(optionValue) > -1;
+          const isVisible = isAdd || !isOptGroup || isOptionVisible(option);
+          const isDisabled = !isAdd && checkOptionDisabled(isSelected, option);
+          const defaultSlot = slots2 ? slots2.default : null;
+          const optSlot = defaultSlot || optionSlot;
+          const optParams = { option, group: isOptGroup ? option : null, $select: $xeSelect };
+          let optLabel = "";
+          const optVNs = [];
+          if (isCheckboxMode) {
+            optVNs.push(renderCheckbox(option, isOptGroup, isSelected, isDisabled));
+          } else if (isRadioMode) {
+            optVNs.push(renderRadio(option, isOptGroup, isSelected, isDisabled));
+          }
+          let otlbVNs = [];
+          if (optSlot) {
+            otlbVNs = callSlot(optSlot, optParams);
+          } else {
+            optLabel = getFuncText(option[isOptGroup ? groupLabelField : labelField] || optionValue);
+            otlbVNs = [optLabel];
+          }
+          optVNs.push(
             h(
               "div",
               {
                 key: 1,
-                class: "vxe-select-option--add-label"
+                class: "vxe-select-option--label"
               },
-              optVNs
-            ),
-            isAdd ? h(
+              otlbVNs
+            )
+          );
+          const ons = {
+            onMousedown: (evnt) => {
+              const isLeftBtn = evnt.button === 0;
+              if (isLeftBtn) {
+                evnt.stopPropagation();
+              }
+            },
+            onMouseenter: () => {
+              if (!isDisabled && !isOptGroup && !isVMScrollProcess()) {
+                setCurrentOption(option);
+              }
+            }
+          };
+          if (isCheckboxMode ? checkboxOpts.trigger === "option" : isRadioMode ? radioOpts.trigger === "option" : true) {
+            ons.onClick = (evnt) => {
+              if (!isDisabled && !isOptGroup) {
+                changeOptionEvent(evnt, option);
+              }
+            };
+          }
+          return isVisible ? h(
+            "div",
+            {
+              key: useKey || optionKey ? optid : cIndex,
+              class: [
+                "vxe-select-option",
+                className ? XEUtils.isFunction(className) ? className(optParams) : className : "",
+                {
+                  "vxe-select-optgroup": isOptGroup,
+                  "is--disabled": isDisabled,
+                  "is--selected": isSelected,
+                  "is--add": isAdd,
+                  "is--hover": currentOption && getOptId(currentOption) === optid
+                }
+              ],
+              optid,
+              title: optLabel || null,
+              style: height ? {
+                height: toCssUnit(height)
+              } : void 0,
+              ...ons
+            },
+            allowCreate ? [
+              h(
+                "div",
+                {
+                  key: 1,
+                  class: "vxe-select-option--add-label"
+                },
+                optVNs
+              ),
+              isAdd ? h(
+                "div",
+                {
+                  key: 2,
+                  class: "vxe-select-option--add-icon"
+                },
+                [
+                  h("i", {
+                    class: getIcon().SELECT_ADD_OPTION
+                  })
+                ]
+              ) : renderEmptyElement($xeSelect)
+            ] : optVNs
+          ) : renderEmptyElement($xeSelect);
+        });
+      };
+      const renderOpts = () => {
+        const { optList, searchLoading } = reactData;
+        if (searchLoading) {
+          return [
+            h(
               "div",
               {
-                key: 2,
-                class: "vxe-select-option--add-icon"
+                class: "vxe-select--search-loading"
               },
               [
                 h("i", {
-                  class: getIcon().SELECT_ADD_OPTION
-                })
+                  class: ["vxe-select--search-icon", getIcon().SELECT_LOADED]
+                }),
+                h(
+                  "span",
+                  {
+                    class: "vxe-select--search-text"
+                  },
+                  getI18n("vxe.select.loadingText")
+                )
               ]
-            ) : renderEmptyElement($xeSelect)
-          ] : optVNs
-        ) : renderEmptyElement($xeSelect);
-      });
-    };
-    const renderOpts = () => {
-      const { optList, searchLoading } = reactData;
-      if (searchLoading) {
+            )
+          ];
+        }
+        if (optList.length) {
+          return renderOption(optList);
+        }
         return [
           h(
             "div",
             {
-              class: "vxe-select--search-loading"
+              class: "vxe-select--empty-placeholder"
+            },
+            props.emptyText || getI18n("vxe.select.emptyText")
+          )
+        ];
+      };
+      const renderVN = () => {
+        const { className, multiple, loading, filterable, showTotalButton, showCheckedButton, showClearButton, showCloseButton, showBadge } = props;
+        const { initialized, isActivated, isAniVisible, optList, visiblePanel, bodyHeight, topSpaceHeight, xThumbWidth, yThumbHeight } = reactData;
+        const vSize = computeSize.value;
+        const isVScrollbar = computeIsVScrollbar.value;
+        const isDisabled = computeIsDisabled.value;
+        const selectLabel = computeSelectLabel.value;
+        const fullLabel = computeFullLabel.value;
+        const btnTransfer = computeBtnTransfer.value;
+        const formReadonly = computeFormReadonly.value;
+        const inpPlaceholder = computeInpPlaceholder.value;
+        const badgeOpts = computeBadgeOpts.value;
+        const badgeLabel = computeBadgeLabel.value;
+        const defaultSlot = slots.default;
+        if (formReadonly) {
+          return h(
+            "div",
+            {
+              ref: refElem,
+              class: [
+                "vxe-select--readonly",
+                className,
+                {
+                  "is--badge": showBadge && badgeLabel,
+                  "is--badge-dot": showBadge && badgeOpts.dot
+                }
+              ]
             },
             [
-              h("i", {
-                class: ["vxe-select--search-icon", getIcon().SELECT_LOADED]
-              }),
+              h(
+                "div",
+                {
+                  class: "vxe-select-slots",
+                  ref: "hideOption"
+                },
+                defaultSlot ? defaultSlot({}) : []
+              ),
               h(
                 "span",
                 {
-                  class: "vxe-select--search-text"
+                  class: "vxe-select-label",
+                  title: fullLabel
+                },
+                selectLabel
+              ),
+              showBadge && badgeLabel ? h(
+                "div",
+                {
+                  class: "vxe-badge--label"
                 },
-                getI18n("vxe.select.loadingText")
-              )
+                badgeLabel
+              ) : renderEmptyElement($xeSelect)
             ]
-          )
-        ];
-      }
-      if (optList.length) {
-        return renderOption(optList);
-      }
-      return [
-        h(
-          "div",
-          {
-            class: "vxe-select--empty-placeholder"
-          },
-          props.emptyText || getI18n("vxe.select.emptyText")
-        )
-      ];
-    };
-    const renderVN = () => {
-      const { className, multiple, loading, filterable, showTotalButton, showCheckedButton, showClearButton, showCloseButton, showBadge } = props;
-      const { initialized, isActivated, isAniVisible, optList, visiblePanel, bodyHeight, topSpaceHeight, xThumbWidth, yThumbHeight } = reactData;
-      const vSize = computeSize.value;
-      const isVScrollbar = computeIsVScrollbar.value;
-      const isDisabled = computeIsDisabled.value;
-      const selectLabel = computeSelectLabel.value;
-      const fullLabel = computeFullLabel.value;
-      const btnTransfer = computeBtnTransfer.value;
-      const formReadonly = computeFormReadonly.value;
-      const inpPlaceholder = computeInpPlaceholder.value;
-      const badgeOpts = computeBadgeOpts.value;
-      const badgeLabel = computeBadgeLabel.value;
-      const defaultSlot = slots.default;
-      if (formReadonly) {
+          );
+        }
+        const currStyle = computeCurrStyle.value;
+        const selectVals = computeSelectVals.value;
+        const popupWrapperStyle = computePopupWrapperStyle.value;
+        const popupOpts = computePopupOpts.value;
+        const headerSlot = slots.header;
+        const footerSlot = slots.footer;
+        const prefixSlot = slots.prefix;
+        const { appendTo } = popupOpts;
+        const ppClassName = popupOpts.className || props.popupClassName;
+        const scrollbarOpts = computeScrollbarOpts.value;
+        const scrollXVisible = computeScrollXVisible.value;
+        const scrollYVisible = computeScrollYVisible.value;
+        const scrollbarXToTop = computeScrollbarXToTop.value;
+        const scrollbarYToLeft = computeScrollbarYToLeft.value;
+        const scrollXAutoHide = computeScrollXAutoHide.value;
+        const scrollYAutoHide = computeScrollYAutoHide.value;
+        const scrollbarWrapperClss = computeScrollbarWrapperClss.value;
         return h(
           "div",
           {
             ref: refElem,
             class: [
-              "vxe-select--readonly",
-              className,
+              "vxe-select",
+              className ? XEUtils.isFunction(className) ? className({ $select: $xeSelect }) : className : "",
               {
+                [`size--${vSize}`]: vSize,
                 "is--badge": showBadge && badgeLabel,
-                "is--badge-dot": showBadge && badgeOpts.dot
+                "is--badge-dot": showBadge && badgeOpts.dot,
+                "is--visible": visiblePanel,
+                "is--disabled": isDisabled,
+                "is--filter": filterable,
+                "is--loading": loading,
+                "is--active": isActivated
               }
-            ]
+            ],
+            style: currStyle
           },
           [
             h(
@@ -1717,12 +1783,28 @@ var select_default = defineVxeComponent({
               defaultSlot ? defaultSlot({}) : []
             ),
             h(
-              "span",
+              VxeInputComponent,
               {
-                class: "vxe-select-label",
-                title: fullLabel
+                ref: refInput,
+                clearable: props.clearable,
+                placeholder: inpPlaceholder,
+                editable: false,
+                disabled: isDisabled,
+                type: "text",
+                prefixIcon: props.prefixIcon,
+                suffixIcon: loading ? getIcon().SELECT_LOADED : visiblePanel ? getIcon().SELECT_OPEN : getIcon().SELECT_CLOSE,
+                autoFocus: false,
+                title: fullLabel,
+                modelValue: selectLabel,
+                onClear: clearEvent,
+                onClick: clickEvent,
+                onFocus: focusEvent,
+                onBlur: blurEvent,
+                onSuffixClick: suffixClickEvent
               },
-              selectLabel
+              prefixSlot ? {
+                prefix: () => prefixSlot({})
+              } : {}
             ),
             showBadge && badgeLabel ? h(
               "div",
@@ -1730,418 +1812,354 @@ var select_default = defineVxeComponent({
                 class: "vxe-badge--label"
               },
               badgeLabel
-            ) : renderEmptyElement($xeSelect)
-          ]
-        );
-      }
-      const currStyle = computeCurrStyle.value;
-      const selectVals = computeSelectVals.value;
-      const popupWrapperStyle = computePopupWrapperStyle.value;
-      const popupOpts = computePopupOpts.value;
-      const headerSlot = slots.header;
-      const footerSlot = slots.footer;
-      const prefixSlot = slots.prefix;
-      const { appendTo } = popupOpts;
-      const ppClassName = popupOpts.className || props.popupClassName;
-      const scrollbarOpts = computeScrollbarOpts.value;
-      const scrollXVisible = computeScrollXVisible.value;
-      const scrollYVisible = computeScrollYVisible.value;
-      const scrollbarXToTop = computeScrollbarXToTop.value;
-      const scrollbarYToLeft = computeScrollbarYToLeft.value;
-      const scrollXAutoHide = computeScrollXAutoHide.value;
-      const scrollYAutoHide = computeScrollYAutoHide.value;
-      const scrollbarWrapperClss = computeScrollbarWrapperClss.value;
-      return h(
-        "div",
-        {
-          ref: refElem,
-          class: [
-            "vxe-select",
-            className ? XEUtils.isFunction(className) ? className({ $select: $xeSelect }) : className : "",
-            {
-              [`size--${vSize}`]: vSize,
-              "is--badge": showBadge && badgeLabel,
-              "is--badge-dot": showBadge && badgeOpts.dot,
-              "is--visible": visiblePanel,
-              "is--disabled": isDisabled,
-              "is--filter": filterable,
-              "is--loading": loading,
-              "is--active": isActivated
-            }
-          ],
-          style: currStyle
-        },
-        [
-          h(
-            "div",
-            {
-              class: "vxe-select-slots",
-              ref: "hideOption"
-            },
-            defaultSlot ? defaultSlot({}) : []
-          ),
-          h(
-            VxeInputComponent,
-            {
-              ref: refInput,
-              clearable: props.clearable,
-              placeholder: inpPlaceholder,
-              editable: false,
-              disabled: isDisabled,
-              type: "text",
-              prefixIcon: props.prefixIcon,
-              suffixIcon: loading ? getIcon().SELECT_LOADED : visiblePanel ? getIcon().SELECT_OPEN : getIcon().SELECT_CLOSE,
-              autoFocus: false,
-              title: fullLabel,
-              modelValue: selectLabel,
-              onClear: clearEvent,
-              onClick: clickEvent,
-              onFocus: focusEvent,
-              onBlur: blurEvent,
-              onSuffixClick: suffixClickEvent
-            },
-            prefixSlot ? {
-              prefix: () => prefixSlot({})
-            } : {}
-          ),
-          showBadge && badgeLabel ? h(
-            "div",
-            {
-              class: "vxe-badge--label"
-            },
-            badgeLabel
-          ) : renderEmptyElement($xeSelect),
-          h(
-            Teleport,
-            {
-              to: getPopupContainer(appendTo),
-              disabled: btnTransfer ? !initialized : true
-            },
-            [
-              h(
-                "div",
-                {
-                  ref: refOptionPanel,
-                  class: [
-                    "vxe-table--ignore-clear vxe-select--panel",
-                    ppClassName ? XEUtils.isFunction(ppClassName) ? ppClassName({ $select: $xeSelect }) : ppClassName : "",
-                    {
-                      [`size--${vSize}`]: vSize,
-                      "is--transfer": btnTransfer,
-                      "ani--leave": !loading && isAniVisible,
-                      "ani--enter": !loading && visiblePanel
-                    }
-                  ],
-                  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(VxeInputComponent, {
-                            ref: refInpSearch,
-                            class: "vxe-select-search--input",
-                            modelValue: reactData.searchValue,
-                            type: "text",
-                            clearable: true,
-                            disabled: false,
-                            readonly: false,
-                            placeholder: getI18n("vxe.select.search"),
-                            prefixIcon: getIcon().INPUT_SEARCH,
-                            "onUpdate:modelValue": modelSearchEvent,
-                            onFocus: focusSearchEvent,
-                            onChange: triggerSearchEvent,
-                            onSearch: triggerSearchEvent
-                          })
-                        ]
-                      ) : renderEmptyElement($xeSelect),
-                      showCheckedButton && multiple || showClearButton || headerSlot ? h(
-                        "div",
-                        {
-                          class: "vxe-select--panel-header"
-                        },
-                        headerSlot ? callSlot(headerSlot, {}) : [
-                          h(
-                            "div",
-                            {
-                              class: "vxe-select--header-button"
-                            },
-                            [
-                              h(
-                                "div",
-                                {
-                                  class: "vxe-select--header-btns"
-                                },
-                                [
-                                  showCheckedButton && multiple ? h(VxeButtonComponent, {
-                                    content: getI18n("vxe.select.allChecked"),
-                                    mode: "text",
-                                    onClick: allCheckedPanelEvent
-                                  }) : renderEmptyElement($xeSelect),
-                                  showClearButton ? h(VxeButtonComponent, {
-                                    content: getI18n("vxe.select.clear"),
-                                    mode: "text",
-                                    onClick: clearCheckedPanelEvent
-                                  }) : renderEmptyElement($xeSelect)
-                                ]
-                              )
-                            ]
-                          )
-                        ]
-                      ) : renderEmptyElement($xeSelect),
-                      h(
-                        "div",
-                        {
-                          class: [
-                            "vxe-select--panel-body",
-                            isVScrollbar ? `ov-x--${scrollXVisible === false ? "hidden" : "visible"}` : "",
-                            isVScrollbar ? `ov-y--${scrollYVisible === false ? "hidden" : "visible"}` : "",
-                            isVScrollbar ? `sx-pos--${scrollbarXToTop ? "top" : "bottom"}` : "",
-                            isVScrollbar ? `sy-pos--${scrollbarYToLeft ? "left" : "right"}` : "",
-                            {
-                              "is--virtual-scrollbar": isVScrollbar,
-                              "ov-padding": isVScrollbar && scrollbarOpts.padding,
-                              "ov-x--auto-hide": isVScrollbar && scrollXAutoHide,
-                              "ov-y--auto-hide": isVScrollbar && scrollYAutoHide,
-                              "overflow-y": yThumbHeight,
-                              "overflow-x": xThumbWidth
-                            }
+            ) : renderEmptyElement($xeSelect),
+            h(
+              Teleport,
+              {
+                to: getPopupContainer(appendTo),
+                disabled: btnTransfer ? !initialized : true
+              },
+              [
+                h(
+                  "div",
+                  {
+                    ref: refOptionPanel,
+                    class: [
+                      "vxe-table--ignore-clear vxe-select--panel",
+                      ppClassName ? XEUtils.isFunction(ppClassName) ? ppClassName({ $select: $xeSelect }) : ppClassName : "",
+                      {
+                        [`size--${vSize}`]: vSize,
+                        "is--transfer": btnTransfer,
+                        "ani--leave": !loading && isAniVisible,
+                        "ani--enter": !loading && visiblePanel
+                      }
+                    ],
+                    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(VxeInputComponent, {
+                              ref: refInpSearch,
+                              class: "vxe-select-search--input",
+                              modelValue: reactData.searchValue,
+                              type: "text",
+                              clearable: true,
+                              disabled: false,
+                              readonly: false,
+                              placeholder: getI18n("vxe.select.search"),
+                              prefixIcon: getIcon().INPUT_SEARCH,
+                              "onUpdate:modelValue": modelSearchEvent,
+                              onFocus: focusSearchEvent,
+                              onChange: triggerSearchEvent,
+                              onSearch: triggerSearchEvent
+                            })
                           ]
-                        },
-                        [
-                          h(
-                            "div",
-                            {
-                              ref: refVirtualWrapper,
-                              class: "vxe-select-option--wrapper",
-                              onScroll: scrollEvent
-                            },
-                            [
-                              h("div", {
-                                ref: refVirtualSpaceElem,
-                                class: "vxe-select--y-space",
-                                style: {
-                                  height: bodyHeight ? `${bodyHeight}px` : ""
-                                }
-                              }),
-                              h(
-                                "div",
-                                {
-                                  ref: refVirtualBody,
-                                  class: "vxe-select--body",
+                        ) : renderEmptyElement($xeSelect),
+                        showCheckedButton && multiple || showClearButton || headerSlot ? h(
+                          "div",
+                          {
+                            class: "vxe-select--panel-header"
+                          },
+                          headerSlot ? callSlot(headerSlot, {}) : [
+                            h(
+                              "div",
+                              {
+                                class: "vxe-select--header-button"
+                              },
+                              [
+                                h(
+                                  "div",
+                                  {
+                                    class: "vxe-select--header-btns"
+                                  },
+                                  [
+                                    showCheckedButton && multiple ? h(VxeButtonComponent, {
+                                      content: getI18n("vxe.select.allChecked"),
+                                      mode: "text",
+                                      onClick: allCheckedPanelEvent
+                                    }) : renderEmptyElement($xeSelect),
+                                    showClearButton ? h(VxeButtonComponent, {
+                                      content: getI18n("vxe.select.clear"),
+                                      mode: "text",
+                                      onClick: clearCheckedPanelEvent
+                                    }) : renderEmptyElement($xeSelect)
+                                  ]
+                                )
+                              ]
+                            )
+                          ]
+                        ) : renderEmptyElement($xeSelect),
+                        h(
+                          "div",
+                          {
+                            class: [
+                              "vxe-select--panel-body",
+                              isVScrollbar ? `ov-x--${scrollXVisible === false ? "hidden" : "visible"}` : "",
+                              isVScrollbar ? `ov-y--${scrollYVisible === false ? "hidden" : "visible"}` : "",
+                              isVScrollbar ? `sx-pos--${scrollbarXToTop ? "top" : "bottom"}` : "",
+                              isVScrollbar ? `sy-pos--${scrollbarYToLeft ? "left" : "right"}` : "",
+                              {
+                                "is--virtual-scrollbar": isVScrollbar,
+                                "ov-padding": isVScrollbar && scrollbarOpts.padding,
+                                "ov-x--auto-hide": isVScrollbar && scrollXAutoHide,
+                                "ov-y--auto-hide": isVScrollbar && scrollYAutoHide,
+                                "overflow-y": yThumbHeight,
+                                "overflow-x": xThumbWidth
+                              }
+                            ]
+                          },
+                          [
+                            h(
+                              "div",
+                              {
+                                ref: refVirtualWrapper,
+                                class: "vxe-select-option--wrapper",
+                                onScroll: scrollEvent
+                              },
+                              [
+                                h("div", {
+                                  ref: refVirtualSpaceElem,
+                                  class: "vxe-select--y-space",
                                   style: {
-                                    marginTop: `${topSpaceHeight}px`
+                                    height: bodyHeight ? `${bodyHeight}px` : ""
                                   }
-                                },
-                                renderOpts()
-                              )
-                            ]
-                          ),
-                          /**
-                           * 滚动条
-                           */
-                          isVScrollbar ? h(
-                            "div",
-                            {
-                              class: scrollbarWrapperClss
-                            },
-                            [
-                              scrollXVisible === false ? renderEmptyElement($xeSelect) : h(
-                                "div",
-                                {
-                                  ref: refTrackXElem,
-                                  class: "vxe-scrollbar--track-x",
-                                  onClick: clickTrackXEvent
-                                },
-                                [
-                                  h("div", {
-                                    ref: refThumbXElem,
-                                    class: "vxe-scrollbar--thumb-x",
-                                    onPointerdown: pointerdownThumbXEvent,
-                                    onPointermove: pointermoveThumbXEvent,
-                                    onPointerup: cleatPointerThumbEvent,
-                                    onPointercancel: cleatPointerThumbEvent,
-                                    onLostpointercapture: cleatPointerThumbEvent
-                                  })
-                                ]
-                              ),
-                              scrollYVisible === false ? renderEmptyElement($xeSelect) : h(
-                                "div",
-                                {
-                                  ref: refTrackYElem,
-                                  class: "vxe-scrollbar--track-y",
-                                  onClick: clickTrackYEvent
-                                },
-                                [
-                                  h("div", {
-                                    ref: refThumbYElem,
-                                    class: "vxe-scrollbar--thumb-y",
-                                    onPointerdown: pointerdownThumbYEvent,
-                                    onPointermove: pointermoveThumbYEvent,
-                                    onPointerup: cleatPointerThumbEvent,
-                                    onPointercancel: cleatPointerThumbEvent,
-                                    onLostpointercapture: cleatPointerThumbEvent
-                                  })
-                                ]
-                              )
-                            ]
-                          ) : renderEmptyElement($xeSelect)
-                        ]
-                      ),
-                      footerSlot || showTotalButton || showCloseButton && multiple ? h(
-                        "div",
-                        {
-                          class: "vxe-select--panel-footer"
-                        },
-                        footerSlot ? callSlot(footerSlot, {}) : [
-                          h(
-                            "div",
-                            {
-                              class: "vxe-select--footer-button"
-                            },
-                            [
-                              showTotalButton ? h(
-                                "div",
-                                {
-                                  class: "vxe-select--total-btns"
-                                },
-                                getI18n("vxe.select.total", [selectVals.length, optList.length])
-                              ) : renderEmptyElement($xeSelect),
-                              showCloseButton && multiple ? h(
-                                "div",
-                                {
-                                  class: "vxe-select--oper-btns"
-                                },
-                                [
-                                  h(VxeButtonComponent, {
-                                    content: getI18n("vxe.select.close"),
-                                    mode: "text",
-                                    onClick: closePanelEvent
-                                  })
-                                ]
-                              ) : renderEmptyElement($xeSelect)
-                            ]
-                          )
-                        ]
-                      ) : renderEmptyElement($xeSelect)
-                    ]
-                  )
-                ] : []
-              )
-            ]
-          )
-        ]
+                                }),
+                                h(
+                                  "div",
+                                  {
+                                    ref: refVirtualBody,
+                                    class: "vxe-select--body",
+                                    style: {
+                                      marginTop: `${topSpaceHeight}px`
+                                    }
+                                  },
+                                  renderOpts()
+                                )
+                              ]
+                            ),
+                            /**
+                             * 滚动条
+                             */
+                            isVScrollbar ? h(
+                              "div",
+                              {
+                                class: scrollbarWrapperClss
+                              },
+                              [
+                                scrollXVisible === false ? renderEmptyElement($xeSelect) : h(
+                                  "div",
+                                  {
+                                    ref: refTrackXElem,
+                                    class: "vxe-scrollbar--track-x",
+                                    onClick: clickTrackXEvent
+                                  },
+                                  [
+                                    h("div", {
+                                      ref: refThumbXElem,
+                                      class: "vxe-scrollbar--thumb-x",
+                                      onPointerdown: pointerdownThumbXEvent,
+                                      onPointermove: pointermoveThumbXEvent,
+                                      onPointerup: cleatPointerThumbEvent,
+                                      onPointercancel: cleatPointerThumbEvent,
+                                      onLostpointercapture: cleatPointerThumbEvent
+                                    })
+                                  ]
+                                ),
+                                scrollYVisible === false ? renderEmptyElement($xeSelect) : h(
+                                  "div",
+                                  {
+                                    ref: refTrackYElem,
+                                    class: "vxe-scrollbar--track-y",
+                                    onClick: clickTrackYEvent
+                                  },
+                                  [
+                                    h("div", {
+                                      ref: refThumbYElem,
+                                      class: "vxe-scrollbar--thumb-y",
+                                      onPointerdown: pointerdownThumbYEvent,
+                                      onPointermove: pointermoveThumbYEvent,
+                                      onPointerup: cleatPointerThumbEvent,
+                                      onPointercancel: cleatPointerThumbEvent,
+                                      onLostpointercapture: cleatPointerThumbEvent
+                                    })
+                                  ]
+                                )
+                              ]
+                            ) : renderEmptyElement($xeSelect)
+                          ]
+                        ),
+                        footerSlot || showTotalButton || showCloseButton && multiple ? h(
+                          "div",
+                          {
+                            class: "vxe-select--panel-footer"
+                          },
+                          footerSlot ? callSlot(footerSlot, {}) : [
+                            h(
+                              "div",
+                              {
+                                class: "vxe-select--footer-button"
+                              },
+                              [
+                                showTotalButton ? h(
+                                  "div",
+                                  {
+                                    class: "vxe-select--total-btns"
+                                  },
+                                  getI18n("vxe.select.total", [selectVals.length, optList.length])
+                                ) : renderEmptyElement($xeSelect),
+                                showCloseButton && multiple ? h(
+                                  "div",
+                                  {
+                                    class: "vxe-select--oper-btns"
+                                  },
+                                  [
+                                    h(VxeButtonComponent, {
+                                      content: getI18n("vxe.select.close"),
+                                      mode: "text",
+                                      onClick: closePanelEvent
+                                    })
+                                  ]
+                                ) : renderEmptyElement($xeSelect)
+                              ]
+                            )
+                          ]
+                        ) : renderEmptyElement($xeSelect)
+                      ]
+                    )
+                  ] : []
+                )
+              ]
+            )
+          ]
+        );
+      };
+      watch(
+        () => reactData.staticOptions,
+        (val) => {
+          loadData(val);
+        }
+      );
+      const refOptsFlag = ref(0);
+      watch(
+        () => props.options,
+        () => {
+          refOptsFlag.value++;
+        }
+      );
+      watch(
+        () => props.options ? props.options.length : -1,
+        () => {
+          refOptsFlag.value++;
+        }
+      );
+      watch(refOptsFlag, () => {
+        loadData(props.options || []);
+      });
+      const refOptGrpsFlag = ref(0);
+      watch(
+        () => props.optionGroups,
+        () => {
+          refOptGrpsFlag.value++;
+        }
+      );
+      watch(
+        () => props.optionGroups ? props.optionGroups.length : -1,
+        () => {
+          refOptGrpsFlag.value++;
+        }
       );
-    };
-    watch(() => reactData.staticOptions, (val) => {
-      loadData(val);
-    });
-    const refOptsFlag = ref(0);
-    watch(() => props.options, () => {
-      refOptsFlag.value++;
-    });
-    watch(() => props.options ? props.options.length : -1, () => {
-      refOptsFlag.value++;
-    });
-    watch(refOptsFlag, () => {
-      loadData(props.options || []);
-    });
-    const refOptGrpsFlag = ref(0);
-    watch(() => props.optionGroups, () => {
-      refOptGrpsFlag.value++;
-    });
-    watch(() => props.optionGroups ? props.optionGroups.length : -1, () => {
-      refOptGrpsFlag.value++;
-    });
-    watch(refOptGrpsFlag, () => {
-      loadData(props.optionGroups || []);
-    });
-    const reScrollFlag = ref(0);
-    const reLayoutFlag = ref(0);
-    watch(computeIsVScrollbar, () => {
-      nextTick(() => {
-        bindScrollbarResize();
+      watch(refOptGrpsFlag, () => {
+        loadData(props.optionGroups || []);
+      });
+      const reScrollFlag = ref(0);
+      const reLayoutFlag = ref(0);
+      watch(computeIsVScrollbar, () => {
         nextTick(() => {
-          reLayoutFlag.value++;
+          bindScrollbarResize();
+          nextTick(() => {
+            reLayoutFlag.value++;
+          });
         });
       });
-    });
-    watch(computeScrollYWidth, () => {
-      reLayoutFlag.value++;
-    });
-    watch(computeScrollXHeight, () => {
-      reLayoutFlag.value++;
-    });
-    watch(computeScrollXVisible, () => {
-      nextTick(() => {
+      watch(computeScrollYWidth, () => {
         reLayoutFlag.value++;
       });
-    });
-    watch(computeScrollYVisible, () => {
-      nextTick(() => {
+      watch(computeScrollXHeight, () => {
         reLayoutFlag.value++;
       });
-    });
-    watch(reLayoutFlag, () => {
-      recalculate().then(() => {
-        recalculate();
+      watch(computeScrollXVisible, () => {
+        nextTick(() => {
+          reLayoutFlag.value++;
+        });
+      });
+      watch(computeScrollYVisible, () => {
+        nextTick(() => {
+          reLayoutFlag.value++;
+        });
+      });
+      watch(reLayoutFlag, () => {
+        recalculate().then(() => {
+          recalculate();
+        });
+      });
+      watch(reScrollFlag, () => {
+        updateScrollbar().then(() => {
+          updateScrollbar();
+        });
       });
-    });
-    watch(reScrollFlag, () => {
-      updateScrollbar().then(() => {
-        updateScrollbar();
+      onMounted(() => {
+        nextTick(() => {
+          const { options, optionGroups } = props;
+          if (optionGroups) {
+            loadData(optionGroups);
+          } else if (options) {
+            loadData(options);
+          }
+        });
+        reLayoutFlag.value++;
+        globalEvents.on($xeSelect, "mousedown", handleGlobalMousedownEvent);
+        globalEvents.on($xeSelect, "keydown", handleGlobalKeydownEvent);
+        globalEvents.on($xeSelect, "blur", handleGlobalBlurEvent);
+        globalEvents.on($xeSelect, "resize", handleGlobalResizeEvent);
+        globalEvents.on($xeSelect, "scroll", handleGlobalScrollEvent);
       });
-    });
-    onMounted(() => {
-      nextTick(() => {
-        const { options, optionGroups } = props;
-        if (optionGroups) {
-          loadData(optionGroups);
-        } else if (options) {
-          loadData(options);
+      onBeforeUnmount(() => {
+        const { scrollObserver } = internalData;
+        if (scrollObserver) {
+          scrollObserver.disconnect();
         }
       });
-      reLayoutFlag.value++;
-      globalEvents.on($xeSelect, "mousedown", handleGlobalMousedownEvent);
-      globalEvents.on($xeSelect, "keydown", handleGlobalKeydownEvent);
-      globalEvents.on($xeSelect, "blur", handleGlobalBlurEvent);
-      globalEvents.on($xeSelect, "resize", handleGlobalResizeEvent);
-      globalEvents.on($xeSelect, "scroll", handleGlobalScrollEvent);
-    });
-    onBeforeUnmount(() => {
-      const { scrollObserver } = internalData;
-      if (scrollObserver) {
-        scrollObserver.disconnect();
-      }
-    });
-    onUnmounted(() => {
-      globalEvents.off($xeSelect, "mousedown");
-      globalEvents.off($xeSelect, "keydown");
-      globalEvents.off($xeSelect, "blur");
-      globalEvents.off($xeSelect, "resize");
-      globalEvents.off($xeSelect, "scroll");
-      XEUtils.assign(reactData, createReactData());
-      XEUtils.assign(internalData, createInternalData());
-    });
-    provide("$xeSelect", $xeSelect);
-    $xeSelect.renderVN = renderVN;
-    return $xeSelect;
-  },
-  render() {
-    return this.renderVN();
-  }
-});
+      onUnmounted(() => {
+        globalEvents.off($xeSelect, "mousedown");
+        globalEvents.off($xeSelect, "keydown");
+        globalEvents.off($xeSelect, "blur");
+        globalEvents.off($xeSelect, "resize");
+        globalEvents.off($xeSelect, "scroll");
+        XEUtils.assign(reactData, createReactData());
+        XEUtils.assign(internalData, createInternalData());
+      });
+      provide("$xeSelect", $xeSelect);
+      $xeSelect.renderVN = renderVN;
+      return $xeSelect;
+    },
+    render() {
+      return this.renderVN();
+    }
+  })
+);
 export {
   select_default as default
 };