vxe-pc-ui 4.20.24 → 4.20.26

package/es/select/src/select.js

@@ -1,7 +1,7 @@
 import { h, Teleport, ref, inject, computed, provide, onUnmounted, reactive, nextTick, watch, onMounted, onBeforeUnmount } from "vue";
 import { defineVxeComponent } from "../../ui/src/comp";
 import XEUtils from "xe-utils";
-import { VxeUI } from "../../ui";
+import { VxeUI } from "@vxe-ui/core";
 import { getEventTargetNode, getPopupContainer, toCssUnit, updatePanelPlacement } from "../../ui/src/dom";
 import { getLastZIndex, nextZIndex, getFuncText, eqEmptyValue } from "../../ui/src/utils";
 import { getSlotVNs } from "../../ui/src/vn";
@@ -207,18 +207,7 @@ var select_default = defineVxeComponent({
      */
     optionKey: Boolean
   },
-  emits: [
-    "update:modelValue",
-    "change",
-    "default-change",
-    "all-change",
-    "clear",
-    "blur",
-    "focus",
-    "click",
-    "scroll",
-    "visible-change"
-  ],
+  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);
@@ -250,21 +239,7 @@ var select_default = defineVxeComponent({
       internalData,
       getRefMaps: () => refMaps
     };
-    const {
-      refTrackXElem,
-      refTrackYElem,
-      refThumbXElem,
-      refThumbYElem,
-      updateThumbSize,
-      updateThumbOffset,
-      clickTrackXEvent,
-      clickTrackYEvent,
-      pointerdownThumbXEvent,
-      pointermoveThumbXEvent,
-      cleatPointerThumbEvent,
-      pointerdownThumbYEvent,
-      pointermoveThumbYEvent
-    } = useFns.useInitVScrollbar($xeSelect);
+    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) {
@@ -508,17 +483,20 @@ var select_default = defineVxeComponent({
       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
-      });
+      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;
@@ -1110,9 +1088,7 @@ var select_default = defineVxeComponent({
       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(() => {
+        Promise.resolve(qyMethod({ $select: $xeSelect, searchValue, value: modelValue })).then(() => nextTick()).catch(() => nextTick()).finally(() => {
           reactData.searchLoading = false;
           handleOption();
           updateYData();
@@ -1494,18 +1470,25 @@ var select_default = defineVxeComponent({
           }
         };
       }
-      return h("div", {
-        key: 2,
-        class: ["vxe-select-option--radio", {
-          "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]
-        })
-      ]);
+      return h(
+        "div",
+        {
+          key: 2,
+          class: [
+            "vxe-select-option--radio",
+            {
+              "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;
@@ -1521,18 +1504,25 @@ var select_default = defineVxeComponent({
           }
         };
       }
-      return h("div", {
-        key: 3,
-        class: ["vxe-select-option--checkbox", {
-          "is--checked": isChecked,
-          "is--disabled": isDisabled
-        }],
-        ...ons
-      }, [
-        h("span", {
-          class: ["vxe-checkbox--icon", isChecked ? getIcon().CHECKBOX_CHECKED : isDisabled ? getIcon().CHECKBOX_DISABLED_UNCHECKED : getIcon().CHECKBOX_UNCHECKED]
-        })
-      ]);
+      return h(
+        "div",
+        {
+          key: 3,
+          class: [
+            "vxe-select-option--checkbox",
+            {
+              "is--checked": isChecked,
+              "is--disabled": isDisabled
+            }
+          ],
+          ...ons
+        },
+        [
+          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;
@@ -1556,7 +1546,7 @@ var select_default = defineVxeComponent({
         const isOptGroup = hasOptGroupById(optid);
         const isAdd = !!(allowCreate && optAddMaps[optid]);
         const isSelected = !isAdd && selectVals.indexOf(optionValue) > -1;
-        const isVisible = isAdd || (!isOptGroup || isOptionVisible(option));
+        const isVisible = isAdd || !isOptGroup || isOptionVisible(option);
         const isDisabled = !isAdd && checkOptionDisabled(isSelected, option);
         const defaultSlot = slots2 ? slots2.default : null;
         const optSlot = defaultSlot || optionSlot;
@@ -1576,10 +1566,14 @@ var select_default = defineVxeComponent({
           otlbVNs = [optLabel];
         }
         optVNs.push(
-          h("div", {
-            key: 1,
-            class: "vxe-select-option--label"
-          }, otlbVNs)
+          h(
+            "div",
+            {
+              key: 1,
+              class: "vxe-select-option--label"
+            },
+            otlbVNs
+          )
         );
         const ons = {
           onMousedown: (evnt) => {
@@ -1601,60 +1595,88 @@ var select_default = defineVxeComponent({
             }
           };
         }
-        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);
+        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", {
-            class: "vxe-select--search-loading"
-          }, [
-            h("i", {
-              class: ["vxe-select--search-icon", getIcon().SELECT_LOADED]
-            }),
-            h("span", {
-              class: "vxe-select--search-text"
-            }, getI18n("vxe.select.loadingText"))
-          ])
+          h(
+            "div",
+            {
+              class: "vxe-select--search-loading"
+            },
+            [
+              h("i", {
+                class: ["vxe-select--search-icon", getIcon().SELECT_LOADED]
+              }),
+              h(
+                "span",
+                {
+                  class: "vxe-select--search-text"
+                },
+                getI18n("vxe.select.loadingText")
+              )
+            ]
+          )
         ];
       }
       if (optList.length) {
         return renderOption(optList);
       }
       return [
-        h("div", {
-          class: "vxe-select--empty-placeholder"
-        }, props.emptyText || getI18n("vxe.select.emptyText"))
+        h(
+          "div",
+          {
+            class: "vxe-select--empty-placeholder"
+          },
+          props.emptyText || getI18n("vxe.select.emptyText")
+        )
       ];
     };
     const renderVN = () => {
@@ -1672,25 +1694,45 @@ var select_default = defineVxeComponent({
       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("div", {
-            class: "vxe-select-slots",
-            ref: "hideOption"
-          }, defaultSlot ? defaultSlot({}) : []),
-          h("span", {
-            class: "vxe-select-label",
-            title: fullLabel
-          }, selectLabel),
-          showBadge && badgeLabel ? h("div", {
-            class: "vxe-badge--label"
-          }, badgeLabel) : renderEmptyElement($xeSelect)
-        ]);
+        return h(
+          "div",
+          {
+            ref: refElem,
+            class: [
+              "vxe-select--readonly",
+              className,
+              {
+                "is--badge": showBadge && badgeLabel,
+                "is--badge-dot": showBadge && badgeOpts.dot
+              }
+            ]
+          },
+          [
+            h(
+              "div",
+              {
+                class: "vxe-select-slots",
+                ref: "hideOption"
+              },
+              defaultSlot ? defaultSlot({}) : []
+            ),
+            h(
+              "span",
+              {
+                class: "vxe-select-label",
+                title: fullLabel
+              },
+              selectLabel
+            ),
+            showBadge && badgeLabel ? h(
+              "div",
+              {
+                class: "vxe-badge--label"
+              },
+              badgeLabel
+            ) : renderEmptyElement($xeSelect)
+          ]
+        );
       }
       const currStyle = computeCurrStyle.value;
       const selectVals = computeSelectVals.value;
@@ -1709,216 +1751,317 @@ var select_default = defineVxeComponent({
       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 : "", {
+      return h(
+        "div",
+        {
+          ref: refElem,
+          class: [
+            "vxe-select",
+            className ? XEUtils.isFunction(className) ? className({ $select: $xeSelect }) : className : "",
+            {
               [`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
-                  }
-                ]
-              }, [
-                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",
-                    style: {
-                      marginTop: `${topSpaceHeight}px`
+              "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
                     }
-                  }, 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);
-    });
-    watch(() => props.options, (val) => {
-      loadData(val || []);
-    });
-    watch(() => props.optionGroups, (val) => {
-      loadData(val || []);
-    });
+                  ],
+                  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
+                            }
+                          ]
+                        },
+                        [
+                          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",
+                                  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);
+      }
+    );
+    watch(
+      () => props.options,
+      (val) => {
+        loadData(val || []);
+      }
+    );
+    watch(
+      () => props.optionGroups,
+      (val) => {
+        loadData(val || []);
+      }
+    );
     const reScrollFlag = ref(0);
     const reLayoutFlag = ref(0);
     watch(computeIsVScrollbar, () => {