vxe-pc-ui 3.20.9 → 3.20.11

package/lib/select/src/select.js

@@ -18,6 +18,17 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var getConfig = _ui.VxeUI.getConfig,
+  getIcon = _ui.VxeUI.getIcon,
+  getI18n = _ui.VxeUI.getI18n,
+  baseUtils = _ui.VxeUI.baseUtils,
+  domUtils = _ui.VxeUI.domUtils,
+  globalEvents = _ui.VxeUI.globalEvents,
+  GLOBAL_EVENT_KEYS = _ui.VxeUI.GLOBAL_EVENT_KEYS,
+  globalResize = _ui.VxeUI.globalResize,
+  createEvent = _ui.VxeUI.createEvent,
+  renderEmptyElement = _ui.VxeUI.renderEmptyElement;
+var getDefVal = baseUtils.getDefVal;
 var _createComponentLog = (0, _log.createComponentLog)('select'),
   errLog = _createComponentLog.errLog;
 function isOptionVisible(option) {
@@ -38,6 +49,9 @@ function createReactData() {
     currentOption: null,
     searchValue: '',
     searchLoading: false,
+    // 滚动条
+    yThumbHeight: 0,
+    xThumbWidth: 0,
     panelIndex: 0,
     panelStyle: {},
     panelPlacement: null,
@@ -57,8 +71,14 @@ function createInternalData() {
     optGroupKeyMaps: {},
     optFullValMaps: {},
     remoteValMaps: {},
-    lastScrollLeft: 0,
+    // 滚动条
+    // scrollObserver: undefined,
+    // isThumbDrag: false,
+    thumbDragOffset: 0,
+    yThumbTop: 0,
+    xThumbLeft: 0,
     lastScrollTop: 0,
+    lastScrollLeft: 0,
     scrollYStore: {
       startIndex: 0,
       endIndex: 0,
@@ -72,7 +92,7 @@ function createInternalData() {
 }
 var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defineVxeComponent)({
   name: 'VxeSelect',
-  mixins: [_ui.globalMixins.sizeMixin],
+  mixins: [_ui.globalMixins.sizeMixin, _ui.globalMixins.vScrollbarMixin, _ui.globalMixins.initVScrollbarMixin],
   model: {
     prop: 'value',
     event: 'modelValue'
@@ -83,13 +103,13 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     emptyValue: {
       type: [String, Number, Boolean, Array],
       default: function _default() {
-        return (0, _ui.getConfig)().select.emptyValue;
+        return getConfig().select.emptyValue;
       }
     },
     clearable: {
       type: Boolean,
       default: function _default() {
-        return (0, _ui.getConfig)().select.clearable;
+        return getConfig().select.clearable;
       }
     },
     placeholder: String,
@@ -106,14 +126,14 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     multiCharOverflow: {
       type: [Number, String],
       default: function _default() {
-        return (0, _ui.getConfig)().select.multiCharOverflow;
+        return getConfig().select.multiCharOverflow;
       }
     },
     prefixIcon: String,
     allowCreate: {
       type: Boolean,
       default: function _default() {
-        return (0, _ui.getConfig)().select.allowCreate;
+        return getConfig().select.allowCreate;
       }
     },
     placement: String,
@@ -137,14 +157,14 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     showRadio: {
       type: Boolean,
       default: function _default() {
-        return (0, _ui.getConfig)().select.showRadio;
+        return getConfig().select.showRadio;
       }
     },
     radioConfig: Object,
     showCheckbox: {
       type: Boolean,
       default: function _default() {
-        return (0, _ui.getConfig)().select.showCheckedButton;
+        return getConfig().select.showCheckedButton;
       }
     },
     checkboxConfig: Object,
@@ -156,7 +176,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     size: {
       type: String,
       default: function _default() {
-        return (0, _ui.getConfig)().select.size || (0, _ui.getConfig)().size;
+        return getConfig().select.size || getConfig().size;
       }
     },
     filterable: Boolean,
@@ -172,37 +192,37 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     checkedClosable: {
       type: Boolean,
       default: function _default() {
-        return (0, _ui.getConfig)().select.checkedClosable;
+        return getConfig().select.checkedClosable;
       }
     },
     clearClosable: {
       type: Boolean,
       default: function _default() {
-        return (0, _ui.getConfig)().select.clearClosable;
+        return getConfig().select.clearClosable;
       }
     },
     showCloseButton: {
       type: Boolean,
       default: function _default() {
-        return (0, _ui.getConfig)().select.showCloseButton;
+        return getConfig().select.showCloseButton;
       }
     },
     showTotalButton: {
       type: Boolean,
       default: function _default() {
-        return (0, _ui.getConfig)().select.showTotalButton;
+        return getConfig().select.showTotalButton;
       }
     },
     showCheckedButton: {
       type: Boolean,
       default: function _default() {
-        return (0, _ui.getConfig)().select.showCheckedButton;
+        return getConfig().select.showCheckedButton;
       }
     },
     showClearButton: {
       type: Boolean,
       default: function _default() {
-        return (0, _ui.getConfig)().select.showClearButton;
+        return getConfig().select.showClearButton;
       }
     },
     transfer: {
@@ -212,6 +232,13 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     popupConfig: Object,
     virtualYConfig: Object,
     scrollY: Object,
+    useScrollbar: {
+      type: Boolean,
+      default: function _default() {
+        return getDefVal(getConfig().select.useScrollbar, getConfig().useScrollbar);
+      }
+    },
+    scrollbarConfig: Object,
     /**
      * 已废弃，被 remote-config.queryMethod 替换
      * @deprecated
@@ -224,7 +251,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     optionId: {
       type: String,
       default: function _default() {
-        return (0, _ui.getConfig)().select.optionId;
+        return getConfig().select.optionId;
       }
     },
     /**
@@ -262,7 +289,9 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     var reactData = createReactData();
     return Object.assign(Object.assign({}, {}), {
       xID: xID,
-      reactData: reactData
+      reactData: reactData,
+      reLayoutFlag: 0,
+      reScrollFlag: 0
     });
   },
   computed: Object.assign(Object.assign({}, {}), {
@@ -306,7 +335,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         return popupOpts.transfer;
       }
       if (transfer === null) {
-        var globalTransfer = (0, _ui.getConfig)().select.transfer;
+        var globalTransfer = getConfig().select.transfer;
         if (_xeUtils.default.isBoolean(globalTransfer)) {
           return globalTransfer;
         }
@@ -323,11 +352,11 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       if (placeholder) {
         return (0, _utils.getFuncText)(placeholder);
       }
-      var globalPlaceholder = (0, _ui.getConfig)().select.placeholder;
+      var globalPlaceholder = getConfig().select.placeholder;
       if (globalPlaceholder) {
         return (0, _utils.getFuncText)(globalPlaceholder);
       }
-      return (0, _ui.getI18n)('vxe.base.pleaseSelect');
+      return getI18n('vxe.base.pleaseSelect');
     },
     computeDefaultOpts: function computeDefaultOpts() {
       var $xeSelect = this;
@@ -372,37 +401,37 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     computePopupOpts: function computePopupOpts() {
       var $xeSelect = this;
       var props = $xeSelect;
-      return Object.assign({}, (0, _ui.getConfig)().select.popupConfig, props.popupConfig);
+      return Object.assign({}, getConfig().select.popupConfig, props.popupConfig);
     },
     computeVirtualYOpts: function computeVirtualYOpts() {
       var $xeSelect = this;
       var props = $xeSelect;
-      return Object.assign({}, (0, _ui.getConfig)().select.virtualYConfig || (0, _ui.getConfig)().select.scrollY, props.virtualYConfig || props.scrollY);
+      return Object.assign({}, getConfig().select.virtualYConfig || getConfig().select.scrollY, props.virtualYConfig || props.scrollY);
     },
     computeRemoteOpts: function computeRemoteOpts() {
       var $xeSelect = this;
       var props = $xeSelect;
-      return Object.assign({}, (0, _ui.getConfig)().select.remoteConfig, props.remoteConfig);
+      return Object.assign({}, getConfig().select.remoteConfig, props.remoteConfig);
     },
     computeFilterOpts: function computeFilterOpts() {
       var $xeSelect = this;
       var props = $xeSelect;
-      return Object.assign({}, (0, _ui.getConfig)().select.filterConfig, props.filterConfig);
+      return Object.assign({}, getConfig().select.filterConfig, props.filterConfig);
     },
     computeOptionOpts: function computeOptionOpts() {
       var $xeSelect = this;
       var props = $xeSelect;
-      return Object.assign({}, (0, _ui.getConfig)().select.optionConfig, props.optionConfig);
+      return Object.assign({}, getConfig().select.optionConfig, props.optionConfig);
     },
     computeRadioOpts: function computeRadioOpts() {
       var $xeSelect = this;
       var props = $xeSelect;
-      return Object.assign({}, (0, _ui.getConfig)().select.radioConfig, props.radioConfig);
+      return Object.assign({}, getConfig().select.radioConfig, props.radioConfig);
     },
     computeCheckboxOpts: function computeCheckboxOpts() {
       var $xeSelect = this;
       var props = $xeSelect;
-      return Object.assign({}, (0, _ui.getConfig)().select.checkboxConfig, props.checkboxConfig);
+      return Object.assign({}, getConfig().select.checkboxConfig, props.checkboxConfig);
     },
     computeIsGroup: function computeIsGroup() {
       var $xeSelect = this;
@@ -497,6 +526,83 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         return "".concat(labels.slice(0, multiMaxCharNum), "...");
       }
       return labels.join(', ');
+    },
+    computeScrollbarOpts: function computeScrollbarOpts() {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      return Object.assign({}, getConfig().tree.scrollbarConfig, props.scrollbarConfig);
+    },
+    computeScrollbarXOpts: function computeScrollbarXOpts() {
+      var $xeSelect = this;
+      var scrollbarOpts = $xeSelect.computeScrollbarOpts;
+      return Object.assign({}, getConfig().scrollbar.xConfig, scrollbarOpts.xConfig, {
+        visible: false
+      });
+    },
+    computeScrollbarYOpts: function computeScrollbarYOpts() {
+      var $xeSelect = this;
+      var scrollbarOpts = $xeSelect.computeScrollbarOpts;
+      return Object.assign({}, getConfig().scrollbar.yConfig, scrollbarOpts.yConfig);
+    },
+    computeScrollXHeight: function computeScrollXHeight() {
+      var $xeSelect = this;
+      var scrollbarOpts = $xeSelect.computeScrollbarOpts;
+      var scrollbarXOpts = $xeSelect.computeScrollbarXOpts;
+      return getDefVal(getDefVal(scrollbarXOpts.height, scrollbarOpts.height), getConfig().scrollbar.height);
+    },
+    computeScrollYWidth: function computeScrollYWidth() {
+      var $xeSelect = this;
+      var scrollbarOpts = $xeSelect.computeScrollbarOpts;
+      var scrollbarYOpts = $xeSelect.computeScrollbarYOpts;
+      return getDefVal(getDefVal(scrollbarYOpts.width, scrollbarOpts.width), getConfig().scrollbar.width);
+    },
+    computeScrollXVisible: function computeScrollXVisible() {
+      var $xeSelect = this;
+      var scrollbarOpts = $xeSelect.computeScrollbarOpts;
+      var scrollbarXOpts = $xeSelect.computeScrollbarXOpts;
+      return getDefVal(scrollbarXOpts.visible, scrollbarOpts.visible);
+    },
+    computeScrollYVisible: function computeScrollYVisible() {
+      var $xeSelect = this;
+      var scrollbarOpts = $xeSelect.computeScrollbarOpts;
+      var scrollbarYOpts = $xeSelect.computeScrollbarYOpts;
+      return getDefVal(scrollbarYOpts.visible, scrollbarOpts.visible);
+    },
+    computeScrollXAutoHide: function computeScrollXAutoHide() {
+      var $xeSelect = this;
+      var scrollbarOpts = $xeSelect.computeScrollbarOpts;
+      var scrollbarXOpts = $xeSelect.computeScrollbarXOpts;
+      return getDefVal(getDefVal(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
+    },
+    computeScrollYAutoHide: function computeScrollYAutoHide() {
+      var $xeSelect = this;
+      var scrollbarOpts = $xeSelect.computeScrollbarOpts;
+      var scrollbarYOpts = $xeSelect.computeScrollbarYOpts;
+      return getDefVal(getDefVal(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
+    },
+    computeScrollbarWrapperClss: function computeScrollbarWrapperClss() {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      var yThumbHeight = reactData.yThumbHeight,
+        xThumbWidth = reactData.xThumbWidth;
+      var scrollbarXToTop = $xeSelect.computeScrollbarXToTop;
+      var scrollbarYToLeft = $xeSelect.computeScrollbarYToLeft;
+      var scrollXVisible = $xeSelect.computeScrollXVisible;
+      var scrollYVisible = $xeSelect.computeScrollYVisible;
+      return domUtils.buildClass(['vxe-scrollbar is--virtual', "ov-x--".concat(scrollXVisible === false ? 'hidden' : 'visible'), "ov-y--".concat(scrollYVisible === false ? 'hidden' : 'visible'), "sx-pos--".concat(scrollbarXToTop ? 'top' : 'bottom'), "sy-pos--".concat(scrollbarYToLeft ? 'left' : 'right')], {
+        'overflow-y': yThumbHeight,
+        'overflow-x': xThumbWidth
+      });
+    },
+    computeScrollbarXToTop: function computeScrollbarXToTop() {
+      var $xeSelect = this;
+      var scrollbarXOpts = $xeSelect.computeScrollbarXOpts;
+      return scrollbarXOpts.position === 'top';
+    },
+    computeScrollbarYToLeft: function computeScrollbarYToLeft() {
+      var $xeSelect = this;
+      var scrollbarYOpts = $xeSelect.computeScrollbarYOpts;
+      return scrollbarYOpts.position === 'left';
     }
   }),
   methods: {
@@ -505,7 +611,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     //
     dispatchEvent: function dispatchEvent(type, params, evnt) {
       var $xeSelect = this;
-      $xeSelect.$emit(type, (0, _ui.createEvent)(evnt, {
+      $xeSelect.$emit(type, createEvent(evnt, {
         $select: $xeSelect
       }, params));
     },
@@ -525,6 +631,11 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         value: value
       }, null);
     },
+    getScrollViewElem: function getScrollViewElem() {
+      var $xeSelect = this;
+      var viewEl = $xeSelect.$refs.refVirtualWrapper;
+      return viewEl || null;
+    },
     isPanelVisible: function isPanelVisible() {
       var $xeSelect = this;
       var reactData = $xeSelect.reactData;
@@ -998,7 +1109,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
           if ($xeSelect.checkMaxLimit(currVlas)) {
             if (_ui.VxeUI) {
               _ui.VxeUI.modal.message({
-                content: (0, _ui.getI18n)('vxe.select.overSizeErr', [max]),
+                content: getI18n('vxe.select.overSizeErr', [max]),
                 status: 'warning'
               });
             }
@@ -1183,12 +1294,12 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var popupOpts = $xeSelect.computePopupOpts;
       var trigger = popupOpts.trigger;
       if (!isDisabled) {
-        var isTab = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.TAB);
-        var isEnter = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ENTER);
-        var isEsc = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ESCAPE);
-        var isUpArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_UP);
-        var isDwArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_DOWN);
-        var isDel = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.DELETE);
+        var isTab = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.TAB);
+        var isEnter = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ENTER);
+        var isEsc = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ESCAPE);
+        var isUpArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_UP);
+        var isDwArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_DOWN);
+        var isDel = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.DELETE);
         if (isTab) {
           reactData.isActivated = false;
         }
@@ -1561,6 +1672,17 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         }
       });
     },
+    updateScrollbar: function updateScrollbar() {
+      var $xeSelect = this;
+      var isVScrollbar = $xeSelect.computeIsVScrollbar;
+      if (isVScrollbar) {
+        return $xeSelect.$nextTick().then(function () {
+          $xeSelect.updateThumbSize();
+          $xeSelect.updateThumbOffset();
+        });
+      }
+      return Promise.resolve();
+    },
     /**
      * 重新计算列表
      */
@@ -1568,7 +1690,9 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var $xeSelect = this;
       var el = $xeSelect.$refs.refElem;
       if (el && el.clientWidth && el.clientHeight) {
-        return $xeSelect.computeScrollLoad();
+        return $xeSelect.computeScrollLoad().then(function () {
+          return $xeSelect.updateScrollbar();
+        });
       }
       return Promise.resolve();
     },
@@ -1609,6 +1733,10 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var scrollBodyElem = evnt.target;
       var scrollTop = scrollBodyElem.scrollTop;
       var scrollLeft = scrollBodyElem.scrollLeft;
+      var isVScrollbar = $xeSelect.computeIsVScrollbar;
+      if (isVScrollbar) {
+        $xeSelect.updateThumbOffset();
+      }
       var isX = scrollLeft !== internalData.lastScrollLeft;
       var isY = scrollTop !== internalData.lastScrollTop;
       internalData.lastScrollTop = scrollTop;
@@ -1705,6 +1833,29 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var optGroupKeyMaps = internalData.optGroupKeyMaps;
       return !!optGroupKeyMaps[optid];
     },
+    // 滚动条
+    bindScrollbarResize: function bindScrollbarResize() {
+      var $xeSelect = this;
+      var internalData = $xeSelect.internalData;
+      var isVScrollbar = $xeSelect.computeIsVScrollbar;
+      var scrollObserver = internalData.scrollObserver;
+      if (isVScrollbar) {
+        if (!scrollObserver) {
+          var el = $xeSelect.$refs.refElem;
+          var viewInnerEl = $xeSelect.$refs.refVirtualSpaceElem;
+          var _scrollObserver = globalResize.create(function () {
+            $xeSelect.reScrollFlag++;
+          });
+          if (el) {
+            _scrollObserver.observe(el);
+          }
+          if (viewInnerEl) {
+            _scrollObserver.observe(viewInnerEl);
+          }
+          internalData.scrollObserver = _scrollObserver;
+        }
+      }
+    },
     //
     // Render
     //
@@ -1714,7 +1865,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var showIcon = radioOpts.showIcon,
         trigger = radioOpts.trigger;
       if (isOptGroup || showIcon === false) {
-        return (0, _ui.renderEmptyElement)($xeSelect);
+        return renderEmptyElement($xeSelect);
       }
       var ons = {};
       if (!trigger || trigger === 'default') {
@@ -1732,7 +1883,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         }],
         on: ons
       }, [h('span', {
-        class: ['vxe-radio--icon', isChecked ? (0, _ui.getIcon)().RADIO_CHECKED : isDisabled ? (0, _ui.getIcon)().RADIO_DISABLED_UNCHECKED : (0, _ui.getIcon)().RADIO_UNCHECKED]
+        class: ['vxe-radio--icon', isChecked ? getIcon().RADIO_CHECKED : isDisabled ? getIcon().RADIO_DISABLED_UNCHECKED : getIcon().RADIO_UNCHECKED]
       })]);
     },
     renderCheckbox: function renderCheckbox(h, option, isOptGroup, isChecked, isDisabled) {
@@ -1741,7 +1892,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var showIcon = checkboxOpts.showIcon,
         trigger = checkboxOpts.trigger;
       if (isOptGroup || showIcon === false) {
-        return (0, _ui.renderEmptyElement)($xeSelect);
+        return renderEmptyElement($xeSelect);
       }
       var ons = {};
       if (!trigger || trigger === 'default') {
@@ -1759,7 +1910,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         }],
         on: ons
       }, [h('span', {
-        class: ['vxe-checkbox--icon', isChecked ? (0, _ui.getIcon)().CHECKBOX_CHECKED : isDisabled ? (0, _ui.getIcon)().CHECKBOX_DISABLED_UNCHECKED : (0, _ui.getIcon)().CHECKBOX_UNCHECKED]
+        class: ['vxe-checkbox--icon', isChecked ? getIcon().CHECKBOX_CHECKED : isDisabled ? getIcon().CHECKBOX_DISABLED_UNCHECKED : getIcon().CHECKBOX_UNCHECKED]
       })]);
     },
     renderOption: function renderOption(h, list) {
@@ -1866,8 +2017,8 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
           key: 2,
           class: 'vxe-select-option--add-icon'
         }, [h('i', {
-          class: (0, _ui.getIcon)().SELECT_ADD_OPTION
-        })]) : (0, _ui.renderEmptyElement)($xeSelect)] : optVNs) : (0, _ui.renderEmptyElement)($xeSelect);
+          class: getIcon().SELECT_ADD_OPTION
+        })]) : renderEmptyElement($xeSelect)] : optVNs) : renderEmptyElement($xeSelect);
       });
     },
     renderOpts: function renderOpts(h) {
@@ -1880,17 +2031,17 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         return [h('div', {
           class: 'vxe-select--search-loading'
         }, [h('i', {
-          class: ['vxe-select--search-icon', (0, _ui.getIcon)().SELECT_LOADED]
+          class: ['vxe-select--search-icon', getIcon().SELECT_LOADED]
         }), h('span', {
           class: 'vxe-select--search-text'
-        }, (0, _ui.getI18n)('vxe.select.loadingText'))])];
+        }, getI18n('vxe.select.loadingText'))])];
       }
       if (optList.length) {
         return $xeSelect.renderOption(h, optList);
       }
       return [h('div', {
         class: 'vxe-select--empty-placeholder'
-      }, props.emptyText || (0, _ui.getI18n)('vxe.select.emptyText'))];
+      }, props.emptyText || getI18n('vxe.select.emptyText'))];
     },
     renderVN: function renderVN(h) {
       var $xeSelect = this;
@@ -1911,8 +2062,11 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         optList = reactData.optList,
         visiblePanel = reactData.visiblePanel,
         bodyHeight = reactData.bodyHeight,
-        topSpaceHeight = reactData.topSpaceHeight;
+        topSpaceHeight = reactData.topSpaceHeight,
+        xThumbWidth = reactData.xThumbWidth,
+        yThumbHeight = reactData.yThumbHeight;
       var vSize = $xeSelect.computeSize;
+      var isVScrollbar = $xeSelect.computeIsVScrollbar;
       var isDisabled = $xeSelect.computeIsDisabled;
       var selectLabel = $xeSelect.computeSelectLabel;
       var fullLabel = $xeSelect.computeFullLabel;
@@ -1942,6 +2096,14 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var footerSlot = slots.footer;
       var prefixSlot = slots.prefix;
       var ppClassName = popupOpts.className || props.popupClassName;
+      var scrollbarOpts = $xeSelect.computeScrollbarOpts;
+      var scrollXVisible = $xeSelect.computeScrollXVisible;
+      var scrollYVisible = $xeSelect.computeScrollYVisible;
+      var scrollbarXToTop = $xeSelect.computeScrollbarXToTop;
+      var scrollbarYToLeft = $xeSelect.computeScrollbarYToLeft;
+      var scrollXAutoHide = $xeSelect.computeScrollXAutoHide;
+      var scrollYAutoHide = $xeSelect.computeScrollYAutoHide;
+      var scrollbarWrapperClss = $xeSelect.computeScrollbarWrapperClss;
       return h('div', {
         ref: 'refElem',
         class: ['vxe-select', className ? _xeUtils.default.isFunction(className) ? className({
@@ -1960,7 +2122,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
           disabled: isDisabled,
           type: 'text',
           prefixIcon: props.prefixIcon,
-          suffixIcon: loading ? (0, _ui.getIcon)().SELECT_LOADED : visiblePanel ? (0, _ui.getIcon)().SELECT_OPEN : (0, _ui.getIcon)().SELECT_CLOSE,
+          suffixIcon: loading ? getIcon().SELECT_LOADED : visiblePanel ? getIcon().SELECT_OPEN : getIcon().SELECT_CLOSE,
           autoFocus: false,
           title: fullLabel,
           value: selectLabel
@@ -2000,8 +2162,8 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
           clearable: true,
           disabled: false,
           readonly: false,
-          placeholder: (0, _ui.getI18n)('vxe.select.search'),
-          prefixIcon: (0, _ui.getIcon)().INPUT_SEARCH
+          placeholder: getI18n('vxe.select.search'),
+          prefixIcon: getIcon().INPUT_SEARCH
         },
         on: {
           'model-value': $xeSelect.modelSearchEvent,
@@ -2009,7 +2171,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
           change: $xeSelect.triggerSearchEvent,
           search: $xeSelect.triggerSearchEvent
         }
-      })]) : (0, _ui.renderEmptyElement)($xeSelect), showCheckedButton && multiple || showClearButton || headerSlot ? h('div', {
+      })]) : renderEmptyElement($xeSelect), showCheckedButton && multiple || showClearButton || headerSlot ? h('div', {
         class: 'vxe-select--panel-header'
       }, headerSlot ? $xeSelect.callSlot(headerSlot, {}, h) : [h('div', {
         class: 'vxe-tree-select--header-button'
@@ -2017,22 +2179,29 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         class: 'vxe-tree-select--header-btns'
       }, [showCheckedButton && multiple ? h(_button.default, {
         props: {
-          content: (0, _ui.getI18n)('vxe.select.allChecked'),
+          content: getI18n('vxe.select.allChecked'),
           mode: 'text'
         },
         on: {
           click: $xeSelect.allCheckedPanelEvent
         }
-      }) : (0, _ui.renderEmptyElement)($xeSelect), showClearButton ? h(_button.default, {
+      }) : renderEmptyElement($xeSelect), showClearButton ? h(_button.default, {
         props: {
-          content: (0, _ui.getI18n)('vxe.select.clear'),
+          content: getI18n('vxe.select.clear'),
           mode: 'text'
         },
         on: {
           click: $xeSelect.clearCheckedPanelEvent
         }
-      }) : (0, _ui.renderEmptyElement)($xeSelect)])])]) : (0, _ui.renderEmptyElement)($xeSelect), h('div', {
-        class: 'vxe-select--panel-body'
+      }) : renderEmptyElement($xeSelect)])])]) : renderEmptyElement($xeSelect), h('div', {
+        class: ['vxe-select--panel-body', isVScrollbar ? "ov-x--".concat(scrollXVisible === false ? 'hidden' : 'visible') : '', isVScrollbar ? "ov-y--".concat(scrollYVisible === false ? 'hidden' : 'visible') : '', isVScrollbar ? "sx-pos--".concat(scrollbarXToTop ? 'top' : 'bottom') : '', isVScrollbar ? "sy-pos--".concat(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',
@@ -2040,6 +2209,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
           scroll: $xeSelect.scrollEvent
         }
       }, [h('div', {
+        ref: 'refVirtualSpaceElem',
         class: 'vxe-select--y-space',
         style: {
           height: bodyHeight ? "".concat(bodyHeight, "px") : ''
@@ -2050,23 +2220,61 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         style: {
           transform: "translateY(".concat(topSpaceHeight, "px)")
         }
-      }, $xeSelect.renderOpts(h))])]), footerSlot || showTotalButton || showCloseButton && multiple ? h('div', {
+      }, $xeSelect.renderOpts(h))]),
+      /**
+       * 滚动条
+       */
+      isVScrollbar ? h('div', {
+        class: scrollbarWrapperClss
+      }, [scrollXVisible === false ? renderEmptyElement($xeSelect) : h('div', {
+        ref: 'refTrackXElem',
+        class: 'vxe-scrollbar--track-x',
+        on: {
+          click: $xeSelect.clickTrackXEvent
+        }
+      }, [h('div', {
+        ref: 'refThumbXElem',
+        class: 'vxe-scrollbar--thumb-x',
+        on: {
+          pointerdown: $xeSelect.pointerdownThumbXEvent,
+          pointermove: $xeSelect.pointermoveThumbXEvent,
+          pointerup: $xeSelect.cleatPointerThumbEvent,
+          pointercancel: $xeSelect.cleatPointerThumbEvent,
+          lostpointercapture: $xeSelect.cleatPointerThumbEvent
+        }
+      })]), scrollYVisible === false ? renderEmptyElement($xeSelect) : h('div', {
+        ref: 'refTrackYElem',
+        class: 'vxe-scrollbar--track-y',
+        on: {
+          click: $xeSelect.clickTrackYEvent
+        }
+      }, [h('div', {
+        ref: 'refThumbYElem',
+        class: 'vxe-scrollbar--thumb-y',
+        on: {
+          pointerdown: $xeSelect.pointerdownThumbYEvent,
+          pointermove: $xeSelect.pointermoveThumbYEvent,
+          pointerup: $xeSelect.cleatPointerThumbEvent,
+          pointercancel: $xeSelect.cleatPointerThumbEvent,
+          lostpointercapture: $xeSelect.cleatPointerThumbEvent
+        }
+      })])]) : renderEmptyElement($xeSelect)]), footerSlot || showTotalButton || showCloseButton && multiple ? h('div', {
         class: 'vxe-select--panel-footer'
       }, footerSlot ? $xeSelect.callSlot(footerSlot, {}, h) : [h('div', {
         class: 'vxe-select--footer-button'
       }, [showTotalButton ? h('div', {
         class: 'vxe-select--total-btns'
-      }, (0, _ui.getI18n)('vxe.select.total', [selectVals.length, optList.length])) : (0, _ui.renderEmptyElement)($xeSelect), showCloseButton && multiple ? h('div', {
+      }, getI18n('vxe.select.total', [selectVals.length, optList.length])) : renderEmptyElement($xeSelect), showCloseButton && multiple ? h('div', {
         class: 'vxe-select--oper-btns'
       }, [h(_button.default, {
         props: {
-          content: (0, _ui.getI18n)('vxe.select.close'),
+          content: getI18n('vxe.select.close'),
           mode: 'text'
         },
         on: {
           click: $xeSelect.closePanelEvent
         }
-      })]) : (0, _ui.renderEmptyElement)($xeSelect)])]) : (0, _ui.renderEmptyElement)($xeSelect)])] : [])]);
+      })]) : renderEmptyElement($xeSelect)])]) : renderEmptyElement($xeSelect)])] : [])]);
     }
   },
   watch: {
@@ -2081,6 +2289,47 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     optionGroups: function optionGroups(val) {
       var $xeSelect = this;
       $xeSelect.loadData(val);
+    },
+    computeIsVScrollbar: function computeIsVScrollbar() {
+      var $xeSelect = this;
+      $xeSelect.$nextTick(function () {
+        $xeSelect.bindScrollbarResize();
+        $xeSelect.$nextTick(function () {
+          $xeSelect.reLayoutFlag++;
+        });
+      });
+    },
+    computeScrollYWidth: function computeScrollYWidth() {
+      var $xeSelect = this;
+      $xeSelect.reLayoutFlag++;
+    },
+    computeScrollXHeight: function computeScrollXHeight() {
+      var $xeSelect = this;
+      $xeSelect.reLayoutFlag++;
+    },
+    computeScrollXVisible: function computeScrollXVisible() {
+      var $xeSelect = this;
+      $xeSelect.$nextTick(function () {
+        $xeSelect.reLayoutFlag++;
+      });
+    },
+    computeScrollYVisible: function computeScrollYVisible() {
+      var $xeSelect = this;
+      $xeSelect.$nextTick(function () {
+        $xeSelect.reLayoutFlag++;
+      });
+    },
+    reLayoutFlag: function reLayoutFlag() {
+      var $xeSelect = this;
+      $xeSelect.recalculate().then(function () {
+        $xeSelect.recalculate();
+      });
+    },
+    reScrollFlag: function reScrollFlag() {
+      var $xeSelect = this;
+      $xeSelect.updateScrollbar().then(function () {
+        $xeSelect.updateScrollbar();
+      });
     }
   },
   created: function created() {
@@ -2099,23 +2348,30 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         $xeSelect.loadData(options);
       }
     });
-    _ui.globalEvents.on($xeSelect, 'mousedown', $xeSelect.handleGlobalMousedownEvent);
-    _ui.globalEvents.on($xeSelect, 'keydown', $xeSelect.handleGlobalKeydownEvent);
-    _ui.globalEvents.on($xeSelect, 'blur', $xeSelect.handleGlobalBlurEvent);
-    _ui.globalEvents.on($xeSelect, 'resize', $xeSelect.handleGlobalResizeEvent);
-    _ui.globalEvents.on($xeSelect, 'scroll', $xeSelect.handleGlobalScrollEvent);
+    $xeSelect.reLayoutFlag++;
+    $xeSelect.bindScrollbarResize();
+    globalEvents.on($xeSelect, 'mousedown', $xeSelect.handleGlobalMousedownEvent);
+    globalEvents.on($xeSelect, 'keydown', $xeSelect.handleGlobalKeydownEvent);
+    globalEvents.on($xeSelect, 'blur', $xeSelect.handleGlobalBlurEvent);
+    globalEvents.on($xeSelect, 'resize', $xeSelect.handleGlobalResizeEvent);
+    globalEvents.on($xeSelect, 'scroll', $xeSelect.handleGlobalScrollEvent);
   },
   beforeDestroy: function beforeDestroy() {
     var $xeSelect = this;
+    var internalData = $xeSelect.internalData;
+    var scrollObserver = internalData.scrollObserver;
     var panelElem = $xeSelect.$refs.refOptionPanel;
     if (panelElem && panelElem.parentNode) {
       panelElem.parentNode.removeChild(panelElem);
     }
-    _ui.globalEvents.off($xeSelect, 'mousedown');
-    _ui.globalEvents.off($xeSelect, 'keydown');
-    _ui.globalEvents.off($xeSelect, 'blur');
-    _ui.globalEvents.off($xeSelect, 'resize');
-    _ui.globalEvents.off($xeSelect, 'scroll');
+    if (scrollObserver) {
+      scrollObserver.disconnect();
+    }
+    globalEvents.off($xeSelect, 'mousedown');
+    globalEvents.off($xeSelect, 'keydown');
+    globalEvents.off($xeSelect, 'blur');
+    globalEvents.off($xeSelect, 'resize');
+    globalEvents.off($xeSelect, 'scroll');
   },
   destroyed: function destroyed() {
     var $xeSelect = this;