vxe-table 4.23.0-beta.3 → 4.23.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "4.23.0-beta.3",
+  "version": "4.23.0-beta.4",
   "description": "A PC-end table component based on Vxe UI, supporting copy-paste, data pivot table, and high-performance virtual list table solution.",
   "scripts": {
     "update": "npm install --legacy-peer-deps",
@@ -66,7 +66,7 @@
     "typescript": "~5.9.3",
     "vue": "3.4.27",
     "vue-router": "~4.5.1",
-    "vxe-pc-ui": "4.20.8"
+    "vxe-pc-ui": "4.20.9"
   },
   "vetur": {
     "tags": "helper/vetur/tags.json",

package/packages/grid/src/grid.ts

@@ -64,6 +64,7 @@ export default defineVxeComponent({
     const defaultLayouts: VxeGridPropTypes.Layouts = [['Form'], ['Toolbar', 'Top', 'Table', 'Bottom', 'Pager']]
 
     const { computeSize } = useFns.useSize(props)
+    const { computeIsVScrollbar } = useFns.useVScrollbar(props)
 
     const reactData = reactive(createReactData())
 
@@ -268,6 +269,8 @@ export default defineVxeComponent({
     }
 
     const computeMaps: VxeGridPrivateComputed = {
+      computeSize,
+      computeIsVScrollbar,
       computeProxyOpts,
       computePagerOpts,
       computeFormOpts,

package/packages/table/module/filter/hook.ts

@@ -24,7 +24,7 @@ hooks.add('tableFilterModule', {
     const { computeFilterOpts, computeMouseOpts, computeRendererOpts } = $xeTable.getComputeMaps()
 
     const updatePopupStyle = () => {
-      const { filterStore } = reactData
+      const { filterStore, scrollbarHeight } = reactData
       const { elemStore } = internalData
       const { column, targetEl } = filterStore
       if (!column) {
@@ -46,8 +46,6 @@ hooks.add('tableFilterModule', {
       if (!filterWrapperElem) {
         return nextTick()
       }
-      const filterHeadElem = filterWrapperElem.querySelector<HTMLDivElement>('.vxe-table--filter-header')
-      const filterFootElem = filterWrapperElem.querySelector<HTMLDivElement>('.vxe-table--filter-footer')
 
       /**
        * 是否显示筛选按钮图标
@@ -85,7 +83,7 @@ hooks.add('tableFilterModule', {
           const centerWidth = targetEl ? filterWidth / 2 : ((filterWidth - column.renderWidth) / 2)
           left = btnRect.left - tableRect.left - centerWidth
           top = btnRect.top - tableRect.top + currEl.clientHeight
-          maxHeight = Math.max(40, tableEl.clientHeight - top - (filterHeadElem ? filterHeadElem.clientHeight : 0) - (filterFootElem ? filterFootElem.clientHeight : 0) - 14)
+          maxHeight = Math.max(40, tableEl.clientHeight - top - scrollbarHeight)
           if (left < 1) {
             left = 1
           } else if (left > (tableEl.clientWidth - filterWidth - 1)) {
@@ -106,7 +104,6 @@ hooks.add('tableFilterModule', {
         if (zIndex) {
           panelStyle.zIndex = zIndex
         }
-        filterStore.style = panelStyle
         // 筛选面板是自适应表格高度
         if (compConf ? !compConf.tableFilterAutoHeight : false) {
           maxHeight = 0
@@ -115,8 +112,8 @@ hooks.add('tableFilterModule', {
             maxHeight = customMaxHeight > maxHeight ? maxHeight : customMaxHeight
           }
         }
-        // 判断面板不能大于表格高度
-        filterStore.maxHeight = maxHeight
+        panelStyle['--vxe-ui-vxe-table-filter-default-max-height'] = maxHeight ? toCssUnit(maxHeight) : 'none'
+        filterStore.style = panelStyle
       }
       handleStyle()
       return nextTick().then(() => {

package/packages/table/module/filter/panel.ts

@@ -2,7 +2,7 @@ import { h, ref, computed, inject, Teleport, PropType } from 'vue'
 import { defineVxeComponent } from '../../../ui/src/comp'
 import { VxeUI } from '../../../ui'
 import { formatText, isEnableConf } from '../../../ui/src/utils'
-import { getPropClass, toCssUnit } from '../../../ui/src/dom'
+import { getPropClass } from '../../../ui/src/dom'
 import { getSlotVNs } from '../../../ui/src/vn'
 import { createComponentLog } from '../../../ui/src/log'
 import XEUtils from 'xe-utils'
@@ -25,6 +25,8 @@ export default defineVxeComponent({
   setup (props, context) {
     const xID = XEUtils.uniqueId()
 
+    const VxeUIScrollbarComponent = VxeUI.getComponent('VxeScrollbar')
+
     const $xeTable = inject('$xeTable', {} as VxeTableConstructor & VxeTableMethods & VxeTablePrivateMethods)
     const { reactData: tableReactData, internalData: tableInternalData, getComputeMaps } = $xeTable
     const { computeFilterOpts, computeRendererOpts } = getComputeMaps()
@@ -124,10 +126,12 @@ export default defineVxeComponent({
 
     const renderOptions = (filterRender: VxeColumnPropTypes.FilterRender | null, compConf: VxeGlobalRendererOptions | null) => {
       const { filterStore } = props
-      const { column, maxHeight } = filterStore
+      const { column } = filterStore
       if (!column) {
         return []
       }
+      const filterOpts = computeFilterOpts.value
+      const { useScrollbar } = filterOpts
       const { filterMultiple, filters, slots } = column
       const filterOptions = (filters || []) as VxeTableDefines.FilterOption[]
       const filterSlot = slots ? slots.filter : null
@@ -136,33 +140,48 @@ export default defineVxeComponent({
       if (filterSlot) {
         return [
           h('div', {
-            class: 'vxe-table--filter-template',
-            style: maxHeight
-              ? {
-                  maxHeight: toCssUnit(maxHeight)
-                }
-              : {}
+            class: 'vxe-table--filter-template'
           }, $xeTable.callSlot(filterSlot, params))
         ]
       } else if (filterRender && rtFilter) {
         return [
           h('div', {
-            class: 'vxe-table--filter-template',
-            style: maxHeight
-              ? {
-                  maxHeight: toCssUnit(maxHeight)
-                }
-              : {}
+            class: 'vxe-table--filter-template'
           }, getSlotVNs(rtFilter(filterRender, params)))
         ]
       }
       const isAllChecked = filterMultiple ? filterStore.isAllSelected : !filterOptions.some((item) => item._checked)
       const isAllIndeterminate = filterMultiple && filterStore.isIndeterminate
+
+      const optVNs = filterOptions.map((item: any) => {
+        const isChecked = item._checked
+        const isIndeterminate = false
+        return h('div', {
+          class: ['vxe-table--filter-option', {
+            'is--checked': item._checked
+          }],
+          title: item.label,
+          onClick: (evnt: MouseEvent) => {
+            changeOption(evnt, !item._checked, item)
+          }
+        }, (filterMultiple
+          ? [
+              h('span', {
+                class: ['vxe-checkbox--icon', isIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
+              })
+            ]
+          : []).concat([
+          h('span', {
+            class: 'vxe-checkbox--label'
+          }, formatText(item.label, 1))
+        ]))
+      })
+
       return [
-        h('ul', {
+        h('div', {
           class: 'vxe-table--filter-header'
         }, [
-          h('li', {
+          h('div', {
             class: ['vxe-table--filter-option', {
               'is--checked': isAllChecked,
               'is--indeterminate': isAllIndeterminate
@@ -183,36 +202,16 @@ export default defineVxeComponent({
             }, getI18n('vxe.table.allFilter'))
           ]))
         ]),
-        h('ul', {
-          class: 'vxe-table--filter-body',
-          style: maxHeight
-            ? {
-                maxHeight: toCssUnit(maxHeight)
-              }
-            : {}
-        }, filterOptions.map((item: any) => {
-          const isChecked = item._checked
-          const isIndeterminate = false
-          return h('li', {
-            class: ['vxe-table--filter-option', {
-              'is--checked': item._checked
-            }],
-            title: item.label,
-            onClick: (evnt: MouseEvent) => {
-              changeOption(evnt, !item._checked, item)
-            }
-          }, (filterMultiple
-            ? [
-                h('span', {
-                  class: ['vxe-checkbox--icon', isIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
-                })
-              ]
-            : []).concat([
-            h('span', {
-              class: 'vxe-checkbox--label'
-            }, formatText(item.label, 1))
-          ]))
-        }))
+        useScrollbar
+          ? h(VxeUIScrollbarComponent, {
+            class: 'vxe-table--scrollbar-filter-body',
+            viewClassName: 'vxe-table--scrollbar-filter-body-view'
+          }, {
+            default: () => optVNs
+          })
+          : h('div', {
+            class: 'vxe-table--filter-body'
+          }, optVNs)
       ]
     }
 

package/packages/table/src/table.ts

@@ -77,6 +77,7 @@ export default defineVxeComponent({
     const $xeGGWrapper = $xeGrid || $xeGantt
 
     const { computeSize } = useFns.useSize(props)
+    const { computeIsVScrollbar } = useFns.useVScrollbar(props)
 
     const crossTableDragRowInfo = getCrossTableDragRowInfo()
 
@@ -426,8 +427,8 @@ export default defineVxeComponent({
     })
 
     const computeTooltipOpts = computed(() => {
-      const { useScrollbar } = props
-      return Object.assign({ useScrollbar }, getConfig().tooltip, getConfig().table.tooltipConfig, props.tooltipConfig)
+      const isVScrollbar = computeIsVScrollbar.value
+      return Object.assign({ useScrollbar: isVScrollbar }, getConfig().tooltip, getConfig().table.tooltipConfig, props.tooltipConfig)
     })
 
     const computeHeaderTooltipOpts = computed(() => {
@@ -470,7 +471,8 @@ export default defineVxeComponent({
     })
 
     const computeFilterOpts = computed(() => {
-      return Object.assign({}, getConfig().table.filterConfig, props.filterConfig) as VxeTablePropTypes.FilterOpts
+      const isVScrollbar = computeIsVScrollbar.value
+      return Object.assign({ useScrollbar: isVScrollbar }, getConfig().table.filterConfig, props.filterConfig) as VxeTablePropTypes.FilterOpts
     })
 
     const computeFloatingFilterOpts = computed(() => {
@@ -915,6 +917,7 @@ export default defineVxeComponent({
 
     const computeMaps: VxeTablePrivateComputed = {
       computeSize,
+      computeIsVScrollbar,
       computeTableId,
       computeValidOpts,
       computeRowField,
@@ -3618,6 +3621,7 @@ export default defineVxeComponent({
         if (reFull) {
           updateTreeLineStyle()
         }
+        updateScrollbar()
         internalData.rceRunTime = Date.now()
         if (reFull) {
           return computeScrollLoad()
@@ -3626,8 +3630,14 @@ export default defineVxeComponent({
     }
 
     const updateScrollbar = () => {
-      updateThumbSize()
-      updateThumbOffset()
+      const isVScrollbar = computeIsVScrollbar.value
+      if (isVScrollbar) {
+        return nextTick().then(() => {
+          updateThumbSize()
+          updateThumbOffset()
+        })
+      }
+      return Promise.resolve()
     }
 
     const defaultMinRunDelay = 50
@@ -12957,8 +12967,8 @@ export default defineVxeComponent({
         }
       },
       triggerBodyScrollEvent (evnt, fixedType) {
-        const { useScrollbar } = props
         const { scrollYLoad, scrollXLoad } = reactData
+        const isVScrollbar = computeIsVScrollbar.value
         const { elemStore, intoRunScroll, lastScrollTop, lastScrollLeft, inWheelScroll, inVirtualScroll, inHeaderScroll, inBodyScroll, scrollRenderType, inFooterScroll } = internalData
         if (inWheelScroll || inVirtualScroll || inHeaderScroll || inFooterScroll) {
           return
@@ -12977,7 +12987,7 @@ export default defineVxeComponent({
         if (!bodyScrollElem) {
           return
         }
-        if (!useScrollbar) {
+        if (!isVScrollbar) {
           if (!xHandleEl) {
             return
           }
@@ -13739,6 +13749,25 @@ export default defineVxeComponent({
       }
     }
 
+    const bindScrollbarResize = () => {
+      const { elemStore } = internalData
+      const isVScrollbar = computeIsVScrollbar.value
+      if (isVScrollbar) {
+        const el = refElem.value
+        const viewInnerEl = getRefElem(elemStore['main-body-table'])
+        const scrollObserver = globalResize.create(() => {
+          reScrollFlag.value++
+        })
+        if (el) {
+          scrollObserver.observe(el)
+        }
+        if (viewInnerEl) {
+          scrollObserver.observe(viewInnerEl)
+        }
+        internalData.scrollObserver = scrollObserver
+      }
+    }
+
     const updateThumbSize = () => {
       const { elemStore } = internalData
 
@@ -14354,8 +14383,8 @@ export default defineVxeComponent({
     const renderVirtualBody = () => {
       const $xeGanttView = internalData.xeGanttView
 
-      const { useScrollbar } = props
       const { xThumbWidth, yThumbHeight } = reactData
+      const isVScrollbar = computeIsVScrollbar.value
       const scrollbarOpts = computeScrollbarOpts.value
       const scrollXAutoHide = computeScrollXAutoHide.value
       const scrollYAutoHide = computeScrollYAutoHide.value
@@ -14370,10 +14399,10 @@ export default defineVxeComponent({
       return h('div', {
         key: 'lvb',
         class: ['vxe-table--layout-wrapper', `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`, `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`, {
-          'is--virtual-scrollbar': useScrollbar,
-          'ov-padding': useScrollbar && scrollbarOpts.padding,
-          'ov-x--auto-hide': useScrollbar && scrollXAutoHide,
-          'ov-y--auto-hide': useScrollbar && scrollYAutoHide,
+          '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
         }]
@@ -14421,10 +14450,11 @@ export default defineVxeComponent({
     }
 
     const renderVN = () => {
-      const { loading, stripe, useScrollbar, showHeader, height, treeConfig, mouseConfig, showFooter, highlightCell, highlightHoverRow, highlightHoverColumn, editConfig, editRules, importConfig, exportConfig, printConfig } = props
+      const { loading, stripe, showHeader, height, treeConfig, mouseConfig, showFooter, highlightCell, highlightHoverRow, highlightHoverColumn, editConfig, editRules, importConfig, exportConfig, printConfig } = props
       const { isGroup, overflowX, overflowY, scrollXLoad, scrollYLoad, tableData, initStore, isRowGroupStatus, columnStore, filterStore, customStore, tooltipStore } = reactData
       const { teleportToWrapperElem, popupToWrapperElem, customPopupToElem } = internalData
       const { leftList, rightList } = columnStore
+      const isVScrollbar = computeIsVScrollbar.value
       const loadingSlot = slots.loading
       const tipSlots = {
         header: slots.headerTooltip || slots['header-tooltip'],
@@ -14470,7 +14500,7 @@ export default defineVxeComponent({
       }
       return h('div', {
         ref: refElem,
-        class: ['vxe-table', 'vxe-table--render-default', `tid_${xID}`, `border--${tableBorder}`, useScrollbar ? 'is--virtual-scrollbar' : 'is--native-scrollbar', `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`, `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`, {
+        class: ['vxe-table', 'vxe-table--render-default', `tid_${xID}`, `border--${tableBorder}`, isVScrollbar ? 'is--virtual-scrollbar' : 'is--native-scrollbar', `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`, `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`, {
           [`size--${vSize}`]: vSize,
           [`valid-msg--${validOpts.msgMode}`]: !!editRules,
           'vxe-editable': !!editConfig,
@@ -14535,7 +14565,7 @@ export default defineVxeComponent({
         h('div', {
           key: 'tw',
           class: 'vxe-table--render-wrapper'
-        }, useScrollbar
+        }, isVScrollbar
           ? [renderVirtualBody()]
           : (scrollbarXToTop
               ? [
@@ -14722,7 +14752,7 @@ export default defineVxeComponent({
               ref: refCommTooltip,
               isArrow: false,
               enterable: false,
-              useScrollbar
+              useScrollbar: isVScrollbar
             }),
             /**
               * 工具提示
@@ -14786,7 +14816,7 @@ export default defineVxeComponent({
                 enterable: validTipConfig.enterable,
                 enterDelay: validTipConfig.enterDelay,
                 leaveDelay: validTipConfig.leaveDelay,
-                useScrollbar
+                useScrollbar: validTipConfig.useScrollbar
               })
               : renderEmptyElement($xeTable)
           ])
@@ -14897,43 +14927,44 @@ export default defineVxeComponent({
     watch(() => VxeUI.getLanguage(), () => {
       reLayoutFlag.value++
     })
+    watch(computeIsVScrollbar, () => {
+      nextTick(() => {
+        bindScrollbarResize()
+        nextTick(() => {
+          reLayoutFlag.value++
+        })
+      })
+    })
     watch(computeScrollbarXToTop, () => {
-      reScrollFlag.value++
       reLayoutFlag.value++
     })
     watch(computeScrollbarYToLeft, () => {
-      reScrollFlag.value++
       reLayoutFlag.value++
     })
     watch(computeScrollXVisible, () => {
-      reScrollFlag.value++
       reLayoutFlag.value++
     })
     watch(computeScrollYVisible, () => {
-      reScrollFlag.value++
       reLayoutFlag.value++
     })
     watch(computeScrollXHeight, () => {
-      reScrollFlag.value++
       reLayoutFlag.value++
     })
     watch(computeScrollYWidth, () => {
-      reScrollFlag.value++
       reLayoutFlag.value++
     })
     watch(computeCellHeitht, () => {
       reLayoutFlag.value++
     })
     watch(reLayoutFlag, () => {
-      $xeTable.recalculate(true)
+      nextTick().then(() => {
+        $xeTable.recalculate(true)
+      })
     })
 
     watch(reScrollFlag, () => {
-      nextTick(() => {
-        $xeTable.updateScrollbar()
-        nextTick(() => {
-          $xeTable.updateScrollbar()
-        })
+      updateScrollbar().then(() => {
+        updateScrollbar()
       })
     })
 
@@ -15082,7 +15113,7 @@ export default defineVxeComponent({
 
     onMounted(() => {
       const { editConfig, exportConfig, importConfig, treeConfig, minHeight, keepSource, areaConfig } = props
-      const { elemStore, scrollXStore, scrollYStore } = internalData
+      const { scrollXStore, scrollYStore } = internalData
       const columnOpts = computeColumnOpts.value
       const columnDragOpts = computeColumnDragOpts.value
       const aggregateOpts = computeAggregateOpts.value
@@ -15369,22 +15400,9 @@ export default defineVxeComponent({
       initData()
 
       nextTick(() => {
-        const { useScrollbar, autoResize } = props
-        const el = refElem.value
-        if (useScrollbar) {
-          const viewInnerEl = getRefElem(elemStore['main-body-table'])
-          const scrollObserver = globalResize.create(() => {
-            reScrollFlag.value++
-          })
-          if (el) {
-            scrollObserver.observe(el)
-          }
-          if (viewInnerEl) {
-            scrollObserver.observe(viewInnerEl)
-          }
-          internalData.scrollObserver = scrollObserver
-        }
+        const { autoResize } = props
         if (autoResize) {
+          const el = refElem.value
           const parentEl = $xeTable.getParentElem()
           const resizeObserver = globalResize.create(() => {
             if (props.autoResize) {
@@ -15399,6 +15417,7 @@ export default defineVxeComponent({
           }
           internalData.resizeObserver = resizeObserver
         }
+        bindScrollbarResize()
       })
 
       if (virtualYOpts.mode !== 'scroll') {

package/packages/table/src/util.ts

@@ -270,8 +270,7 @@ export function createReactData (): TableReactData {
       isIndeterminate: false,
       style: null,
       column: null,
-      visible: false,
-      maxHeight: null
+      visible: false
     },
     // 存放列相关的信息
     columnStore: {

package/packages/ui/index.ts

@@ -169,7 +169,7 @@ VxeUI.setConfig({
       destroyOnClose: true,
       multiple: true,
       showIcon: true,
-      maxHeight: 280
+      maxHeight: 320
     },
     floatingFilterConfig: {
       // enabled: false

package/styles/components/table-module/filter.scss

@@ -31,6 +31,7 @@
 .vxe-table--filter-wrapper {
   display: none;
   position: absolute;
+  flex-direction: column;
   top: 0;
   min-width: 100px;
   font-size: var(--vxe-ui-font-size-default);
@@ -40,6 +41,7 @@
   color: var(--vxe-ui-font-color);
   box-shadow: var(--vxe-ui-base-popup-box-shadow);
   z-index: 15;
+  max-height: var(--vxe-ui-vxe-table-filter-default-max-height);
   &:not(.is--multiple) {
     .vxe-table--filter-header,
     .vxe-table--filter-body {
@@ -47,11 +49,24 @@
     }
   }
   &.is--active {
-    display: block;
+    display: flex;
+  }
+  .vxe-table--filter-body,
+  .vxe-table--scrollbar-filter-body {
+    overflow: auto;
+    flex-grow: 1;
+  }
+  .vxe-table--scrollbar-filter-body {
+    display: flex;
+    flex-direction: column;
+    .vxe-table--scrollbar-filter-body-view {
+      flex-grow: 1;
+    }
   }
   .vxe-table--filter-header,
-  .vxe-table--filter-body {
-    & > li {
+  .vxe-table--filter-body,
+  .vxe-table--scrollbar-filter-body {
+    .vxe-table--filter-option {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -69,11 +84,12 @@
   .vxe-table--filter-header {
     padding-top: 0.2em;
   }
-  .vxe-table--filter-body {
-    max-height: var(--vxe-ui-vxe-table-filter-default-max-height);
+  .vxe-table--filter-body,
+  .vxe-table--scrollbar-filter-body {
     padding-bottom: 0.2em;
   }
-  & > ul {
+  .vxe-table--filter-header,
+  .vxe-table--filter-body {
     list-style-type: none;
     padding: 0;
     margin: 0;
@@ -81,12 +97,9 @@
     overflow: auto;
     user-select: none;
   }
-  &.is--multiple {
-    & > ul {
-      & > li {
-        padding: 0.25em 0.8em 0.25em 1em;
-      }
-    }
+  .vxe-table--filter-header,
+  .vxe-table--filter-footer {
+    flex-shrink: 0;
   }
   .vxe-table--filter-footer {
     border-top: 1px solid var(--vxe-ui-base-popup-border-color);
@@ -116,8 +129,6 @@
   @include baseMixin.createCheckboxIcon();
 }
 
-
-
 .vxe-table--filter-wrapper {
   &.size--medium {
     font-size: var(--vxe-ui-font-size-medium);