vxe-pc-ui 3.19.8 → 3.20.1

package/lib/list/src/list.js

@@ -14,7 +14,8 @@ var _utils = require("../../ui/src/utils");
 var _vn = require("../../ui/src/vn");
 var _log = require("../../ui/src/log");
 var _anime = require("../../ui/src/anime");
-var _util = require("./util");
+var _util = require("../../scrollbar/src/util");
+var _util2 = require("./util");
 var _loading = _interopRequireDefault(require("../../loading"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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; }
@@ -60,6 +61,9 @@ function createReactData() {
     updateCheckboxFlag: 1,
     isAllChecked: false,
     isAllIndeterminate: false,
+    // 滚动条
+    yThumbHeight: 0,
+    xThumbWidth: 0,
     insertRowFlag: 1,
     removeRowFlag: 1,
     dragRow: null,
@@ -69,13 +73,18 @@ function createReactData() {
 }
 function createInternalData() {
   return {
-    resizeObserver: undefined,
     fullData: [],
     afterList: [],
     fullKeyMaps: {},
     rowMaps: {},
-    lastScrollLeft: 0,
+    // 滚动条
+    // resizeObserver: undefined,
+    // isThumbDrag: false,
+    thumbDragOffset: 0,
+    yThumbTop: 0,
+    xThumbLeft: 0,
     lastScrollTop: 0,
+    lastScrollLeft: 0,
     scrollYStore: {
       startIndex: 0,
       endIndex: 0,
@@ -139,7 +148,14 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     dragConfig: Object,
     menuConfig: Object,
     virtualYConfig: Object,
-    scrollY: Object
+    scrollY: Object,
+    useScrollbar: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().list.useScrollbar;
+      }
+    },
+    scrollbarConfig: Object
   },
   data: function data() {
     var xID = _xeUtils.default.uniqueId();
@@ -208,11 +224,20 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     computeWrapperStyles: function computeWrapperStyles() {
       var $xeList = this;
       var rowHeight = $xeList.computeRowHeight;
-      var style = {};
+      var scrollbarOpts = $xeList.computeScrollbarOpts;
+      var scrollbarXOpts = $xeList.computeScrollbarXOpts;
+      var scrollbarYOpts = $xeList.computeScrollbarYOpts;
+      var barWidth = (0, _utils.getDefaultConfig)((0, _utils.getDefaultConfig)(scrollbarYOpts.width, scrollbarOpts.width), (0, _ui.getConfig)().scrollbar.width);
+      var barHeight = (0, _utils.getDefaultConfig)((0, _utils.getDefaultConfig)(scrollbarXOpts.height, scrollbarOpts.height), (0, _ui.getConfig)().scrollbar.height);
+      var stys = {};
       if (rowHeight) {
-        style['--vxe-ui-list-row-height'] = (0, _dom.toCssUnit)(rowHeight);
+        stys['--vxe-ui-list-row-height'] = (0, _dom.toCssUnit)(rowHeight);
       }
-      return style;
+      if (barWidth || barHeight) {
+        stys['--vxe-ui-scrollbar-y-width'] = (0, _dom.toCssUnit)(barWidth || barHeight);
+        stys['--vxe-ui-scrollbar-x-height'] = (0, _dom.toCssUnit)(barHeight || barWidth);
+      }
+      return stys;
     },
     computeVirtualStyles: function computeVirtualStyles() {
       var $xeList = this;
@@ -232,6 +257,76 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         style.maxHeight = (0, _dom.toCssUnit)(Math.max(20, customMaxHeight - headHeight - footHeight));
       }
       return style;
+    },
+    computeScrollbarOpts: function computeScrollbarOpts() {
+      var $xeList = this;
+      var props = $xeList;
+      return Object.assign({}, (0, _ui.getConfig)().list.scrollbarConfig, props.scrollbarConfig);
+    },
+    computeScrollbarXOpts: function computeScrollbarXOpts() {
+      var $xeList = this;
+      var scrollbarOpts = $xeList.computeScrollbarOpts;
+      return Object.assign({}, (0, _ui.getConfig)().scrollbar.xConfig, scrollbarOpts.xConfig);
+    },
+    computeScrollbarYOpts: function computeScrollbarYOpts() {
+      var $xeList = this;
+      var scrollbarOpts = $xeList.computeScrollbarOpts;
+      return Object.assign({}, (0, _ui.getConfig)().scrollbar.yConfig, scrollbarOpts.yConfig);
+    },
+    computeScrollXVisible: function computeScrollXVisible() {
+      var $xeList = this;
+      var scrollbarOpts = $xeList.computeScrollbarOpts;
+      var scrollbarXOpts = $xeList.computeScrollbarXOpts;
+      return (0, _utils.getDefaultConfig)(scrollbarXOpts.visible, scrollbarOpts.visible);
+    },
+    computeScrollYVisible: function computeScrollYVisible() {
+      var $xeList = this;
+      var scrollbarOpts = $xeList.computeScrollbarOpts;
+      var scrollbarYOpts = $xeList.computeScrollbarYOpts;
+      return (0, _utils.getDefaultConfig)(scrollbarYOpts.visible, scrollbarOpts.visible);
+    },
+    computeScrollXAutoHide: function computeScrollXAutoHide() {
+      var $xeList = this;
+      var scrollbarOpts = $xeList.computeScrollbarOpts;
+      var scrollbarXOpts = $xeList.computeScrollbarXOpts;
+      return (0, _utils.getDefaultConfig)((0, _utils.getDefaultConfig)(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), (0, _ui.getConfig)().scrollbar.autoHide);
+    },
+    computeScrollYAutoHide: function computeScrollYAutoHide() {
+      var $xeList = this;
+      var scrollbarOpts = $xeList.computeScrollbarOpts;
+      var scrollbarYOpts = $xeList.computeScrollbarYOpts;
+      return (0, _utils.getDefaultConfig)((0, _utils.getDefaultConfig)(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), (0, _ui.getConfig)().scrollbar.autoHide);
+    },
+    computeScrollbarWrapperClss: function computeScrollbarWrapperClss() {
+      var $xeList = this;
+      var reactData = $xeList.reactData;
+      var scrollbarOpts = $xeList.computeScrollbarOpts;
+      var padding = scrollbarOpts.padding;
+      var yThumbHeight = reactData.yThumbHeight,
+        xThumbWidth = reactData.xThumbWidth;
+      var scrollbarXToTop = $xeList.computeScrollbarXToTop;
+      var scrollbarYToLeft = $xeList.computeScrollbarYToLeft;
+      var scrollXVisible = $xeList.computeScrollXVisible;
+      var scrollYVisible = $xeList.computeScrollYVisible;
+      var scrollXAutoHide = $xeList.computeScrollXAutoHide;
+      var scrollYAutoHide = $xeList.computeScrollYAutoHide;
+      return _ui.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')], {
+        'is--padding': padding,
+        'ov-x--auto-hide': scrollXAutoHide,
+        'ov-y--auto-hide': scrollYAutoHide,
+        'overflow-y': yThumbHeight,
+        'overflow-x': xThumbWidth
+      });
+    },
+    computeScrollbarXToTop: function computeScrollbarXToTop() {
+      var $xeList = this;
+      var scrollbarXOpts = $xeList.computeScrollbarXOpts;
+      return scrollbarXOpts.position === 'top';
+    },
+    computeScrollbarYToLeft: function computeScrollbarYToLeft() {
+      var $xeList = this;
+      var scrollbarYOpts = $xeList.computeScrollbarYOpts;
+      return scrollbarYOpts.position === 'left';
     }
   }),
   methods: {
@@ -570,6 +665,11 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         }
       });
     },
+    updateScrollbar: function updateScrollbar() {
+      var $xeList = this;
+      $xeList.updateThumbSize();
+      $xeList.updateThumbOffset();
+    },
     /**
      * 重新计算列表
      */
@@ -589,6 +689,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
           parentHeight = parentEl.clientHeight - Math.ceil(_xeUtils.default.toNumber(parentStyle.paddingLeft) + _xeUtils.default.toNumber(parentStyle.paddingRight));
         }
         reactData.parentHeight = parentHeight;
+        $xeList.updateScrollbar();
         $xeList.updateHeight();
         if (el.clientWidth && el.clientHeight) {
           return $xeList.computeScrollLoad();
@@ -627,6 +728,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var scrollLeft = scrollBodyElem.scrollLeft;
       var isX = scrollLeft !== internalData.lastScrollLeft;
       var isY = scrollTop !== internalData.lastScrollTop;
+      $xeList.updateThumbOffset();
       internalData.lastScrollTop = scrollTop;
       internalData.lastScrollLeft = scrollLeft;
       if (reactData.scrollYLoad) {
@@ -1517,7 +1619,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var funcName = isAppend ? 'push' : 'unshift';
       newRecords.forEach(function (item) {
         var rowid = getRowIdByField(item, keyField);
-        var rowRest = (0, _util.getItemCacheObj)(item);
+        var rowRest = (0, _util2.getItemCacheObj)(item);
         fullData[funcName](item);
         rowMaps[rowid] = rowRest;
       });
@@ -1569,7 +1671,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
           if (rowIndex > -1) {
             newRecords.forEach(function (item) {
               var rowid = getRowIdByField(item, keyField);
-              var rowRest = (0, _util.getItemCacheObj)(item);
+              var rowRest = (0, _util2.getItemCacheObj)(item);
               rowMaps[rowid] = rowRest;
             });
             var targetIndex = rowIndex;
@@ -1986,6 +2088,189 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         row: row
       }, evnt);
     },
+    // 滚动条
+    updateThumbSize: function updateThumbSize() {
+      var $xeList = this;
+      var reactData = $xeList.reactData;
+      var viewEl = $xeList.$refs.refVirtualWrapper;
+      if (!viewEl) {
+        return;
+      }
+      if (!viewEl.clientHeight || !viewEl.clientHeight) {
+        return;
+      }
+      var trackXEl = $xeList.$refs.refTrackXElem;
+      var xThumbWidth = trackXEl ? (0, _util.getThumbSize)(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0;
+      var thumbXElem = $xeList.$refs.refThumbXElem;
+      if (thumbXElem) {
+        thumbXElem.style.width = xThumbWidth + 'px';
+      }
+      reactData.xThumbWidth = xThumbWidth;
+      var trackYEl = $xeList.$refs.refTrackYElem;
+      var yThumbHeight = trackYEl ? (0, _util.getThumbSize)(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0;
+      var thumbYElem = $xeList.$refs.refThumbYElem;
+      if (thumbYElem) {
+        thumbYElem.style.height = yThumbHeight + 'px';
+      }
+      reactData.yThumbHeight = yThumbHeight;
+    },
+    updateThumbOffset: function updateThumbOffset() {
+      var $xeList = this;
+      var reactData = $xeList.reactData;
+      var internalData = $xeList.internalData;
+      var viewEl = $xeList.$refs.refVirtualWrapper;
+      if (!viewEl) {
+        return;
+      }
+      if (!viewEl.clientHeight || !viewEl.clientHeight) {
+        return;
+      }
+      var xThumbWidth = reactData.xThumbWidth,
+        yThumbHeight = reactData.yThumbHeight;
+      var trackXEl = $xeList.$refs.refTrackXElem;
+      var thumbXElem = $xeList.$refs.refThumbXElem;
+      var xThumbLeft = trackXEl && xThumbWidth ? (0, _util.getThumbOffsetSize)(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth, xThumbWidth) : 0;
+      internalData.xThumbLeft = xThumbLeft;
+      if (thumbXElem && xThumbWidth) {
+        thumbXElem.style.width = xThumbWidth + 'px';
+        thumbXElem.style.transform = "translateX(".concat(xThumbLeft, "px)");
+      }
+      var trackYEl = $xeList.$refs.refTrackYElem;
+      var thumbYElem = $xeList.$refs.refThumbYElem;
+      var yThumbTop = trackYEl && yThumbHeight ? (0, _util.getThumbOffsetSize)(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight, yThumbHeight) : 0;
+      internalData.yThumbTop = yThumbTop;
+      if (thumbYElem && yThumbHeight) {
+        thumbYElem.style.height = yThumbHeight + 'px';
+        thumbYElem.style.transform = "translateY(".concat(yThumbTop, "px)");
+      }
+    },
+    clickTrackXEvent: function clickTrackXEvent(evnt) {
+      var $xeList = this;
+      var reactData = $xeList.reactData;
+      var trackEl = evnt.currentTarget;
+      if (trackEl !== evnt.target) {
+        return;
+      }
+      var viewEl = $xeList.$refs.refVirtualWrapper;
+      if (!viewEl) {
+        return;
+      }
+      var xThumbWidth = reactData.xThumbWidth;
+      var trackRect = trackEl.getBoundingClientRect();
+      viewEl.scrollTo({
+        left: (0, _util.getScrollFromClick)(evnt.clientX - trackRect.left, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth),
+        behavior: 'auto'
+      });
+    },
+    clickTrackYEvent: function clickTrackYEvent(evnt) {
+      var $xeList = this;
+      var reactData = $xeList.reactData;
+      var trackEl = evnt.currentTarget;
+      if (trackEl !== evnt.target) {
+        return;
+      }
+      var viewEl = $xeList.$refs.refVirtualWrapper;
+      if (!viewEl) {
+        return;
+      }
+      var yThumbHeight = reactData.yThumbHeight;
+      var trackRect = trackEl.getBoundingClientRect();
+      viewEl.scrollTo({
+        top: (0, _util.getScrollFromClick)(evnt.clientY - trackRect.top, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight),
+        behavior: 'auto'
+      });
+    },
+    pointerdownThumbXEvent: function pointerdownThumbXEvent(evnt) {
+      var $xeList = this;
+      var reactData = $xeList.reactData;
+      var internalData = $xeList.internalData;
+      var thumbEl = evnt.currentTarget;
+      internalData.isThumbDrag = true;
+      thumbEl.setPointerCapture(evnt.pointerId);
+      var viewEl = $xeList.$refs.refVirtualWrapper;
+      if (!viewEl) {
+        return;
+      }
+      var xThumbWidth = reactData.xThumbWidth;
+      var trackEl = thumbEl.parentElement;
+      var trackRect = trackEl.getBoundingClientRect();
+      var pointerPosition = evnt.clientX - trackRect.left;
+      // 记录 thumb 的偏移
+      var thumbOffset = (0, _util.getThumbOffsetSize)(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
+      internalData.thumbDragOffset = pointerPosition - thumbOffset;
+    },
+    pointermoveThumbXEvent: function pointermoveThumbXEvent(evnt) {
+      var $xeList = this;
+      var reactData = $xeList.reactData;
+      var internalData = $xeList.internalData;
+      var thumbEl = evnt.currentTarget;
+      if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
+        return;
+      }
+      var isThumbDrag = internalData.isThumbDrag,
+        thumbDragOffset = internalData.thumbDragOffset;
+      if (isThumbDrag) {
+        var viewEl = $xeList.$refs.refVirtualWrapper;
+        if (!viewEl) {
+          return;
+        }
+        var xThumbWidth = reactData.xThumbWidth;
+        var _thumbEl = evnt.currentTarget;
+        var trackEl = _thumbEl.parentElement;
+        var trackRect = trackEl.getBoundingClientRect();
+        // 更新偏移
+        viewEl.scrollLeft = (0, _util.getScrollFromDrag)(evnt.clientX - trackRect.left, thumbDragOffset, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
+      }
+    },
+    cleatPointerThumbEvent: function cleatPointerThumbEvent(evnt) {
+      var $xeList = this;
+      var internalData = $xeList.internalData;
+      var thumbEl = evnt.currentTarget;
+      thumbEl.releasePointerCapture(evnt.pointerId);
+      internalData.isThumbDrag = false;
+    },
+    pointerdownThumbYEvent: function pointerdownThumbYEvent(evnt) {
+      var $xeList = this;
+      var reactData = $xeList.reactData;
+      var internalData = $xeList.internalData;
+      var thumbEl = evnt.currentTarget;
+      internalData.isThumbDrag = true;
+      thumbEl.setPointerCapture(evnt.pointerId);
+      var viewEl = $xeList.$refs.refVirtualWrapper;
+      if (!viewEl) {
+        return;
+      }
+      var yThumbHeight = reactData.yThumbHeight;
+      var trackEl = thumbEl.parentElement;
+      var trackRect = trackEl.getBoundingClientRect();
+      var pointerPosition = evnt.clientY - trackRect.top;
+      // 记录 thumb 的偏移
+      var thumbOffset = (0, _util.getThumbOffsetSize)(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
+      internalData.thumbDragOffset = pointerPosition - thumbOffset;
+    },
+    pointermoveThumbYEvent: function pointermoveThumbYEvent(evnt) {
+      var $xeList = this;
+      var reactData = $xeList.reactData;
+      var internalData = $xeList.internalData;
+      var thumbEl = evnt.currentTarget;
+      if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
+        return;
+      }
+      var isThumbDrag = internalData.isThumbDrag,
+        thumbDragOffset = internalData.thumbDragOffset;
+      if (isThumbDrag) {
+        var viewEl = $xeList.$refs.refVirtualWrapper;
+        if (!viewEl) {
+          return;
+        }
+        var yThumbHeight = reactData.yThumbHeight;
+        var _thumbEl2 = evnt.currentTarget;
+        var trackEl = _thumbEl2.parentElement;
+        var trackRect = trackEl.getBoundingClientRect();
+        // 更新偏移
+        viewEl.scrollTop = (0, _util.getScrollFromDrag)(evnt.clientY - trackRect.top, thumbDragOffset, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
+      }
+    },
     //
     // Render
     //
@@ -2222,12 +2507,15 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var slots = $xeList.$scopedSlots;
       var showCheckbox = props.showCheckbox,
         className = props.className,
-        loading = props.loading;
+        loading = props.loading,
+        useScrollbar = props.useScrollbar;
       var bodyHeight = reactData.bodyHeight,
         topSpaceHeight = reactData.topSpaceHeight,
         rowList = reactData.rowList,
         isAllChecked = reactData.isAllChecked,
-        isAllIndeterminate = reactData.isAllIndeterminate;
+        isAllIndeterminate = reactData.isAllIndeterminate,
+        xThumbWidth = reactData.xThumbWidth,
+        yThumbHeight = reactData.yThumbHeight;
       var defaultSlot = slots.default;
       var headerSlot = slots.header;
       var footerSlot = slots.footer;
@@ -2242,6 +2530,15 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var rowOpts = $xeList.computeRowOpts;
       var isHover = rowOpts.isHover,
         padding = rowOpts.padding;
+      var isDrag = $xeList.computeIsDrag;
+      var scrollbarOpts = $xeList.computeScrollbarOpts;
+      var scrollXVisible = $xeList.computeScrollXVisible;
+      var scrollYVisible = $xeList.computeScrollYVisible;
+      var scrollbarXToTop = $xeList.computeScrollbarXToTop;
+      var scrollbarYToLeft = $xeList.computeScrollbarYToLeft;
+      var scrollXAutoHide = $xeList.computeScrollXAutoHide;
+      var scrollYAutoHide = $xeList.computeScrollYAutoHide;
+      var scrollbarWrapperClss = $xeList.computeScrollbarWrapperClss;
       var showDefChekboxHead = showCheckbox && checkboxOpts.showHeader !== false;
       var leOns = {};
       if (isCrossListDrag && !rowList.length) {
@@ -2249,9 +2546,9 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       }
       return h('div', {
         ref: 'refElem',
-        class: ['vxe-list', className ? _xeUtils.default.isFunction(className) ? className({
+        class: ['vxe-list', useScrollbar ? "ov-x--".concat(scrollXVisible === false ? 'hidden' : 'visible') : '', useScrollbar ? "ov-y--".concat(scrollYVisible === false ? 'hidden' : 'visible') : '', useScrollbar ? "sx-pos--".concat(scrollbarXToTop ? 'top' : 'bottom') : '', useScrollbar ? "sy-pos--".concat(scrollbarYToLeft ? 'left' : 'right') : '', className ? _xeUtils.default.isFunction(className) ? className({
           $list: $xeList
-        }) : className : '', _defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--loading', loading)],
+        }) : className : '', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--virtual-scrollbar', useScrollbar), 'ov-padding', useScrollbar && scrollbarOpts.padding), 'ov-x--auto-hide', useScrollbar && scrollXAutoHide), 'ov-y--auto-hide', useScrollbar && scrollYAutoHide), 'overflow-y', yThumbHeight), 'overflow-x', xThumbWidth), 'is--drag', isDrag), 'is--loading', loading)],
         on: leOns,
         style: wrapperStyles
       }, [headerSlot || showDefChekboxHead ? h('div', {
@@ -2310,6 +2607,44 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         items: rowList,
         $list: $xeList
       })) : (0, _ui.renderEmptyElement)($xeList),
+      /**
+       * 滚动条
+       */
+      useScrollbar ? h('div', {
+        class: scrollbarWrapperClss
+      }, [scrollXVisible === false ? (0, _ui.renderEmptyElement)($xeList) : h('div', {
+        ref: 'refTrackXElem',
+        class: 'vxe-scrollbar--track-x',
+        on: {
+          click: $xeList.clickTrackXEvent
+        }
+      }, [h('div', {
+        ref: 'refThumbXElem',
+        class: 'vxe-scrollbar--thumb-x',
+        on: {
+          pointerdown: $xeList.pointerdownThumbXEvent,
+          pointermove: $xeList.pointermoveThumbXEvent,
+          pointerup: $xeList.cleatPointerThumbEvent,
+          pointercancel: $xeList.cleatPointerThumbEvent,
+          lostpointercapture: $xeList.cleatPointerThumbEvent
+        }
+      })]), scrollYVisible === false ? (0, _ui.renderEmptyElement)($xeList) : h('div', {
+        ref: 'refTrackYElem',
+        class: 'vxe-scrollbar--track-y',
+        on: {
+          click: $xeList.clickTrackYEvent
+        }
+      }, [h('div', {
+        ref: 'refThumbYElem',
+        class: 'vxe-scrollbar--thumb-y',
+        on: {
+          pointerdown: $xeList.pointerdownThumbYEvent,
+          pointermove: $xeList.pointermoveThumbYEvent,
+          pointerup: $xeList.cleatPointerThumbEvent,
+          pointercancel: $xeList.cleatPointerThumbEvent,
+          lostpointercapture: $xeList.cleatPointerThumbEvent
+        }
+      })])]) : (0, _ui.renderEmptyElement)($xeList),
       /**
        * 拖拽提示
        */
@@ -2343,13 +2678,29 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var $xeList = this;
       $xeList.reFlag++;
     },
+    useScrollbar: function useScrollbar() {
+      var $xeList = this;
+      $xeList.reFlag++;
+    },
     computeRowHeight: function computeRowHeight() {
       var $xeList = this;
       $xeList.reFlag++;
     },
-    reFlag: function reFlag() {
+    computeScrollXVisible: function computeScrollXVisible() {
+      var $xeList = this;
+      $xeList.$nextTick(function () {
+        $xeList.reFlag++;
+      });
+    },
+    computeScrollYVisible: function computeScrollYVisible() {
       var $xeList = this;
       $xeList.$nextTick(function () {
+        $xeList.reFlag++;
+      });
+    },
+    reFlag: function reFlag() {
+      var $xeList = this;
+      $xeList.recalculate().then(function () {
         $xeList.recalculate();
       });
     },
@@ -2375,7 +2726,9 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     var internalData = $xeList.internalData;
     var showSeq = props.showSeq,
       showRadio = props.showRadio,
-      showCheckbox = props.showCheckbox;
+      showCheckbox = props.showCheckbox,
+      autoResize = props.autoResize,
+      useScrollbar = props.useScrollbar;
     var rowOpts = $xeList.computeRowOpts;
     var useKey = rowOpts.useKey,
       keyField = rowOpts.keyField;
@@ -2397,24 +2750,32 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     if (useKey && !keyField) {
       errLog('vxe.error.reqSupportProp', ['row-config.useKey', 'row-config.keyField']);
     }
-    if (props.autoResize) {
+    if (useScrollbar || autoResize) {
       var el = $xeList.$refs.refElem;
+      var viewInnerEl = $xeList.$refs.refVirtualBody;
       var resizeObserver = _ui.globalResize.create(function () {
-        return $xeList.recalculate();
+        $xeList.reFlag++;
       });
-      resizeObserver.observe(el);
       if (el) {
-        resizeObserver.observe(el.parentElement);
+        resizeObserver.observe(el);
+        if (autoResize) {
+          resizeObserver.observe(el.parentElement);
+        }
+      }
+      if (viewInnerEl) {
+        resizeObserver.observe(viewInnerEl);
       }
       internalData.resizeObserver = resizeObserver;
     }
-    $xeList.recalculate();
-    _ui.globalEvents.on($xeList, 'resize', $xeList.recalculate);
+    $xeList.reFlag++;
+    _ui.globalEvents.on($xeList, 'resize', function () {
+      $xeList.reFlag++;
+    });
   },
   activated: function activated() {
     var $xeList = this;
     $xeList.recalculate().then(function () {
-      return $xeList.refreshScroll();
+      $xeList.refreshScroll();
     });
   },
   beforeDestroy: function beforeDestroy() {