vxe-pc-ui 3.20.0 → 3.20.1

package/packages/layout-aside/src/layout-aside.ts

@@ -97,7 +97,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const vSize = $xeLayoutAside.computeSize
       const collapseOpts = $xeLayoutAside.computeCollapseOpts
       const scrollbarOpts = $xeLayoutAside.computeScrollbarOpts
-      const { native, yConfig, className, viewAttrs, viewClassName, viewInnerClassName } = scrollbarOpts
+      const { className, viewClassName, viewInnerClassName } = scrollbarOpts
       const defaultSlot = slots.default
 
       return h('aside', {
@@ -113,13 +113,16 @@ export default /* define-vxe-component start */ defineVxeComponent({
         useScrollbar
           ? h(VxeScrollbarComponent, {
             props: {
-              native,
+              width: scrollbarOpts.width,
+              height: scrollbarOpts.height,
+              autoHide: scrollbarOpts.autoHide,
+              visible: scrollbarOpts.visible,
               xConfig: {
-                visible: 'hidden'
+                visible: false
               },
-              yConfig,
+              yConfig: scrollbarOpts.yConfig,
               className: 'vxe-layout-aside--scrollbar' + (className ? (' ' + className) : ''),
-              viewAttrs,
+              viewAttrs: scrollbarOpts.viewAttrs,
               viewClassName: 'vxe-layout-aside--scrollbar-view' + (viewClassName ? (' ' + viewClassName) : ''),
               viewInnerClassName: 'vxe-layout-aside--scrollbar-inner' + (viewInnerClassName ? (' ' + viewInnerClassName) : '')
             },

package/packages/layout-body/src/layout-body.ts

@@ -70,6 +70,30 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const props = $xeLayoutBody
 
       return Object.assign({}, getConfig().layoutBody.scrollbarConfig, props.scrollbarConfig)
+    },
+    computeScrollbarProps () {
+      const $xeLayoutBody = this
+      const props = $xeLayoutBody
+      const backtopId = ($xeLayoutBody as any).backtopId as string
+
+      const { showBacktop } = props
+      const scrollbarOpts = $xeLayoutBody.computeScrollbarOpts as VxeLayoutBodyPropTypes.ScrollbarConfig
+      const { className, viewClassName, viewInnerClassName } = scrollbarOpts
+      return {
+        width: scrollbarOpts.width,
+        height: scrollbarOpts.height,
+        autoHide: scrollbarOpts.autoHide,
+        visible: scrollbarOpts.visible,
+        xConfig: scrollbarOpts.xConfig,
+        yConfig: scrollbarOpts.yConfig,
+        className: 'vxe-layout-body--scrollbar' + (className ? (' ' + className) : ''),
+        viewAttrs: {
+          ...scrollbarOpts.viewAttrs,
+          id: showBacktop ? (backtopId || null) : null
+        },
+        viewClassName: 'vxe-layout-body--scrollbar-view' + (viewClassName ? (' ' + viewClassName) : ''),
+        viewInnerClassName: 'vxe-layout-body--scrollbar-inner' + (viewInnerClassName ? (' ' + viewInnerClassName) : '')
+      }
     }
   },
   methods: {
@@ -91,8 +115,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
 
       const { loading, padding, showBacktop, useScrollbar } = props
       const backtopOpts = $xeLayoutBody.computeBacktopOpts
-      const scrollbarOpts = $xeLayoutBody.computeScrollbarOpts
-      const { native, xConfig, yConfig, className, viewAttrs, viewClassName, viewInnerClassName } = scrollbarOpts
+      const scrollbarProps = $xeLayoutBody.computeScrollbarProps
       const vSize = $xeLayoutBody.computeSize
       const defaultSlot = slots.default
       const backtopSlot = slots.backtop
@@ -121,18 +144,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       }, [
         useScrollbar
           ? h(VxeScrollbarComponent, {
-            props: {
-              native,
-              xConfig,
-              yConfig,
-              className: 'vxe-layout-body--scrollbar' + (className ? (' ' + className) : ''),
-              viewAttrs: {
-                ...viewAttrs,
-                id: showBacktop ? (backtopId || null) : null
-              },
-              viewClassName: 'vxe-layout-body--scrollbar-view' + (viewClassName ? (' ' + viewClassName) : ''),
-              viewInnerClassName: 'vxe-layout-body--scrollbar-inner' + (viewInnerClassName ? (' ' + viewInnerClassName) : '')
-            },
+            props: scrollbarProps,
             scopedSlots: {
               default: () => defaultSlot ? defaultSlot({}) : []
             }

package/packages/list/src/list.ts

@@ -4,7 +4,7 @@ import XEUtils, { XEBrowse } from 'xe-utils'
 import { VxeUI, getConfig, getIcon, getI18n, domUtils, menus, globalEvents, globalResize, createEvent, globalMixins, renderEmptyElement } from '../../ui'
 import { crossListDragRowGlobal, getCrossListDragRowInfo } from './store'
 import { addClass, getTpImg, hasClass, isScale, removeClass, toCssUnit } from '../../ui/src/dom'
-import { isEnableConf, getText, enModelValue, deModelValue } from '../../ui/src/utils'
+import { isEnableConf, getText, enModelValue, deModelValue, getDefaultConfig } from '../../ui/src/utils'
 import { getSlotVNs } from '../../ui/src/vn'
 import { createComponentLog } from '../../ui/src/log'
 import { moveRowAnimateToTb, clearRowAnimate } from '../../ui/src/anime'
@@ -226,17 +226,18 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const $xeList = this
 
       const rowHeight = $xeList.computeRowHeight
+      const scrollbarOpts = $xeList.computeScrollbarOpts
       const scrollbarXOpts = $xeList.computeScrollbarXOpts as VxeScrollbarPropTypes.XConfig
       const scrollbarYOpts = $xeList.computeScrollbarYOpts as VxeScrollbarPropTypes.YConfig
+      const barWidth = getDefaultConfig(getDefaultConfig(scrollbarYOpts.width, scrollbarOpts.width), getConfig().scrollbar.width)
+      const barHeight = getDefaultConfig(getDefaultConfig(scrollbarXOpts.height, scrollbarOpts.height), getConfig().scrollbar.height)
       const stys: VxeComponentStyleType = {}
       if (rowHeight) {
         stys['--vxe-ui-list-row-height'] = toCssUnit(rowHeight)
       }
-      if (scrollbarYOpts.width) {
-        stys['--vxe-ui-scrollbar-y-width'] = toCssUnit(scrollbarYOpts.width)
-      }
-      if (scrollbarXOpts.height) {
-        stys['--vxe-ui-scrollbar-x-height'] = toCssUnit(scrollbarXOpts.height)
+      if (barWidth || barHeight) {
+        stys['--vxe-ui-scrollbar-y-width'] = toCssUnit(barWidth || barHeight)
+        stys['--vxe-ui-scrollbar-x-height'] = toCssUnit(barHeight || barWidth)
       }
       return stys
     },
@@ -274,6 +275,34 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const scrollbarOpts = $xeList.computeScrollbarOpts as VxeListPropTypes.ScrollbarConfig
       return Object.assign({}, getConfig().scrollbar.yConfig, scrollbarOpts.yConfig)
     },
+    computeScrollXVisible () {
+      const $xeList = this
+
+      const scrollbarOpts = $xeList.computeScrollbarOpts as VxeListPropTypes.ScrollbarConfig
+      const scrollbarXOpts = $xeList.computeScrollbarXOpts as VxeScrollbarPropTypes.XConfig
+      return getDefaultConfig(scrollbarXOpts.visible, scrollbarOpts.visible)
+    },
+    computeScrollYVisible () {
+      const $xeList = this
+
+      const scrollbarOpts = $xeList.computeScrollbarOpts as VxeListPropTypes.ScrollbarConfig
+      const scrollbarYOpts = $xeList.computeScrollbarYOpts as VxeScrollbarPropTypes.YConfig
+      return getDefaultConfig(scrollbarYOpts.visible, scrollbarOpts.visible)
+    },
+    computeScrollXAutoHide () {
+      const $xeList = this
+
+      const scrollbarOpts = $xeList.computeScrollbarOpts as VxeListPropTypes.ScrollbarConfig
+      const scrollbarXOpts = $xeList.computeScrollbarXOpts as VxeScrollbarPropTypes.XConfig
+      return getDefaultConfig(getDefaultConfig(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide)
+    },
+    computeScrollYAutoHide () {
+      const $xeList = this
+
+      const scrollbarOpts = $xeList.computeScrollbarOpts as VxeListPropTypes.ScrollbarConfig
+      const scrollbarYOpts = $xeList.computeScrollbarYOpts as VxeScrollbarPropTypes.YConfig
+      return getDefaultConfig(getDefaultConfig(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide)
+    },
     computeScrollbarWrapperClss () {
       const $xeList = this
       const reactData = $xeList.reactData
@@ -281,20 +310,22 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const scrollbarOpts = $xeList.computeScrollbarOpts as VxeListPropTypes.ScrollbarConfig
       const { padding } = scrollbarOpts
       const { yThumbHeight, xThumbWidth } = reactData
-      const scrollbarXOpts = $xeList.computeScrollbarXOpts as VxeScrollbarPropTypes.XConfig
-      const scrollbarYOpts = $xeList.computeScrollbarYOpts as VxeScrollbarPropTypes.YConfig
       const scrollbarXToTop = $xeList.computeScrollbarXToTop
       const scrollbarYToLeft = $xeList.computeScrollbarYToLeft
+      const scrollXVisible = $xeList.computeScrollXVisible
+      const scrollYVisible = $xeList.computeScrollYVisible
+      const scrollXAutoHide = $xeList.computeScrollXAutoHide as boolean
+      const scrollYAutoHide = $xeList.computeScrollYAutoHide as boolean
       return domUtils.buildClass([
         'vxe-scrollbar is--virtual',
-        `ov-x--${scrollbarXOpts.visible || 'visible'}`,
-        `ov-y--${scrollbarYOpts.visible || 'visible'}`,
+        `ov-x--${scrollXVisible === false ? 'hidden' : 'visible'}`,
+        `ov-y--${scrollYVisible === false ? 'hidden' : 'visible'}`,
         `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`,
         `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`
       ], {
         'is--padding': padding,
-        'ov-x--auto-hide': scrollbarXOpts.autoHide,
-        'ov-y--auto-hide': scrollbarYOpts.autoHide,
+        'ov-x--auto-hide': scrollXAutoHide,
+        'ov-y--auto-hide': scrollYAutoHide,
         'overflow-y': yThumbHeight,
         'overflow-x': xThumbWidth
       })
@@ -2498,7 +2529,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const slots = $xeList.$scopedSlots
 
       const { showCheckbox, className, loading, useScrollbar } = props
-      const { bodyHeight, topSpaceHeight, rowList, isAllChecked, isAllIndeterminate } = reactData
+      const { bodyHeight, topSpaceHeight, rowList, isAllChecked, isAllIndeterminate, xThumbWidth, yThumbHeight } = reactData
       const defaultSlot = slots.default
       const headerSlot = slots.header
       const footerSlot = slots.footer
@@ -2512,8 +2543,13 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const rowOpts = $xeList.computeRowOpts
       const { isHover, padding } = rowOpts
       const isDrag = $xeList.computeIsDrag
-      const scrollbarXOpts = $xeList.computeScrollbarXOpts
-      const scrollbarYOpts = $xeList.computeScrollbarYOpts
+      const scrollbarOpts = $xeList.computeScrollbarOpts
+      const scrollXVisible = $xeList.computeScrollXVisible
+      const scrollYVisible = $xeList.computeScrollYVisible
+      const scrollbarXToTop = $xeList.computeScrollbarXToTop
+      const scrollbarYToLeft = $xeList.computeScrollbarYToLeft
+      const scrollXAutoHide = $xeList.computeScrollXAutoHide
+      const scrollYAutoHide = $xeList.computeScrollYAutoHide
       const scrollbarWrapperClss = $xeList.computeScrollbarWrapperClss
       const showDefChekboxHead = showCheckbox && checkboxOpts.showHeader !== false
 
@@ -2525,14 +2561,25 @@ export default /* define-vxe-component start */ defineVxeComponent({
       }
       return h('div', {
         ref: 'refElem',
-        class: ['vxe-list', className ? (XEUtils.isFunction(className) ? className({ $list: $xeList }) : className) : '', {
-          [`size--${vSize}`]: vSize,
-          'is--virtual-scrollbar': useScrollbar,
-          'ov-x--auto-hide': useScrollbar && scrollbarXOpts.autoHide,
-          'ov-y--auto-hide': useScrollbar && scrollbarYOpts.autoHide,
-          'is--drag': isDrag,
-          'is--loading': loading
-        }],
+        class: [
+          'vxe-list',
+          useScrollbar ? `ov-x--${scrollXVisible === false ? 'hidden' : 'visible'}` : '',
+          useScrollbar ? `ov-y--${scrollYVisible === false ? 'hidden' : 'visible'}` : '',
+          useScrollbar ? `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}` : '',
+          useScrollbar ? `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}` : '',
+          className ? (XEUtils.isFunction(className) ? className({ $list: $xeList }) : className) : '',
+          {
+            [`size--${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
       }, [
@@ -2593,17 +2640,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
             style: {
               marginTop: topSpaceHeight ? `${topSpaceHeight}px` : ''
             }
-          }, useScrollbar
-            ? (
-                defaultSlot ? defaultSlot({ items: rowList, $list: $xeList }) : rowList.map((row, i) => $xeList.renderRow(h, row, i))
-              )
-            : [
-                h('div', {
-                  key: 'vi',
-                  ref: 'refViewInnerElem',
-                  class: 'vxe-scrollbar--view-inner'
-                }, defaultSlot ? defaultSlot({ items: rowList, $list: $xeList }) : rowList.map((row, i) => $xeList.renderRow(h, row, i)))
-              ])
+          }, defaultSlot ? defaultSlot({ items: rowList, $list: $xeList }) : rowList.map((row, i) => $xeList.renderRow(h, row, i)))
         ]),
         footerSlot
           ? h('div', {
@@ -2618,7 +2655,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
           ? h('div', {
             class: scrollbarWrapperClss
           }, [
-            scrollbarXOpts.visible === 'hidden'
+            scrollXVisible === false
               ? renderEmptyElement($xeList)
               : h('div', {
                 ref: 'refTrackXElem',
@@ -2639,7 +2676,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
                   }
                 })
               ]),
-            scrollbarYOpts.visible === 'hidden'
+            scrollYVisible === false
               ? renderEmptyElement($xeList)
               : h('div', {
                 ref: 'refTrackYElem',
@@ -2700,15 +2737,34 @@ export default /* define-vxe-component start */ defineVxeComponent({
 
       $xeList.reFlag++
     },
+    useScrollbar () {
+      const $xeList = this
+
+      $xeList.reFlag++
+    },
     computeRowHeight () {
       const $xeList = this
 
       $xeList.reFlag++
     },
-    reFlag () {
+    computeScrollXVisible () {
       const $xeList = this
 
       $xeList.$nextTick(() => {
+        $xeList.reFlag++
+      })
+    },
+    computeScrollYVisible () {
+      const $xeList = this
+
+      $xeList.$nextTick(() => {
+        $xeList.reFlag++
+      })
+    },
+    reFlag () {
+      const $xeList = this
+
+      $xeList.recalculate().then(() => {
         $xeList.recalculate()
       })
     },
@@ -2760,13 +2816,13 @@ export default /* define-vxe-component start */ defineVxeComponent({
     }
     if (useScrollbar || autoResize) {
       const el = $xeList.$refs.refElem as HTMLDivElement
-      const viewInnerEl = $xeList.$refs.refViewInnerElem as HTMLDivElement
+      const viewInnerEl = $xeList.$refs.refVirtualBody as HTMLDivElement
       const resizeObserver = globalResize.create(() => {
         $xeList.reFlag++
       })
-      resizeObserver.observe(el)
-      if (autoResize) {
-        if (el) {
+      if (el) {
+        resizeObserver.observe(el)
+        if (autoResize) {
           resizeObserver.observe(el.parentElement as HTMLDivElement)
         }
       }

package/packages/scrollbar/src/scrollbar.ts

@@ -4,6 +4,8 @@ import XEUtils from 'xe-utils'
 import { VxeUI } from '../../ui'
 import { toCssUnit } from '../../ui/src/dom'
 import { getThumbOffsetSize, getThumbSize, getScrollFromClick, getScrollFromDrag } from './util'
+import { getDefaultConfig } from '../../ui/src/utils'
+
 import VxeLoadingComponent from '../../loading'
 
 import type { ScrollbarReactData, ScrollbarInternalData, VxeScrollbarEmits, ValueOf, VxeScrollbarPropTypes, VxeComponentStyleType } from '../../../types'
@@ -33,6 +35,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
   name: 'VxeScrollbar',
   props: {
     id: [String, Number] as PropType<VxeScrollbarPropTypes.Id>,
+    viewId: [String, Number] as PropType<VxeScrollbarPropTypes.ViewId>,
     width: [String, Number] as PropType<VxeScrollbarPropTypes.Width>,
     height: [String, Number] as PropType<VxeScrollbarPropTypes.Height>,
     minWidth: [String, Number] as PropType<VxeScrollbarPropTypes.MinWidth>,
@@ -48,6 +51,14 @@ export default /* define-vxe-component start */ defineVxeComponent({
       type: Boolean as PropType<VxeScrollbarPropTypes.Padding>,
       default: () => getConfig().scrollbar.padding
     },
+    autoHide: {
+      type: Boolean as PropType<VxeScrollbarPropTypes.AutoHide>,
+      default: () => getConfig().scrollbar.autoHide
+    },
+    visible: {
+      type: Boolean as PropType<VxeScrollbarPropTypes.Visible>,
+      default: () => getConfig().scrollbar.visible
+    },
     xConfig: Object as PropType<VxeScrollbarPropTypes.XConfig>,
     yConfig: Object as PropType<VxeScrollbarPropTypes.YConfig>,
     className: {
@@ -94,6 +105,8 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const { width, height, minWidth, minHeight, maxWidth, maxHeight } = props
       const xOpts = $xeScrollbar.computeXOpts
       const yOpts = $xeScrollbar.computeYOpts
+      const barWidth = yOpts.width
+      const barHeight = xOpts.height
       const stys: VxeComponentStyleType = {}
       if (width) {
         stys.width = toCssUnit(width)
@@ -113,14 +126,44 @@ export default /* define-vxe-component start */ defineVxeComponent({
       if (maxHeight) {
         stys.maxHeight = toCssUnit(maxHeight)
       }
-      if (yOpts.width) {
-        stys['--vxe-ui-scrollbar-y-width'] = toCssUnit(yOpts.width)
-      }
-      if (xOpts.height) {
-        stys['--vxe-ui-scrollbar-x-height'] = toCssUnit(xOpts.height)
+      if (barWidth || barHeight) {
+        stys['--vxe-ui-scrollbar-y-width'] = toCssUnit(barWidth || barHeight)
+        stys['--vxe-ui-scrollbar-x-height'] = toCssUnit(barHeight || barWidth)
       }
       return stys
     },
+    computeXVisible () {
+      const $xeScrollbar = this
+      const props = $xeScrollbar
+
+      const { visible } = props
+      const xOpts = ($xeScrollbar as any).computeXOpts as VxeScrollbarPropTypes.XConfig
+      return getDefaultConfig(xOpts.visible, visible)
+    },
+    computeYVisible () {
+      const $xeScrollbar = this
+      const props = $xeScrollbar
+
+      const { visible } = props
+      const yOpts = ($xeScrollbar as any).computeYOpts as VxeScrollbarPropTypes.YConfig
+      return getDefaultConfig(yOpts.visible, visible)
+    },
+    computeXAutoHide () {
+      const $xeScrollbar = this
+      const props = $xeScrollbar
+
+      const { autoHide } = props
+      const xOpts = ($xeScrollbar as any).computeXOpts as VxeScrollbarPropTypes.XConfig
+      return getDefaultConfig(xOpts.autoHide, autoHide)
+    },
+    computeYAutoHide () {
+      const $xeScrollbar = this
+      const props = $xeScrollbar
+
+      const { autoHide } = props
+      const yOpts = ($xeScrollbar as any).computeYOpts as VxeScrollbarPropTypes.YConfig
+      return getDefaultConfig(yOpts.autoHide, autoHide)
+    },
     computeWrapperClss () {
       const $xeScrollbar = this
       const props = $xeScrollbar
@@ -128,22 +171,24 @@ export default /* define-vxe-component start */ defineVxeComponent({
 
       const { native, className, padding } = props
       const { yThumbHeight, xThumbWidth } = reactData
-      const xOpts = ($xeScrollbar as any).computeXOpts as VxeScrollbarPropTypes.XConfig
-      const yOpts = ($xeScrollbar as any).computeYOpts as VxeScrollbarPropTypes.YConfig
       const xToTop = ($xeScrollbar as any).computeXToTop as boolean
       const yToLeft = ($xeScrollbar as any).computeYToLeft as boolean
+      const xVisible = ($xeScrollbar as any).computeXVisible
+      const yVisible = ($xeScrollbar as any).computeYVisible
+      const xAutoHide = ($xeScrollbar as any).computeXAutoHide
+      const yAutoHide = ($xeScrollbar as any).computeYAutoHide
       return domUtils.buildClass([
         'vxe-scrollbar',
-        `ov-x--${xOpts.visible || 'visible'}`,
-        `ov-y--${yOpts.visible || 'visible'}`,
+        `ov-x--${xVisible === false ? 'hidden' : 'visible'}`,
+        `ov-y--${yVisible === false ? 'hidden' : 'visible'}`,
         `sx-pos--${xToTop ? 'top' : 'bottom'}`,
         `sy-pos--${yToLeft ? 'left' : 'right'}`,
         native ? 'is--native' : 'is--virtual',
         className
       ], {
         'is--padding': padding,
-        'ov-x--auto-hide': xOpts.autoHide,
-        'ov-y--auto-hide': yOpts.autoHide,
+        'ov-x--auto-hide': xAutoHide,
+        'ov-y--auto-hide': yAutoHide,
         'overflow-y': yThumbHeight,
         'overflow-x': xThumbWidth
       })
@@ -540,13 +585,13 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const props = $xeScrollbar
       const slots = $xeScrollbar.$scopedSlots
 
-      const { id, native, loading, viewAttrs } = props
+      const { id, native, loading, viewId, viewAttrs } = props
       const wrapperStyle = $xeScrollbar.computeWrapperStyle
       const wrapperClss = $xeScrollbar.computeWrapperClss
       const viewClss = $xeScrollbar.computeViewClss
       const viewInnerClss = $xeScrollbar.computeViewInnerClss
-      const xOpts = $xeScrollbar.computeXOpts
-      const yOpts = $xeScrollbar.computeYOpts
+      const xVisible = $xeScrollbar.computeXVisible
+      const yVisible = $xeScrollbar.computeYVisible
       const defaultSlot = slots.default
       return h('div', {
         ref: 'refElem',
@@ -559,7 +604,10 @@ export default /* define-vxe-component start */ defineVxeComponent({
         h('div', {
           ref: 'refViewElem',
           class: viewClss,
-          attrs: viewAttrs,
+          attrs: {
+            id: viewId || null,
+            ...viewAttrs
+          },
           on: {
             scroll: $xeScrollbar.scrollEvent
           }
@@ -570,7 +618,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
             class: viewInnerClss
           }, defaultSlot ? defaultSlot({}) : [])
         ]),
-        native || xOpts.visible === 'hidden'
+        native || xVisible === false
           ? renderEmptyElement($xeScrollbar)
           : h('div', {
             ref: 'refTrackXElem',
@@ -591,7 +639,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
               }
             })
           ]),
-        native || yOpts.visible === 'hidden'
+        native || yVisible === false
           ? renderEmptyElement($xeScrollbar)
           : h('div', {
             ref: 'refTrackYElem',
@@ -662,6 +710,20 @@ export default /* define-vxe-component start */ defineVxeComponent({
 
       $xeScrollbar.reFlag++
     },
+    computeXVisible () {
+      const $xeScrollbar = this
+
+      $xeScrollbar.$nextTick(() => {
+        $xeScrollbar.reFlag++
+      })
+    },
+    computeYVisible () {
+      const $xeScrollbar = this
+
+      $xeScrollbar.$nextTick(() => {
+        $xeScrollbar.reFlag++
+      })
+    },
     reFlag () {
       const $xeScrollbar = this
 

package/packages/tabs/src/tabs.ts

@@ -193,6 +193,24 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const props = $xeTabs
 
       return Object.assign({}, getConfig().tabs.scrollbarConfig, props.scrollbarConfig)
+    },
+    computeScrollbarProps () {
+      const $xeTabs = this
+
+      const scrollbarOpts = $xeTabs.computeScrollbarOpts as VxeTabsPropTypes.ScrollbarConfig
+      const { viewClassName, viewInnerClassName } = scrollbarOpts
+      return {
+        width: scrollbarOpts.width,
+        height: scrollbarOpts.height,
+        autoHide: scrollbarOpts.autoHide,
+        visible: scrollbarOpts.visible,
+        xConfig: scrollbarOpts.xConfig,
+        yConfig: scrollbarOpts.yConfig,
+        className: scrollbarOpts.className,
+        viewAttrs: scrollbarOpts.viewAttrs,
+        viewClassName: 'vxe-tabs-pane--scrollbar-item-view' + (viewClassName ? (' ' + viewClassName) : ''),
+        viewInnerClassName: 'vxe-tabs-pane--scrollbar-item-inner' + (viewClassName ? (' ' + viewInnerClassName) : '')
+      }
     }
   },
   methods: {
@@ -840,8 +858,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const { initNames, activeName } = reactData
       const { name, slots } = item
       const defaultSlot = slots ? slots.default : null
-      const scrollbarOpts = $xeTabs.computeScrollbarOpts
-      const { viewClassName, viewInnerClassName } = scrollbarOpts
+      const scrollbarProps = $xeTabs.computeScrollbarProps
       if (name && initNames.includes(name)) {
         return useScrollbar
           ? h(VxeScrollbarComponent, {
@@ -849,11 +866,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
             class: ['vxe-tabs-pane--scrollbar-item', {
               'is--visible': activeName === name
             }],
-            props: {
-              ...scrollbarOpts,
-              viewClassName: 'vxe-tabs-pane--scrollbar-item-view' + (viewClassName ? (' ' + viewClassName) : ''),
-              viewInnerClassName: 'vxe-tabs-pane--scrollbar-item-inner' + (viewClassName ? (' ' + viewInnerClassName) : '')
-            },
+            props: scrollbarProps,
             scopedSlots: {
               default: () => defaultSlot ? $xeTabs.callSlot(defaultSlot, { name }, h) : []
             }