vxe-table 4.13.1 → 4.13.3

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

@@ -2,7 +2,7 @@ import { nextTick } from 'vue';
 import XEUtils from 'xe-utils';
 import { VxeUI } from '../../../ui';
 import { toFilters, handleFieldOrColumn, getRefElem } from '../../src/util';
-import { toCssUnit, triggerEvent } from '../../../ui/src/dom';
+import { toCssUnit, triggerEvent, getDomNode } from '../../../ui/src/dom';
 import { isEnableConf } from '../../../ui/src/utils';
 const { renderer, hooks } = VxeUI;
 const tableFilterMethodKeys = ['openFilter', 'setFilter', 'clearFilter', 'saveFilterPanel', 'resetFilterPanel', 'getCheckedFilters', 'updateFilterOptionStatus'];
@@ -67,6 +67,9 @@ hooks.add('tableFilterModule', {
                 }
                 else {
                     const el = refElem.value;
+                    const { scrollTop, scrollLeft, visibleHeight, visibleWidth } = getDomNode();
+                    const filterOpts = computeFilterOpts.value;
+                    const { transfer } = filterOpts;
                     const tableRect = el.getBoundingClientRect();
                     const btnElem = evnt.currentTarget;
                     const { filters, filterMultiple, filterRender } = column;
@@ -98,29 +101,45 @@ hooks.add('tableFilterModule', {
                             return;
                         }
                         const tableFilter = refTableFilter.value;
-                        const filterWrapperElem = tableFilter ? tableFilter.$el : null;
+                        const filterWrapperElem = tableFilter ? tableFilter.getRefMaps().refElem.value : null;
                         if (!filterWrapperElem) {
                             return;
                         }
                         const btnRect = btnElem.getBoundingClientRect();
-                        const filterWidth = filterWrapperElem.offsetWidth;
                         const filterHeadElem = filterWrapperElem.querySelector('.vxe-table--filter-header');
                         const filterFootElem = filterWrapperElem.querySelector('.vxe-table--filter-footer');
+                        const filterWidth = filterWrapperElem.offsetWidth;
                         const centerWidth = filterWidth / 2;
-                        let left = btnRect.left - tableRect.left - centerWidth;
-                        const top = btnRect.top - tableRect.top + btnElem.clientHeight;
-                        // 判断面板不能大于表格高度
-                        const maxHeight = Math.max(40, el.clientHeight - top - (filterHeadElem ? filterHeadElem.clientHeight : 0) - (filterFootElem ? filterFootElem.clientHeight : 0) - 14);
-                        if (left < 1) {
-                            left = 1;
+                        let left = 0;
+                        let top = 0;
+                        let maxHeight = 0;
+                        if (transfer) {
+                            left = btnRect.left - centerWidth + scrollLeft;
+                            top = btnRect.top + btnElem.clientHeight + scrollTop;
+                            maxHeight = Math.min(Math.max(tableRect.height, Math.floor(visibleHeight / 2)), Math.max(80, visibleHeight - top - (filterHeadElem ? filterHeadElem.clientHeight : 0) - (filterFootElem ? filterFootElem.clientHeight : 0) - 28));
+                            if (left < 16) {
+                                left = 16;
+                            }
+                            else if (left > (visibleWidth - filterWidth - 16)) {
+                                left = visibleWidth - filterWidth - 16;
+                            }
                         }
-                        else if (left > (el.clientWidth - filterWidth - 1)) {
-                            left = el.clientWidth - filterWidth - 1;
+                        else {
+                            left = btnRect.left - tableRect.left - centerWidth;
+                            top = btnRect.top - tableRect.top + btnElem.clientHeight;
+                            maxHeight = Math.max(40, el.clientHeight - top - (filterHeadElem ? filterHeadElem.clientHeight : 0) - (filterFootElem ? filterFootElem.clientHeight : 0) - 14);
+                            if (left < 1) {
+                                left = 1;
+                            }
+                            else if (left > (el.clientWidth - filterWidth - 1)) {
+                                left = el.clientWidth - filterWidth - 1;
+                            }
                         }
                         filterStore.style = {
                             top: toCssUnit(top),
                             left: toCssUnit(left)
                         };
+                        // 判断面板不能大于表格高度
                         filterStore.maxHeight = maxHeight;
                     });
                 }

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

@@ -1,18 +1,30 @@
-import { defineComponent, h, computed, inject } from 'vue';
+import { defineComponent, h, ref, computed, inject, Teleport } from 'vue';
 import { VxeUI } from '../../../ui';
 import { formatText, isEnableConf } from '../../../ui/src/utils';
 import { getPropClass } from '../../../ui/src/dom';
 import { getSlotVNs } from '../../../ui/src/vn';
+import XEUtils from 'xe-utils';
 const { getI18n, getIcon, renderer } = VxeUI;
 export default defineComponent({
     name: 'VxeTableFilterPanel',
     props: {
         filterStore: Object
     },
-    setup(props) {
+    setup(props, context) {
+        const xID = XEUtils.uniqueId();
         const $xeTable = inject('$xeTable', {});
         const { reactData: tableReactData, internalData: tableInternalData, getComputeMaps } = $xeTable;
         const { computeFilterOpts } = getComputeMaps();
+        const refElem = ref();
+        const refMaps = {
+            refElem
+        };
+        const $xeFilterPanel = {
+            xID,
+            props,
+            context,
+            getRefMaps: () => refMaps
+        };
         const computeHasCheckOption = computed(() => {
             const { filterStore } = props;
             return filterStore && filterStore.options.some((option) => option.checked);
@@ -66,7 +78,7 @@ export default defineComponent({
         /*************************
          * Publish methods
          *************************/
-        const $panel = {
+        const filterPanelMethods = {
             changeRadioOption,
             changeMultipleOption,
             changeAllOption,
@@ -74,12 +86,13 @@ export default defineComponent({
             confirmFilter,
             resetFilter
         };
+        Object.assign($xeFilterPanel, filterPanelMethods);
         const renderOptions = (filterRender, compConf) => {
             const { filterStore } = props;
             const { column, multiple, maxHeight } = filterStore;
             const slots = column ? column.slots : null;
             const filterSlot = slots ? slots.filter : null;
-            const params = Object.assign({}, tableInternalData._currFilterParams, { $panel, $table: $xeTable });
+            const params = Object.assign({}, tableInternalData._currFilterParams, { $panel: $xeFilterPanel, $table: $xeTable });
             const rtFilter = compConf ? (compConf.renderTableFilter || compConf.renderFilter) : null;
             if (filterSlot) {
                 return [
@@ -198,23 +211,37 @@ export default defineComponent({
             const filterRender = column ? column.filterRender : null;
             const compConf = isEnableConf(filterRender) ? renderer.get(filterRender.name) : null;
             const filterClassName = compConf ? (compConf.tableFilterClassName || compConf.filterClassName) : '';
-            const params = Object.assign({}, tableInternalData._currFilterParams, { $panel, $table: $xeTable });
+            const params = Object.assign({}, tableInternalData._currFilterParams, { $panel: $xeFilterPanel, $table: $xeTable });
+            const tableProps = $xeTable.props;
+            const { computeSize } = $xeTable.getComputeMaps();
+            const vSize = computeSize.value;
             const filterOpts = computeFilterOpts.value;
-            const { destroyOnClose } = filterOpts;
-            return h('div', {
-                class: [
-                    'vxe-table--filter-wrapper',
-                    'filter--prevent-default',
-                    getPropClass(filterClassName, params),
-                    {
-                        'is--animat': $xeTable.props.animat,
-                        'is--multiple': multiple,
-                        'is--active': visible
-                    }
-                ],
-                style: filterStore.style
-            }, initStore.filter && (destroyOnClose ? visible : true) && column ? renderOptions(filterRender, compConf).concat(renderFooters()) : []);
+            const { transfer, destroyOnClose } = filterOpts;
+            return h(Teleport, {
+                to: 'body',
+                disabled: !transfer
+            }, [
+                h('div', {
+                    ref: refElem,
+                    class: [
+                        'vxe-table--filter-wrapper',
+                        'filter--prevent-default',
+                        getPropClass(filterClassName, params),
+                        {
+                            [`size--${vSize}`]: vSize,
+                            'is--animat': tableProps.animat,
+                            'is--multiple': multiple,
+                            'is--active': visible
+                        }
+                    ],
+                    style: filterStore.style
+                }, initStore.filter && (destroyOnClose ? visible : true) && column ? renderOptions(filterRender, compConf).concat(renderFooters()) : [])
+            ]);
         };
-        return renderVN;
+        $xeFilterPanel.renderVN = renderVN;
+        return $xeFilterPanel;
+    },
+    render() {
+        return this.renderVN();
     }
 });

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

@@ -225,7 +225,7 @@ hooks.add('tableMenuModule', {
                         }
                     }
                 }
-                if (tableFilter && !getEventTargetNode(evnt, tableFilter.$el).flag) {
+                if (tableFilter && !getEventTargetNode(evnt, tableFilter.getRefMaps().refElem.value).flag) {
                     $xeTable.closeFilter();
                 }
                 menuMethods.closeMenu();

package/es/table/src/body.js

@@ -21,7 +21,7 @@ export default defineComponent({
     setup(props) {
         const $xeTable = inject('$xeTable', {});
         const { xID, props: tableProps, context: tableContext, reactData: tableReactData, internalData: tableInternalData } = $xeTable;
-        const { computeEditOpts, computeMouseOpts, computeCellOffsetWidth, computeAreaOpts, computeDefaultRowHeight, computeEmptyOpts, computeTooltipOpts, computeRadioOpts, computeExpandOpts, computeTreeOpts, computeCheckboxOpts, computeCellOpts, computeValidOpts, computeRowOpts, computeColumnOpts, computeRowDragOpts, computeColumnDragOpts, computeResizableOpts } = $xeTable.getComputeMaps();
+        const { computeEditOpts, computeMouseOpts, computeCellOffsetWidth, computeAreaOpts, computeDefaultRowHeight, computeEmptyOpts, computeTooltipOpts, computeRadioOpts, computeExpandOpts, computeTreeOpts, computeCheckboxOpts, computeCellOpts, computeValidOpts, computeRowOpts, computeColumnOpts, computeRowDragOpts, computeColumnDragOpts, computeResizableOpts, computeVirtualXOpts, computeVirtualYOpts } = $xeTable.getComputeMaps();
         const refElem = ref();
         const refBodyScroll = ref();
         const refBodyTable = ref();
@@ -77,7 +77,7 @@ export default defineComponent({
          */
         const renderTdColumn = (seq, rowid, fixedType, isOptimizeMode, rowLevel, row, rowIndex, $rowIndex, _rowIndex, column, $columnIndex, columns, items) => {
             const $xeGrid = $xeTable.xeGrid;
-            const { columnKey, resizable: allResizable, showOverflow: allShowOverflow, border, height, cellClassName: allCellClassName, cellStyle, align: allAlign, spanMethod, mouseConfig, editConfig, editRules, tooltipConfig, padding: allPadding } = tableProps;
+            const { columnKey, resizable: allResizable, showOverflow: allShowOverflow, border, height, treeConfig, cellClassName: allCellClassName, cellStyle, align: allAlign, spanMethod, mouseConfig, editConfig, editRules, tooltipConfig, padding: allPadding } = tableProps;
             const { tableData, dragRow, overflowX, currentColumn, scrollXLoad, scrollYLoad, mergeBodyFlag, calcCellHeightFlag, resizeHeightFlag, resizeWidthFlag, editStore, isAllOverflow, validErrorMaps } = tableReactData;
             const { fullAllDataRowIdData, fullColumnIdData, mergeBodyCellMaps, visibleColumn, afterFullData, mergeBodyList, scrollXStore, scrollYStore } = tableInternalData;
             const cellOpts = computeCellOpts.value;
@@ -86,6 +86,8 @@ export default defineComponent({
             const editOpts = computeEditOpts.value;
             const tooltipOpts = computeTooltipOpts.value;
             const resizableOpts = computeResizableOpts.value;
+            const virtualXOpts = computeVirtualXOpts.value;
+            const virtualYOpts = computeVirtualYOpts.value;
             const { isAllColumnDrag, isAllRowDrag } = resizableOpts;
             const rowOpts = computeRowOpts.value;
             const rowDragOpts = computeRowDragOpts.value;
@@ -254,10 +256,10 @@ export default defineComponent({
             let isVNPreEmptyStatus = false;
             if (!isMergeCell) {
                 if (!dragRow || getRowid($xeTable, dragRow) !== rowid) {
-                    if (scrollYLoad && (_rowIndex < scrollYStore.visibleStartIndex - scrollYStore.preloadSize || _rowIndex > scrollYStore.visibleEndIndex + scrollYStore.preloadSize)) {
+                    if (scrollYLoad && !treeConfig && !virtualYOpts.immediate && (_rowIndex < scrollYStore.visibleStartIndex - scrollYStore.preloadSize || _rowIndex > scrollYStore.visibleEndIndex + scrollYStore.preloadSize)) {
                         isVNPreEmptyStatus = true;
                     }
-                    else if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
+                    else if (scrollXLoad && !virtualXOpts.immediate && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
                         isVNPreEmptyStatus = true;
                     }
                 }

package/es/table/src/footer.js

@@ -28,7 +28,7 @@ export default defineComponent({
     setup(props) {
         const $xeTable = inject('$xeTable', {});
         const { xID, props: tableProps, reactData: tableReactData, internalData: tableInternalData } = $xeTable;
-        const { computeTooltipOpts, computeColumnOpts, computeColumnDragOpts, computeCellOpts, computeFooterCellOpts, computeDefaultRowHeight, computeResizableOpts } = $xeTable.getComputeMaps();
+        const { computeTooltipOpts, computeColumnOpts, computeColumnDragOpts, computeCellOpts, computeFooterCellOpts, computeDefaultRowHeight, computeResizableOpts, computeVirtualXOpts } = $xeTable.getComputeMaps();
         const refElem = ref();
         const refFooterScroll = ref();
         const refFooterTable = ref();
@@ -41,6 +41,7 @@ export default defineComponent({
             const { resizable: allResizable, border, footerCellClassName, footerCellStyle, footerAlign: allFooterAlign, footerSpanMethod, align: allAlign, columnKey, showFooterOverflow: allColumnFooterOverflow } = tableProps;
             const { scrollXLoad, scrollYLoad, overflowX, currentColumn } = tableReactData;
             const { fullColumnIdData, mergeFooterList, mergeFooterCellMaps, scrollXStore } = tableInternalData;
+            const virtualXOpts = computeVirtualXOpts.value;
             const tooltipOpts = computeTooltipOpts.value;
             const resizableOpts = computeResizableOpts.value;
             const { isAllColumnDrag } = resizableOpts;
@@ -151,7 +152,7 @@ export default defineComponent({
                 const isAutoCellWidth = !column.resizeWidth && (column.minWidth === 'auto' || column.width === 'auto');
                 let isVNPreEmptyStatus = false;
                 if (!isMergeCell) {
-                    if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
+                    if (scrollXLoad && !column.fixed && !virtualXOpts.immediate && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
                         isVNPreEmptyStatus = true;
                     }
                 }

package/es/table/src/header.js

@@ -19,7 +19,7 @@ export default defineComponent({
     setup(props) {
         const $xeTable = inject('$xeTable', {});
         const { xID, props: tableProps, reactData: tableReactData, internalData: tableInternalData } = $xeTable;
-        const { computeColumnOpts, computeColumnDragOpts, computeCellOpts, computeMouseOpts, computeHeaderCellOpts, computeDefaultRowHeight } = $xeTable.getComputeMaps();
+        const { computeColumnOpts, computeColumnDragOpts, computeCellOpts, computeMouseOpts, computeHeaderCellOpts, computeDefaultRowHeight, computeVirtualXOpts } = $xeTable.getComputeMaps();
         const headerColumn = ref([]);
         const refElem = ref();
         const refHeaderScroll = ref();
@@ -38,6 +38,7 @@ export default defineComponent({
             const { resizable: allResizable, columnKey, headerCellClassName, headerCellStyle, showHeaderOverflow: allColumnHeaderOverflow, headerAlign: allHeaderAlign, align: allAlign, mouseConfig } = tableProps;
             const { currentColumn, dragCol, scrollXLoad, scrollYLoad, overflowX } = tableReactData;
             const { fullColumnIdData, scrollXStore } = tableInternalData;
+            const virtualXOpts = computeVirtualXOpts.value;
             const columnOpts = computeColumnOpts.value;
             const columnDragOpts = computeColumnDragOpts.value;
             const cellOpts = computeCellOpts.value;
@@ -106,7 +107,7 @@ export default defineComponent({
                 let isVNPreEmptyStatus = false;
                 if (!isGroup) {
                     if (!dragCol || dragCol.id !== colid) {
-                        if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
+                        if (scrollXLoad && !column.fixed && !virtualXOpts.immediate && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
                             isVNPreEmptyStatus = true;
                         }
                     }

package/es/table/src/table.js

@@ -2833,7 +2833,12 @@ export default defineComponent({
                 $xeTable.checkSelectionStatus();
                 return new Promise(resolve => {
                     nextTick()
-                        .then(() => $xeTable.recalculate())
+                        .then(() => handleRecalculateLayout(false))
+                        .then(() => {
+                        calcCellHeight();
+                        updateRowOffsetTop();
+                        return handleRecalculateLayout(false);
+                    })
                         .then(() => {
                         let targetScrollLeft = lastScrollLeft;
                         let targetScrollTop = lastScrollTop;
@@ -2847,8 +2852,7 @@ export default defineComponent({
                             targetScrollTop = 0;
                         }
                         reactData.isRowLoading = false;
-                        calcCellHeight();
-                        updateRowOffsetTop();
+                        handleRecalculateLayout(false);
                         // 是否变更虚拟滚动
                         if (oldScrollYLoad === sYLoad) {
                             restoreScrollLocation($xeTable, targetScrollLeft, targetScrollTop)
@@ -3141,8 +3145,8 @@ export default defineComponent({
             const childrenField = treeOpts.children || treeOpts.childrenField;
             const hasChildField = treeOpts.hasChild || treeOpts.hasChildField;
             const result = [];
-            const columnIndex = tableMethods.getColumnIndex(treeNodeColumn);
-            const $columnIndex = tableMethods.getVMColumnIndex(treeNodeColumn);
+            const columnIndex = $xeTable.getColumnIndex(treeNodeColumn);
+            const $columnIndex = $xeTable.getVMColumnIndex(treeNodeColumn);
             const { handleGetRowId } = createHandleGetRowId($xeTable);
             let validRows = toggleMethod ? rows.filter((row) => toggleMethod({ $table: $xeTable, expanded, column: treeNodeColumn, columnIndex, $columnIndex, row })) : rows;
             if (accordion) {
@@ -3191,7 +3195,7 @@ export default defineComponent({
             }
             reactData.treeExpandedFlag++;
             return Promise.all(result).then(() => {
-                return tableMethods.recalculate();
+                return $xeTable.recalculate();
             });
         };
         /**
@@ -3203,14 +3207,14 @@ export default defineComponent({
         const handleVirtualTreeExpand = (rows, expanded) => {
             return handleBaseTreeExpand(rows, expanded).then(() => {
                 handleVirtualTreeToList();
-                tablePrivateMethods.handleTableData();
+                $xeTable.handleTableData();
                 updateAfterDataIndex();
                 return nextTick();
             }).then(() => {
-                return tableMethods.recalculate(true);
+                return $xeTable.recalculate(true);
             }).then(() => {
                 setTimeout(() => {
-                    tableMethods.updateCellAreas();
+                    $xeTable.updateCellAreas();
                 }, 30);
             });
         };
@@ -5401,7 +5405,7 @@ export default defineComponent({
                         internalData.rowExpandedMaps = rowExpandedMaps;
                         rows = rows.slice(rows.length - 1, rows.length);
                     }
-                    const validRows = toggleMethod ? rows.filter((row) => toggleMethod({ $table: $xeTable, expanded, column: expandColumn, columnIndex, $columnIndex, row, rowIndex: tableMethods.getRowIndex(row), $rowIndex: tableMethods.getVMRowIndex(row) })) : rows;
+                    const validRows = toggleMethod ? rows.filter((row) => toggleMethod({ $table: $xeTable, expanded, column: expandColumn, columnIndex, $columnIndex, row, rowIndex: $xeTable.getRowIndex(row), $rowIndex: $xeTable.getVMRowIndex(row) })) : rows;
                     if (expanded) {
                         validRows.forEach((row) => {
                             const rowid = handleGetRowId(row);
@@ -6036,7 +6040,7 @@ export default defineComponent({
                 if (getEventTargetNode(evnt, el, 'vxe-cell--filter').flag) {
                     // 如果点击了筛选按钮
                 }
-                else if (getEventTargetNode(evnt, tableFilter.$el).flag) {
+                else if (getEventTargetNode(evnt, tableFilter.getRefMaps().refElem.value).flag) {
                     // 如果点击筛选容器
                 }
                 else {
@@ -8131,6 +8135,10 @@ export default defineComponent({
                 const currentColumnOpts = computeCurrentColumnOpts.value;
                 const beforeRowMethod = currentColumnOpts.beforeSelectMethod || columnOpts.currentMethod;
                 const { column: newValue } = params;
+                const { trigger } = currentColumnOpts;
+                if (trigger === 'manual') {
+                    return;
+                }
                 const isChange = oldValue !== newValue;
                 if (!beforeRowMethod || beforeRowMethod({ column: newValue, $table: $xeTable })) {
                     $xeTable.setCurrentColumn(newValue);
@@ -8148,6 +8156,10 @@ export default defineComponent({
                 const currentRowOpts = computeCurrentRowOpts.value;
                 const beforeRowMethod = currentRowOpts.beforeSelectMethod || rowOpts.currentMethod;
                 const { row: newValue } = params;
+                const { trigger } = currentRowOpts;
+                if (trigger === 'manual') {
+                    return;
+                }
                 const isChange = oldValue !== newValue;
                 if (!beforeRowMethod || beforeRowMethod({ row: newValue, $table: $xeTable })) {
                     $xeTable.setCurrentRow(newValue);
@@ -8195,10 +8207,10 @@ export default defineComponent({
              * 展开树节点事件
              */
             triggerTreeExpandEvent(evnt, params) {
-                const { treeExpandLazyLoadedMaps } = internalData;
+                const { treeExpandLazyLoadedMaps, treeEATime } = internalData;
                 const treeOpts = computeTreeOpts.value;
                 const { row, column } = params;
-                const { lazy, trigger } = treeOpts;
+                const { lazy, trigger, accordion } = treeOpts;
                 if (trigger === 'manual') {
                     return;
                 }
@@ -8208,7 +8220,17 @@ export default defineComponent({
                     const expanded = !$xeTable.isTreeExpandByRow(row);
                     const columnIndex = $xeTable.getColumnIndex(column);
                     const $columnIndex = $xeTable.getVMColumnIndex(column);
-                    $xeTable.setTreeExpand(row, expanded);
+                    if (treeEATime) {
+                        clearTimeout(treeEATime);
+                    }
+                    $xeTable.setTreeExpand(row, expanded).then(() => {
+                        if (accordion) {
+                            internalData.treeEATime = setTimeout(() => {
+                                internalData.treeEATime = undefined;
+                                $xeTable.scrollToRow(row);
+                            }, 30);
+                        }
+                    });
                     dispatchEvent('toggle-tree-expand', { expanded, column, columnIndex, $columnIndex, row }, evnt);
                 }
             },
@@ -9458,7 +9480,8 @@ export default defineComponent({
                     if (isScrollXBig && mouseOpts.area) {
                         errLog('vxe.error.notProp', ['mouse-config.area']);
                     }
-                    nextTick(() => {
+                    calcScrollbar();
+                    return nextTick().then(() => {
                         updateStyle();
                     });
                 }
@@ -9555,6 +9578,7 @@ export default defineComponent({
                 if (isScrollYBig && mouseOpts.area) {
                     errLog('vxe.error.notProp', ['mouse-config.area']);
                 }
+                calcScrollbar();
                 return nextTick().then(() => {
                     updateStyle();
                 });
@@ -10434,8 +10458,6 @@ export default defineComponent({
             if (columnOpts.drag || rowOpts.drag || customOpts.allowSort) {
                 initTpImg();
             }
-            ;
-            window.aa = $xeTable;
             nextTick(() => {
                 const { data, exportConfig, importConfig, treeConfig, showOverflow, highlightCurrentRow, highlightCurrentColumn } = props;
                 const { scrollXStore, scrollYStore } = internalData;
@@ -10493,6 +10515,9 @@ export default defineComponent({
                 if (props.highlightHoverColumn) {
                     warnLog('vxe.error.delProp', ['highlight-hover-column', 'column-config.isHover']);
                 }
+                if (props.resizable) {
+                    warnLog('vxe.error.delProp', ['resizable', 'column-config.resizable']);
+                }
                 // if (props.scrollY) {
                 //   warnLog('vxe.error.delProp', ['scroll-y', 'virtual-y-config'])
                 // }

package/es/table/style.css

@@ -1467,9 +1467,11 @@
   position: absolute;
   top: 0;
   min-width: 100px;
+  font-size: var(--vxe-ui-font-size-default);
   border-radius: var(--vxe-ui-border-radius);
   background-color: var(--vxe-ui-layout-background-color);
   border: 1px solid var(--vxe-ui-base-popup-border-color);
+  color: var(--vxe-ui-font-color);
   box-shadow: var(--vxe-ui-base-popup-box-shadow);
   z-index: 10;
 }
@@ -1579,6 +1581,16 @@
   vertical-align: middle;
 }
 
+.vxe-table--filter-wrapper.size--medium {
+  font-size: var(--vxe-ui-font-size-medium);
+}
+.vxe-table--filter-wrapper.size--small {
+  font-size: var(--vxe-ui-font-size-small);
+}
+.vxe-table--filter-wrapper.size--mini {
+  font-size: var(--vxe-ui-font-size-mini);
+}
+
 .vxe-table--context-menu-wrapper {
   display: none;
 }
@@ -2997,6 +3009,9 @@
           user-select: none;
   cursor: pointer;
 }
+.vxe-table--render-default .vxe-tree--btn-wrapper > i {
+  background-color: var(--vxe-ui-layout-background-color);
+}
 .vxe-table--render-default .vxe-tree--node-btn {
   display: block;
   color: var(--vxe-ui-font-lighten-color);
@@ -3017,6 +3032,9 @@
 .vxe-table--render-default .vxe-body--column.col--cs-height, .vxe-table--render-default .vxe-body--column.col--rs-height, .vxe-table--render-default .vxe-body--column.col--auto-height {
   overflow: hidden;
 }
+.vxe-table--render-default .vxe-body--column.col--cs-height.col--tree-node, .vxe-table--render-default .vxe-body--column.col--rs-height.col--tree-node, .vxe-table--render-default .vxe-body--column.col--auto-height.col--tree-node {
+  overflow: unset;
+}
 .vxe-table--render-default .vxe-body--column.col--cs-height > .vxe-cell, .vxe-table--render-default .vxe-body--column.col--rs-height > .vxe-cell, .vxe-table--render-default .vxe-body--column.col--auto-height > .vxe-cell {
   overflow: hidden;
 }