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

package/es/table/module/custom/panel.js

@@ -350,8 +350,8 @@ export default defineVxeComponent({
             const { prevDragCol, prevDragGroupField, prevDragAggFnColid, prevDragPos, prevDragToChild } = customPanelInternalData;
             const dragOffsetIndex = prevDragPos === 'bottom' ? 1 : 0;
             if (prevDragGroupField || prevDragAggFnColid) {
-                if ($xeTable.handlePivotTableAggregatePanelDragendEvent) {
-                    $xeTable.handlePivotTableAggregatePanelDragendEvent(evnt);
+                if ($xeTable.handlePivotTableAggPanelDragendEvent) {
+                    $xeTable.handlePivotTableAggPanelDragendEvent(evnt);
                 }
             }
             else if (prevDragCol && dragCol) {

package/es/table/module/filter/hook.js

@@ -16,7 +16,7 @@ hooks.add('tableFilterModule', {
         const { refElem, refTableFilter } = $xeTable.getRefMaps();
         const { computeFilterOpts, computeMouseOpts, computeRendererOpts } = $xeTable.getComputeMaps();
         const updatePopupStyle = () => {
-            const { filterStore } = reactData;
+            const { filterStore, scrollbarHeight } = reactData;
             const { elemStore } = internalData;
             const { column, targetEl } = filterStore;
             if (!column) {
@@ -37,8 +37,6 @@ hooks.add('tableFilterModule', {
             if (!filterWrapperElem) {
                 return nextTick();
             }
-            const filterHeadElem = filterWrapperElem.querySelector('.vxe-table--filter-header');
-            const filterFootElem = filterWrapperElem.querySelector('.vxe-table--filter-footer');
             /**
              * 是否显示筛选按钮图标
              * 如果不存在图标，则相对单元格居中显示
@@ -64,6 +62,7 @@ hooks.add('tableFilterModule', {
                 if (transfer) {
                     const ppObj = updatePanelPlacement(currEl, filterWrapperElem, {
                         defaultPlacement: 'bottom',
+                        appendTo: '',
                         isMinWidth: false,
                         teleportTo: transfer
                     });
@@ -74,7 +73,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;
                     }
@@ -96,7 +95,6 @@ hooks.add('tableFilterModule', {
                 if (zIndex) {
                     panelStyle.zIndex = zIndex;
                 }
-                filterStore.style = panelStyle;
                 // 筛选面板是自适应表格高度
                 if (compConf ? !compConf.tableFilterAutoHeight : false) {
                     maxHeight = 0;
@@ -106,8 +104,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/es/table/module/filter/panel.js

@@ -2,7 +2,7 @@ import { h, ref, computed, inject, Teleport } 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';
@@ -18,6 +18,7 @@ export default defineVxeComponent({
     },
     setup(props, context) {
         const xID = XEUtils.uniqueId();
+        const VxeUIScrollbarComponent = VxeUI.getComponent('VxeScrollbar');
         const $xeTable = inject('$xeTable', {});
         const { reactData: tableReactData, internalData: tableInternalData, getComputeMaps } = $xeTable;
         const { computeFilterOpts, computeRendererOpts } = getComputeMaps();
@@ -105,10 +106,12 @@ export default defineVxeComponent({
         Object.assign($xeFilterPanel, filterPanelMethods);
         const renderOptions = (filterRender, compConf) => {
             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 || []);
             const filterSlot = slots ? slots.filter : null;
@@ -117,34 +120,47 @@ 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) => {
+                const isChecked = item._checked;
+                const isIndeterminate = false;
+                return h('div', {
+                    class: ['vxe-table--filter-option', {
+                            'is--checked': item._checked
+                        }],
+                    title: item.label,
+                    onClick: (evnt) => {
+                        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
@@ -165,36 +181,16 @@ export default defineVxeComponent({
                         }, getI18n('vxe.table.allFilter'))
                     ]))
                 ]),
-                h('ul', {
-                    class: 'vxe-table--filter-body',
-                    style: maxHeight
-                        ? {
-                            maxHeight: toCssUnit(maxHeight)
-                        }
-                        : {}
-                }, filterOptions.map((item) => {
-                    const isChecked = item._checked;
-                    const isIndeterminate = false;
-                    return h('li', {
-                        class: ['vxe-table--filter-option', {
-                                'is--checked': item._checked
-                            }],
-                        title: item.label,
-                        onClick: (evnt) => {
-                            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)
             ];
         };
         const renderFooters = () => {

package/es/table/src/table.js

@@ -7,7 +7,6 @@ import { VxeUI } from '../../ui';
 import { createReactData, createInternalData, getRowUniqueId, createRowId, clearTableAllStatus, getColumnList, toFilters, hasDeepKey, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleRowidOrRow, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, getRootColumn, getRefElem, getColReMinWidth, getColReMaxWidth, createHandleUpdateRowId, createHandleGetRowId, getCalcHeight, getCellRestHeight, getLastChildColumn, getRowMaxHeight, handleCustomStoreConfig, encodeRowid } from './util';
 import { getSlotVNs } from '../../ui/src/vn';
 import { moveRowAnimateToTb, clearRowAnimate, moveColAnimateToLr, clearColAnimate } from '../../ui/src/anime';
-import { getThumbOffsetSize, getThumbSize, getScrollFromClick, getScrollFromDrag } from './scrollbar';
 import { createComponentLog } from '../../ui/src/log';
 import { getCrossTableDragRowInfo } from './store';
 import Cell from './cell';
@@ -30,7 +29,8 @@ import '../module/validator/hook';
 import '../module/custom/hook';
 import '../render';
 const { warnLog, errLog } = createComponentLog('table');
-const { getConfig, getIcon, getI18n, renderer, formats, createEvent, globalResize, interceptor, hooks, domUtils, globalEvents, GLOBAL_EVENT_KEYS, useFns, renderEmptyElement } = VxeUI;
+const { getConfig, getIcon, getI18n, renderer, formats, scrollbarUtils, createEvent, globalResize, interceptor, hooks, domUtils, globalEvents, GLOBAL_EVENT_KEYS, useFns, renderEmptyElement } = VxeUI;
+const { getThumbOffsetSize, getThumbSize, getScrollFromClick, getScrollFromDrag } = scrollbarUtils || {};
 const supportMaxRow = 5e6;
 const customStorageKey = 'VXE_CUSTOM_STORE';
 const maxYHeight = 5e6;
@@ -57,6 +57,7 @@ export default defineVxeComponent({
         const $xeGantt = inject('$xeGantt', null);
         const $xeGGWrapper = $xeGrid || $xeGantt;
         const { computeSize } = useFns.useSize(props);
+        const { computeIsVScrollbar } = useFns.useVScrollbar(props);
         const crossTableDragRowInfo = getCrossTableDragRowInfo();
         const reactData = reactive(createReactData());
         const internalData = createInternalData();
@@ -350,7 +351,8 @@ export default defineVxeComponent({
             return Object.assign({}, getConfig().table.checkboxConfig, props.checkboxConfig);
         });
         const computeTooltipOpts = computed(() => {
-            return Object.assign({}, 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(() => {
             const tooltipOpts = computeTooltipOpts.value;
@@ -385,7 +387,8 @@ export default defineVxeComponent({
             return Object.assign({ orders: ['asc', 'desc', null] }, getConfig().table.sortConfig, props.sortConfig);
         });
         const computeFilterOpts = computed(() => {
-            return Object.assign({}, getConfig().table.filterConfig, props.filterConfig);
+            const isVScrollbar = computeIsVScrollbar.value;
+            return Object.assign({ useScrollbar: isVScrollbar }, getConfig().table.filterConfig, props.filterConfig);
         });
         const computeFloatingFilterOpts = computed(() => {
             return Object.assign({}, getConfig().table.floatingFilterConfig, props.floatingFilterConfig);
@@ -786,6 +789,7 @@ export default defineVxeComponent({
         };
         const computeMaps = {
             computeSize,
+            computeIsVScrollbar,
             computeTableId,
             computeValidOpts,
             computeRowField,
@@ -3441,6 +3445,7 @@ export default defineVxeComponent({
                 if (reFull) {
                     updateTreeLineStyle();
                 }
+                updateScrollbar();
                 internalData.rceRunTime = Date.now();
                 if (reFull) {
                     return computeScrollLoad();
@@ -3448,8 +3453,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;
         const handleLazyRecalculate = (reFull, reWidth, reHeight, options) => {
@@ -12768,8 +12779,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;
@@ -12788,7 +12799,7 @@ export default defineVxeComponent({
                 if (!bodyScrollElem) {
                     return;
                 }
-                if (!useScrollbar) {
+                if (!isVScrollbar) {
                     if (!xHandleEl) {
                         return;
                     }
@@ -13539,6 +13550,24 @@ export default defineVxeComponent({
                 return nextTick();
             }
         };
+        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;
             const viewEl = getRefElem(elemStore['main-body-scroll']);
@@ -14118,8 +14147,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;
@@ -14133,10 +14162,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
                     }]
@@ -14183,10 +14212,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'],
@@ -14226,7 +14256,7 @@ export default defineVxeComponent({
             if (isCrossTableDrag && !tableData.length) {
                 tbOns.onDragover = $xeTable.handleCrossTableRowDragoverEmptyEvent;
             }
-            return h('div', Object.assign({ 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'}`, {
+            return h('div', Object.assign({ ref: refElem, 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,
@@ -14287,7 +14317,7 @@ export default defineVxeComponent({
                 h('div', {
                     key: 'tw',
                     class: 'vxe-table--render-wrapper'
-                }, useScrollbar
+                }, isVScrollbar
                     ? [renderVirtualBody()]
                     : (scrollbarXToTop
                         ? [
@@ -14473,7 +14503,8 @@ export default defineVxeComponent({
                             key: 'ctp',
                             ref: refCommTooltip,
                             isArrow: false,
-                            enterable: false
+                            enterable: false,
+                            useScrollbar: isVScrollbar
                         }),
                         /**
                           * 工具提示
@@ -14496,7 +14527,8 @@ export default defineVxeComponent({
                             maxHeight: tableTipConfig.maxHeight,
                             placement: tableTipConfig.placement,
                             defaultPlacement: tableTipConfig.defaultPlacement,
-                            popupClassName: tableTipConfig.popupClassName
+                            popupClassName: tableTipConfig.popupClassName,
+                            useScrollbar: tableTipConfig.useScrollbar
                         }, currTooltipSlot
                             ? {
                                 content: () => {
@@ -14535,7 +14567,8 @@ export default defineVxeComponent({
                                 theme: validTipConfig.theme,
                                 enterable: validTipConfig.enterable,
                                 enterDelay: validTipConfig.enterDelay,
-                                leaveDelay: validTipConfig.leaveDelay
+                                leaveDelay: validTipConfig.leaveDelay,
+                                useScrollbar: validTipConfig.useScrollbar
                             })
                             : renderEmptyElement($xeTable)
                     ])
@@ -14640,42 +14673,43 @@ 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();
             });
         });
         const footFlag = ref(0);
@@ -14808,7 +14842,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;
@@ -15081,22 +15115,9 @@ export default defineVxeComponent({
             handleUpdateRowGroup(groupFields);
             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) {
@@ -15111,6 +15132,7 @@ export default defineVxeComponent({
                     }
                     internalData.resizeObserver = resizeObserver;
                 }
+                bindScrollbarResize();
             });
             if (virtualYOpts.mode !== 'scroll') {
                 const tableViewportEl = refTableViewportElem.value;

package/es/table/src/util.js

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

package/es/table/style.css

@@ -1606,6 +1606,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);
@@ -1615,16 +1616,30 @@
   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);
 }
 .vxe-table--filter-wrapper:not(.is--multiple) .vxe-table--filter-header,
 .vxe-table--filter-wrapper:not(.is--multiple) .vxe-table--filter-body {
   text-align: center;
 }
 .vxe-table--filter-wrapper.is--active {
-  display: block;
+  display: flex;
 }
-.vxe-table--filter-wrapper .vxe-table--filter-header > li,
-.vxe-table--filter-wrapper .vxe-table--filter-body > li {
+.vxe-table--filter-wrapper .vxe-table--filter-body,
+.vxe-table--filter-wrapper .vxe-table--scrollbar-filter-body {
+  overflow: auto;
+  flex-grow: 1;
+}
+.vxe-table--filter-wrapper .vxe-table--scrollbar-filter-body {
+  display: flex;
+  flex-direction: column;
+}
+.vxe-table--filter-wrapper .vxe-table--scrollbar-filter-body .vxe-table--scrollbar-filter-body-view {
+  flex-grow: 1;
+}
+.vxe-table--filter-wrapper .vxe-table--filter-header .vxe-table--filter-option,
+.vxe-table--filter-wrapper .vxe-table--filter-body .vxe-table--filter-option,
+.vxe-table--filter-wrapper .vxe-table--scrollbar-filter-body .vxe-table--filter-option {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -1632,22 +1647,25 @@
   padding: 0.25em 0.8em;
   cursor: pointer;
 }
-.vxe-table--filter-wrapper .vxe-table--filter-header > li.is--checked,
-.vxe-table--filter-wrapper .vxe-table--filter-body > li.is--checked {
+.vxe-table--filter-wrapper .vxe-table--filter-header .vxe-table--filter-option.is--checked,
+.vxe-table--filter-wrapper .vxe-table--filter-body .vxe-table--filter-option.is--checked,
+.vxe-table--filter-wrapper .vxe-table--scrollbar-filter-body .vxe-table--filter-option.is--checked {
   color: var(--vxe-ui-font-primary-color);
 }
-.vxe-table--filter-wrapper .vxe-table--filter-header > li:hover,
-.vxe-table--filter-wrapper .vxe-table--filter-body > li:hover {
+.vxe-table--filter-wrapper .vxe-table--filter-header .vxe-table--filter-option:hover,
+.vxe-table--filter-wrapper .vxe-table--filter-body .vxe-table--filter-option:hover,
+.vxe-table--filter-wrapper .vxe-table--scrollbar-filter-body .vxe-table--filter-option:hover {
   background-color: var(--vxe-ui-table-row-hover-background-color);
 }
 .vxe-table--filter-wrapper .vxe-table--filter-header {
   padding-top: 0.2em;
 }
-.vxe-table--filter-wrapper .vxe-table--filter-body {
-  max-height: var(--vxe-ui-vxe-table-filter-default-max-height);
+.vxe-table--filter-wrapper .vxe-table--filter-body,
+.vxe-table--filter-wrapper .vxe-table--scrollbar-filter-body {
   padding-bottom: 0.2em;
 }
-.vxe-table--filter-wrapper > ul {
+.vxe-table--filter-wrapper .vxe-table--filter-header,
+.vxe-table--filter-wrapper .vxe-table--filter-body {
   list-style-type: none;
   padding: 0;
   margin: 0;
@@ -1657,8 +1675,9 @@
      -moz-user-select: none;
           user-select: none;
 }
-.vxe-table--filter-wrapper.is--multiple > ul > li {
-  padding: 0.25em 0.8em 0.25em 1em;
+.vxe-table--filter-wrapper .vxe-table--filter-header,
+.vxe-table--filter-wrapper .vxe-table--filter-footer {
+  flex-shrink: 0;
 }
 .vxe-table--filter-wrapper .vxe-table--filter-footer {
   border-top: 1px solid var(--vxe-ui-base-popup-border-color);