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

package/lib/index.umd.js

@@ -3323,7 +3323,7 @@ function getDefaultConfig(val1, def1) {
 /* unused harmony import specifier */ var VxeUI;
 
 
-const version = "3.25.0-beta.3";
+const version = "3.25.0-beta.4";
 core_.VxeUI.version = version;
 core_.VxeUI.tableVersion = version;
 core_.VxeUI.setConfig({
@@ -3487,7 +3487,7 @@ core_.VxeUI.setConfig({
       destroyOnClose: true,
       multiple: true,
       showIcon: true,
-      maxHeight: 280
+      maxHeight: 320
     },
     floatingFilterConfig: {
       // enabled: false
@@ -4286,7 +4286,7 @@ function getPopupAppendElement(appendTo) {
 const {
   log: log_log
 } = core_.VxeUI;
-const tableVersion = `table v${"3.25.0-beta.3"}`;
+const tableVersion = `table v${"3.25.0-beta.4"}`;
 function createComponentLog(name) {
   const uiVersion = core_.VxeUI.uiVersion ? `ui v${core_.VxeUI.uiVersion}` : '';
   const ganttVersion = core_.VxeUI.ganttVersion ? `gantt v${core_.VxeUI.ganttVersion}` : '';
@@ -4814,8 +4814,7 @@ function createReactData() {
       isIndeterminate: false,
       style: null,
       column: null,
-      visible: false,
-      maxHeight: null
+      visible: false
     },
     // 存放列相关的信息
     columnStore: {
@@ -8234,7 +8233,7 @@ const rowHeight=computeRowHeight($xeTable);scrollYStore.rowHeight=rowHeight;//
 reactData.rowHeight=rowHeight;const{toVisibleIndex:toYVisibleIndex,visibleSize:visibleYSize}=handleVirtualYVisible($xeTable);if(scrollYLoad){const offsetYSize=Math.max(0,virtualYOpts.oSize?external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(virtualYOpts.oSize):0);scrollYStore.preloadSize=external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(virtualYOpts.preSize);scrollYStore.offsetSize=offsetYSize;scrollYStore.visibleSize=visibleYSize;scrollYStore.endIndex=Math.max(scrollYStore.startIndex+visibleYSize+offsetYSize,scrollYStore.endIndex);scrollYStore.visibleStartIndex=Math.max(scrollYStore.startIndex,toYVisibleIndex);scrollYStore.visibleEndIndex=Math.min(scrollYStore.endIndex,toYVisibleIndex+visibleYSize);$xeTable.updateScrollYData().then(()=>{loadScrollYData($xeTable);});}else{$xeTable.updateScrollYSpace();}});}function calcScrollbar($xeTable){const reactData=$xeTable;const internalData=$xeTable;const{scrollXWidth,scrollYHeight}=reactData;const{elemStore}=internalData;const el=$xeTable.$refs.refElem;if(!el||!el.clientWidth){return;}const bodyWrapperElem=getRefElem(elemStore['main-body-wrapper']);const headerTableElem=getRefElem(elemStore['main-header-table']);const footerTableElem=getRefElem(elemStore['main-footer-table']);const xHandleEl=$xeTable.$refs.refScrollXHandleElem;const yHandleEl=$xeTable.$refs.refScrollYHandleElem;const thumbXElem=$xeTable.$refs.refThumbXElem;const thumbYElem=$xeTable.$refs.refThumbYElem;let overflowY=false;let overflowX=false;if(bodyWrapperElem){const scrollbarOpts=$xeTable.computeScrollbarOpts;const barWidth=$xeTable.computeScrollYWidth;const barHeight=$xeTable.computeScrollXHeight;overflowY=scrollYHeight>bodyWrapperElem.clientHeight;// 如果是虚拟滚动条
 if(thumbYElem){reactData.scrollbarHeight=scrollbarOpts.padding?thumbYElem.offsetWidth:0;}else if(yHandleEl){reactData.scrollbarWidth=barWidth||barHeight||yHandleEl.offsetWidth-yHandleEl.clientWidth||14;}reactData.overflowY=overflowY;overflowX=scrollXWidth>bodyWrapperElem.clientWidth;// 如果是虚拟滚动条
 if(thumbXElem){reactData.scrollbarHeight=scrollbarOpts.padding?thumbXElem.offsetHeight:0;}else if(xHandleEl){reactData.scrollbarHeight=barHeight||barWidth||xHandleEl.offsetHeight-xHandleEl.clientHeight||14;}const hHeight=headerTableElem?headerTableElem.clientHeight:0;const fHeight=footerTableElem?footerTableElem.clientHeight:0;internalData.tableHeight=bodyWrapperElem.offsetHeight;internalData.tHeaderHeight=hHeight;internalData.tFooterHeight=fHeight;reactData.overflowX=overflowX;reactData.parentHeight=Math.max(hHeight+fHeight+20,$xeTable.getParentHeight());}if(overflowX){$xeTable.checkScrolling();}}function handleRecalculateStyle($xeTable,reFull,reWidth,reHeight){const internalData=$xeTable;const el=$xeTable.$refs.refElem;if(!el||!el.clientWidth){return $xeTable.$nextTick();}const varEl=$xeTable.$refs.refVarElem;if(varEl){const[defEl,mediumEl,smallEl,miniEl]=varEl.children;calcVarRowHeightConfig($xeTable,'default',defEl);calcVarRowHeightConfig($xeTable,'medium',mediumEl);calcVarRowHeightConfig($xeTable,'small',smallEl);calcVarRowHeightConfig($xeTable,'mini',miniEl);}if(reWidth){calcCellWidth($xeTable);}if(reFull){autoCellWidth($xeTable);}calcScrollbar($xeTable);updateStyle($xeTable);updateRowExpandStyle($xeTable);if(reFull){updateTreeLineStyle($xeTable);}internalData.rceRunTime=Date.now();return computeScrollLoad($xeTable).then(()=>{// 初始化时需要在列计算之后再执行优化运算，达到最优显示效果
-if(reWidth){calcCellWidth($xeTable);}if(reFull){autoCellWidth($xeTable);}if(reHeight){calcCellHeight($xeTable);}updateStyle($xeTable);calcScrollbar($xeTable);if(reFull){updateRowOffsetTop($xeTable);}updateRowExpandStyle($xeTable);if(reFull){updateTreeLineStyle($xeTable);}internalData.rceRunTime=Date.now();if(reFull){return computeScrollLoad($xeTable);}});}const defaultMinRunDelay=50;function handleLazyRecalculate($xeTable,reFull,reWidth,reHeight,options){const reactData=$xeTable;const internalData=$xeTable;const minRunDelay=(options?options.minRunDelay:defaultMinRunDelay)||defaultMinRunDelay;return new Promise(resolve=>{const{customStore,tableData,tableColumn}=reactData;const{rceTimeout,rceRunTime}=internalData;const $xeGanttView=internalData.xeGanttView;const resizeOpts=$xeTable.computeResizeOpts;let rceDelay=internalData.rceDelay;// 如果在500毫秒内频繁执行，则执行次数减缓
+if(reWidth){calcCellWidth($xeTable);}if(reFull){autoCellWidth($xeTable);}if(reHeight){calcCellHeight($xeTable);}updateStyle($xeTable);calcScrollbar($xeTable);if(reFull){updateRowOffsetTop($xeTable);}updateRowExpandStyle($xeTable);if(reFull){updateTreeLineStyle($xeTable);}$xeTable.updateScrollbar();internalData.rceRunTime=Date.now();if(reFull){return computeScrollLoad($xeTable);}});}const defaultMinRunDelay=50;function handleLazyRecalculate($xeTable,reFull,reWidth,reHeight,options){const reactData=$xeTable;const internalData=$xeTable;const minRunDelay=(options?options.minRunDelay:defaultMinRunDelay)||defaultMinRunDelay;return new Promise(resolve=>{const{customStore,tableData,tableColumn}=reactData;const{rceTimeout,rceRunTime}=internalData;const $xeGanttView=internalData.xeGanttView;const resizeOpts=$xeTable.computeResizeOpts;let rceDelay=internalData.rceDelay;// 如果在500毫秒内频繁执行，则执行次数减缓
 if(rceRunTime&&rceRunTime>Date.now()-500){rceDelay=Math.min(Math.max(60,Math.min(800,tableData.length/8)),rceDelay+50);}else{rceDelay=0;}internalData.rceDelay=rceDelay;const refreshDelay=resizeOpts.refreshDelay||30;const reDelay=rceDelay+refreshDelay;const el=$xeTable.$refs.refElem;$xeTable.updateScrollbar();if(el&&el.clientWidth){autoCellWidth($xeTable);updateRowExpandStyle($xeTable);}if(customStore.visible&&$xeTable.handleCustomStyle){$xeTable.handleCustomStyle();}const renderCellSize=tableData.length*tableColumn.length;// 渲染量低的场景
 if(renderCellSize<400){rceDelay=20;}else if(renderCellSize<600){rceDelay=40;}else if(renderCellSize<800){rceDelay=80;}if(rceTimeout){clearTimeout(rceTimeout);// 多少毫秒内至少执行一次
 if(rceRunTime&&rceRunTime+minRunDelay<Date.now()){resolve(handleRecalculateStyle($xeTable,reFull,reWidth,reHeight));}else{$xeTable.$nextTick(()=>{resolve();});}}else{resolve(handleRecalculateStyle($xeTable,reFull,reWidth,reHeight));}if($xeGanttView&&$xeGanttView.handleLazyRecalculate){$xeGanttView.handleLazyRecalculate();}internalData.rceTimeout=setTimeout(()=>{internalData.rceDelay=0;internalData.rceTimeout=undefined;handleRecalculateStyle($xeTable,reFull,reWidth,reHeight);if($xeGanttView&&$xeGanttView.handleLazyRecalculate){$xeGanttView.handleLazyRecalculate();}},reDelay);});}function handleResizeEvent($xeTable){const internalData=$xeTable;if(internalData.rsePending){return;}internalData.rsePending=true;handleLazyRecalculate($xeTable,true,true,true,{minRunDelay:200}).then(()=>{internalData.rsePending=false;}).catch(()=>{internalData.rsePending=false;});}function handleUpdateAggValues($xeTable){const reactData=$xeTable;const internalData=$xeTable;const{visibleColumn}=internalData;const aggCols=[];visibleColumn.forEach(column=>{if(column.aggFunc){aggCols.push(column);}});reactData.aggHandleAggColumns=aggCols;}function handleUpdateRowGroup($xeTable,groupFields){const reactData=$xeTable;const aggGroupFields=[];const aggGroupConfs=[];if(groupFields){(external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isArray(groupFields)?groupFields:[groupFields]).forEach(field=>{aggGroupFields.push(field);aggGroupConfs.push({field});});}reactData.rowGroupList=aggGroupConfs;reactData.aggHandleFields=aggGroupFields;handleUpdateAggValues($xeTable);}function handleeGroupSummary($xeTable,aggList){const internalData=$xeTable;const{fullColumnFieldData}=internalData;const aggregateOpts=$xeTable.computeAggregateOpts;const aggFuncColumns=$xeTable.computeAggFuncColumns;const{mapChildrenField}=aggregateOpts;const aggCalcMethod=aggregateOpts.calcValuesMethod||aggregateOpts.countMethod||aggregateOpts.aggregateMethod;if(mapChildrenField){external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().lastEach(aggList,aggRow=>{let count=0;external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().each(aggRow[mapChildrenField],row=>{if(row.isAggregate){count+=row.childCount||0;}else{count++;}});aggRow.childCount=count;});if($xeTable.handlePivotTableAggData){$xeTable.handlePivotTableAggData(aggList);}else{external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().lastEach(aggList,aggRow=>{const aggDtObj={};const aggData=aggRow.aggData;const groupField=aggRow.groupField;const groupContent=aggRow.groupContent;const childList=mapChildrenField?aggRow[mapChildrenField]||[]:[];const childCount=aggRow.childCount;const colRest=fullColumnFieldData[groupField]||{};aggFuncColumns.forEach(column=>{const{field}=column;const currAggData=aggData?aggData[field]:null;const ctParams={$table:$xeTable,groupField,groupColumn:colRest?colRest.column:null,column,groupValue:groupContent,childList,childCount,aggValue:currAggData?currAggData.value:0,/**
@@ -8758,7 +8757,7 @@ if(isEnableConf(editConfig)&&editOpts.autoClear!==false&&editOpts.trigger==='dbl
      * 点击排序事件
      */triggerSortEvent(evnt,column,order){const $xeTable=this;const sortOpts=$xeTable.computeSortOpts;const{multiple,allowClear}=sortOpts;const{field,sortable}=column;if(sortable||column.remoteSort){if(!order||column.order===order){if(allowClear){$xeTable.clearSort(multiple?column:null);}}else{$xeTable.sort({field,order});}$xeTable.handleColumnSortEvent(evnt,column);}},handleCellRuleUpdateStatus(type,cellParams,cellValue){const $xeTable=this;const reactData=$xeTable;const{validStore}=reactData;const{row,column}=cellParams;if($xeTable.hasCellRules){if($xeTable.hasCellRules(type,row,column)){const cell=$xeTable.getCellElement(row,column);if(cell){const customVal=!external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isUndefined(cellValue);return $xeTable.validCellRules(type,row,column,cellValue).then(()=>{if(customVal&&validStore.visible){setCellValue(row,column,cellValue);}$xeTable.clearValidate(row,column);}).catch(({rule})=>{if(customVal){setCellValue(row,column,cellValue);}$xeTable.showValidTooltip({rule,row,column,cell});});}}}return $xeTable.$nextTick();},/**
      * @private
-     */updateScrollbar(){const $xeTable=this;$xeTable.updateThumbSize();$xeTable.updateThumbOffset();},/**
+     */updateScrollbar(){const $xeTable=this;const isVScrollbar=$xeTable.computeIsVScrollbar;if(isVScrollbar){return $xeTable.$nextTick().then(()=>{$xeTable.updateThumbSize();$xeTable.updateThumbOffset();});}return Promise.resolve();},/**
      * 表头单元格按下事件
      */triggerHeaderCellMousedownEvent(evnt,params){const $xeTable=this;const props=$xeTable;const{mouseConfig}=props;const mouseOpts=$xeTable.computeMouseOpts;const columnOpts=$xeTable.computeColumnOpts;const columnDragOpts=$xeTable.computeColumnDragOpts;const{trigger,isCrossDrag,isPeerDrag,disabledMethod}=columnDragOpts;const cell=evnt.currentTarget;const triggerInput=cell&&cell.tagName&&cell.tagName.toLowerCase()==='input';const triggerCheckbox=getEventTargetNode(evnt,cell,'vxe-cell--checkbox').flag;const triggerSort=getEventTargetNode(evnt,cell,'vxe-cell--sort').flag;const triggerFilter=getEventTargetNode(evnt,cell,'vxe-cell--filter').flag;let triggerDrag=false;const isColDragCell=columnOpts.drag&&trigger==='cell';if(!(triggerInput||triggerCheckbox||triggerSort||triggerFilter)){const{column}=params;if(isColDragCell&&!column.fixed&&(isCrossDrag||isPeerDrag||!column.parentId)&&!(disabledMethod&&disabledMethod(params))){triggerDrag=true;$xeTable.handleHeaderCellDragMousedownEvent(evnt,params);}}if(!triggerDrag&&hasEnableConf(mouseConfig,mouseOpts)&&mouseOpts.area&&$xeTable.handleHeaderCellAreaMouseDnEvent){$xeTable.handleHeaderCellAreaMouseDnEvent(evnt,Object.assign({cell,triggerSort,triggerFilter},params));}$xeTable.focus();if($xeTable.closeMenu){$xeTable.closeMenu();}},/**
      * 单元格按下事件
@@ -8888,7 +8887,7 @@ if(transform){return handleVirtualTreeExpand($xeTable,rows,expanded);}else{retur
      * 横向 X 可视渲染事件处理
      */triggerScrollXEvent(){const $xeTable=this;const virtualXOpts=$xeTable.computeVirtualXOpts;if(virtualXOpts.immediate){loadScrollXData($xeTable);}else{lazyScrollXData($xeTable);}},/**
      * 纵向 Y 可视渲染事件处理
-     */triggerScrollYEvent(){const $xeTable=this;const virtualYOpts=$xeTable.computeVirtualYOpts;if(virtualYOpts.immediate){loadScrollYData($xeTable);}else{lazyScrollYData($xeTable);}},triggerBodyScrollEvent(evnt,fixedType){const $xeTable=this;const props=$xeTable;const reactData=$xeTable;const internalData=$xeTable;const{useScrollbar}=props;const{scrollYLoad,scrollXLoad}=reactData;const{elemStore,intoRunScroll,lastScrollTop,lastScrollLeft,inWheelScroll,inVirtualScroll,inHeaderScroll,inBodyScroll,scrollRenderType,inFooterScroll}=internalData;if(inWheelScroll||inVirtualScroll||inHeaderScroll||inFooterScroll){return;}const xHandleEl=$xeTable.$refs.refScrollXHandleElem;const yHandleEl=$xeTable.$refs.refScrollYHandleElem;const leftScrollElem=getRefElem(elemStore['left-body-scroll']);const bodyScrollElem=getRefElem(elemStore['main-body-scroll']);const rightScrollElem=getRefElem(elemStore['right-body-scroll']);const headerScrollElem=getRefElem(elemStore['main-header-scroll']);const footerScrollElem=getRefElem(elemStore['main-footer-scroll']);const rowExpandEl=$xeTable.$refs.refRowExpandElem;if(intoRunScroll){return;}if(!bodyScrollElem){return;}if(!useScrollbar){if(!xHandleEl){return;}if(!yHandleEl){return;}}if(inBodyScroll){if(scrollRenderType!==fixedType){return;}}let scrollTop=0;let scrollLeft=0;if(leftScrollElem&&fixedType==='left'){scrollTop=leftScrollElem.scrollTop;}else if(rightScrollElem&&fixedType==='right'){scrollTop=rightScrollElem.scrollTop;}else{scrollTop=bodyScrollElem.scrollTop;scrollLeft=bodyScrollElem.scrollLeft;}const isRollX=scrollLeft!==lastScrollLeft;const isRollY=scrollTop!==lastScrollTop;internalData.inBodyScroll=true;internalData.scrollRenderType=fixedType;if(isRollY){if(fixedType==='left'){setScrollTop(bodyScrollElem,scrollTop);setScrollTop(rightScrollElem,scrollTop);}else if(fixedType==='right'){setScrollTop(bodyScrollElem,scrollTop);setScrollTop(leftScrollElem,scrollTop);}else{setScrollTop(leftScrollElem,scrollTop);setScrollTop(rightScrollElem,scrollTop);}setScrollTop(yHandleEl,scrollTop);setScrollTop(rowExpandEl,scrollTop);syncGanttScrollTop($xeTable,scrollTop);if(scrollYLoad){$xeTable.triggerScrollYEvent(evnt);}}if(isRollX){setScrollLeft(xHandleEl,scrollLeft);setScrollLeft(headerScrollElem,scrollLeft);setScrollLeft(footerScrollElem,scrollLeft);if(scrollXLoad){$xeTable.triggerScrollXEvent(evnt);}}$xeTable.handleScrollEvent(evnt,isRollY,isRollX,scrollTop,scrollLeft,{type:'body',fixed:fixedType});},triggerHeaderScrollEvent(evnt,fixedType){const $xeTable=this;const reactData=$xeTable;const internalData=$xeTable;const{scrollXLoad}=reactData;const{elemStore,intoRunScroll,inWheelScroll,inVirtualScroll,inBodyScroll,inFooterScroll}=internalData;if(inWheelScroll||inVirtualScroll||inBodyScroll||inFooterScroll){return;}if(intoRunScroll){return;}const xHandleEl=$xeTable.$refs.refScrollXHandleElem;const yHandleEl=$xeTable.$refs.refScrollYHandleElem;const bodyScrollElem=getRefElem(elemStore['main-body-scroll']);const headerScrollElem=getRefElem(elemStore['main-header-scroll']);const footerScrollElem=getRefElem(elemStore['main-footer-scroll']);if(!headerScrollElem){return;}if(!xHandleEl){return;}if(!yHandleEl){return;}const scrollTop=yHandleEl.scrollTop;const scrollLeft=headerScrollElem.scrollLeft;const isRollX=true;const isRollY=false;internalData.inHeaderScroll=true;setScrollLeft(xHandleEl,scrollLeft);setScrollLeft(footerScrollElem,scrollLeft);setScrollLeft(bodyScrollElem,scrollLeft);if(scrollXLoad){$xeTable.triggerScrollXEvent(evnt);}$xeTable.handleScrollEvent(evnt,isRollY,isRollX,scrollTop,scrollLeft,{type:'header',fixed:fixedType});},triggerFooterScrollEvent(evnt,fixedType){const $xeTable=this;const reactData=$xeTable;const internalData=$xeTable;const{scrollXLoad}=reactData;const{elemStore,intoRunScroll,inWheelScroll,inVirtualScroll,inHeaderScroll,inBodyScroll}=internalData;if(inWheelScroll||inVirtualScroll||inHeaderScroll||inBodyScroll){return;}const xHandleEl=$xeTable.$refs.refScrollXHandleElem;const yHandleEl=$xeTable.$refs.refScrollYHandleElem;const bodyScrollElem=getRefElem(elemStore['main-body-scroll']);const headerScrollElem=getRefElem(elemStore['main-header-scroll']);const footerScrollElem=getRefElem(elemStore['main-footer-scroll']);if(intoRunScroll){return;}if(!footerScrollElem){return;}if(!xHandleEl){return;}if(!yHandleEl){return;}const scrollTop=yHandleEl.scrollTop;const scrollLeft=footerScrollElem.scrollLeft;const isRollX=true;const isRollY=false;internalData.inFooterScroll=true;setScrollLeft(xHandleEl,scrollLeft);setScrollLeft(headerScrollElem,scrollLeft);setScrollLeft(bodyScrollElem,scrollLeft);if(scrollXLoad){$xeTable.triggerScrollXEvent(evnt);}$xeTable.handleScrollEvent(evnt,isRollY,isRollX,scrollTop,scrollLeft,{type:'footer',fixed:fixedType});},triggerBodyWheelEvent(evnt){const $xeTable=this;const $xeParentTable=$xeTable.$xeParentTable;const tableProps=$xeTable;const reactData=$xeTable;const internalData=$xeTable;const{target,deltaY,deltaX,shiftKey}=evnt;if(target&&/^textarea$/i.test(target.tagName)){return;}// 如果滚轮未移动或者触摸板未变化位置
+     */triggerScrollYEvent(){const $xeTable=this;const virtualYOpts=$xeTable.computeVirtualYOpts;if(virtualYOpts.immediate){loadScrollYData($xeTable);}else{lazyScrollYData($xeTable);}},triggerBodyScrollEvent(evnt,fixedType){const $xeTable=this;const reactData=$xeTable;const internalData=$xeTable;const{scrollYLoad,scrollXLoad}=reactData;const isVScrollbar=$xeTable.computeIsVScrollbar;const{elemStore,intoRunScroll,lastScrollTop,lastScrollLeft,inWheelScroll,inVirtualScroll,inHeaderScroll,inBodyScroll,scrollRenderType,inFooterScroll}=internalData;if(inWheelScroll||inVirtualScroll||inHeaderScroll||inFooterScroll){return;}const xHandleEl=$xeTable.$refs.refScrollXHandleElem;const yHandleEl=$xeTable.$refs.refScrollYHandleElem;const leftScrollElem=getRefElem(elemStore['left-body-scroll']);const bodyScrollElem=getRefElem(elemStore['main-body-scroll']);const rightScrollElem=getRefElem(elemStore['right-body-scroll']);const headerScrollElem=getRefElem(elemStore['main-header-scroll']);const footerScrollElem=getRefElem(elemStore['main-footer-scroll']);const rowExpandEl=$xeTable.$refs.refRowExpandElem;if(intoRunScroll){return;}if(!bodyScrollElem){return;}if(!isVScrollbar){if(!xHandleEl){return;}if(!yHandleEl){return;}}if(inBodyScroll){if(scrollRenderType!==fixedType){return;}}let scrollTop=0;let scrollLeft=0;if(leftScrollElem&&fixedType==='left'){scrollTop=leftScrollElem.scrollTop;}else if(rightScrollElem&&fixedType==='right'){scrollTop=rightScrollElem.scrollTop;}else{scrollTop=bodyScrollElem.scrollTop;scrollLeft=bodyScrollElem.scrollLeft;}const isRollX=scrollLeft!==lastScrollLeft;const isRollY=scrollTop!==lastScrollTop;internalData.inBodyScroll=true;internalData.scrollRenderType=fixedType;if(isRollY){if(fixedType==='left'){setScrollTop(bodyScrollElem,scrollTop);setScrollTop(rightScrollElem,scrollTop);}else if(fixedType==='right'){setScrollTop(bodyScrollElem,scrollTop);setScrollTop(leftScrollElem,scrollTop);}else{setScrollTop(leftScrollElem,scrollTop);setScrollTop(rightScrollElem,scrollTop);}setScrollTop(yHandleEl,scrollTop);setScrollTop(rowExpandEl,scrollTop);syncGanttScrollTop($xeTable,scrollTop);if(scrollYLoad){$xeTable.triggerScrollYEvent(evnt);}}if(isRollX){setScrollLeft(xHandleEl,scrollLeft);setScrollLeft(headerScrollElem,scrollLeft);setScrollLeft(footerScrollElem,scrollLeft);if(scrollXLoad){$xeTable.triggerScrollXEvent(evnt);}}$xeTable.handleScrollEvent(evnt,isRollY,isRollX,scrollTop,scrollLeft,{type:'body',fixed:fixedType});},triggerHeaderScrollEvent(evnt,fixedType){const $xeTable=this;const reactData=$xeTable;const internalData=$xeTable;const{scrollXLoad}=reactData;const{elemStore,intoRunScroll,inWheelScroll,inVirtualScroll,inBodyScroll,inFooterScroll}=internalData;if(inWheelScroll||inVirtualScroll||inBodyScroll||inFooterScroll){return;}if(intoRunScroll){return;}const xHandleEl=$xeTable.$refs.refScrollXHandleElem;const yHandleEl=$xeTable.$refs.refScrollYHandleElem;const bodyScrollElem=getRefElem(elemStore['main-body-scroll']);const headerScrollElem=getRefElem(elemStore['main-header-scroll']);const footerScrollElem=getRefElem(elemStore['main-footer-scroll']);if(!headerScrollElem){return;}if(!xHandleEl){return;}if(!yHandleEl){return;}const scrollTop=yHandleEl.scrollTop;const scrollLeft=headerScrollElem.scrollLeft;const isRollX=true;const isRollY=false;internalData.inHeaderScroll=true;setScrollLeft(xHandleEl,scrollLeft);setScrollLeft(footerScrollElem,scrollLeft);setScrollLeft(bodyScrollElem,scrollLeft);if(scrollXLoad){$xeTable.triggerScrollXEvent(evnt);}$xeTable.handleScrollEvent(evnt,isRollY,isRollX,scrollTop,scrollLeft,{type:'header',fixed:fixedType});},triggerFooterScrollEvent(evnt,fixedType){const $xeTable=this;const reactData=$xeTable;const internalData=$xeTable;const{scrollXLoad}=reactData;const{elemStore,intoRunScroll,inWheelScroll,inVirtualScroll,inHeaderScroll,inBodyScroll}=internalData;if(inWheelScroll||inVirtualScroll||inHeaderScroll||inBodyScroll){return;}const xHandleEl=$xeTable.$refs.refScrollXHandleElem;const yHandleEl=$xeTable.$refs.refScrollYHandleElem;const bodyScrollElem=getRefElem(elemStore['main-body-scroll']);const headerScrollElem=getRefElem(elemStore['main-header-scroll']);const footerScrollElem=getRefElem(elemStore['main-footer-scroll']);if(intoRunScroll){return;}if(!footerScrollElem){return;}if(!xHandleEl){return;}if(!yHandleEl){return;}const scrollTop=yHandleEl.scrollTop;const scrollLeft=footerScrollElem.scrollLeft;const isRollX=true;const isRollY=false;internalData.inFooterScroll=true;setScrollLeft(xHandleEl,scrollLeft);setScrollLeft(headerScrollElem,scrollLeft);setScrollLeft(bodyScrollElem,scrollLeft);if(scrollXLoad){$xeTable.triggerScrollXEvent(evnt);}$xeTable.handleScrollEvent(evnt,isRollY,isRollX,scrollTop,scrollLeft,{type:'footer',fixed:fixedType});},triggerBodyWheelEvent(evnt){const $xeTable=this;const $xeParentTable=$xeTable.$xeParentTable;const tableProps=$xeTable;const reactData=$xeTable;const internalData=$xeTable;const{target,deltaY,deltaX,shiftKey}=evnt;if(target&&/^textarea$/i.test(target.tagName)){return;}// 如果滚轮未移动或者触摸板未变化位置
 if(!deltaY&&!deltaX){return;}const{highlightHoverRow}=tableProps;const{scrollXLoad,scrollYLoad,overflowX,overflowY,expandColumn}=reactData;const leftFixedWidth=$xeTable.computeLeftFixedWidth;const rightFixedWidth=$xeTable.computeRightFixedWidth;const{elemStore,lastScrollTop,lastScrollLeft}=internalData;const rowOpts=$xeTable.computeRowOpts;const scrollXVisible=$xeTable.computeScrollXVisible;const scrollYVisible=$xeTable.computeScrollYVisible;const xHandleEl=$xeTable.$refs.refScrollXHandleElem;const yHandleEl=$xeTable.$refs.refScrollYHandleElem;const leftScrollElem=getRefElem(elemStore['left-body-scroll']);const headerScrollElem=getRefElem(elemStore['main-header-scroll']);const bodyScrollElem=getRefElem(elemStore['main-body-scroll']);const footerScrollElem=getRefElem(elemStore['main-footer-scroll']);const rightScrollElem=getRefElem(elemStore['right-body-scroll']);const rowExpandEl=$xeTable.$refs.refRowExpandElem;if(!bodyScrollElem){return;}const wheelSpeed=getWheelSpeed(internalData.lastSTime);const deltaTop=shiftKey?0:deltaY*wheelSpeed;const deltaLeft=(shiftKey?deltaX||deltaY:deltaX)*wheelSpeed;const currScrollTop=bodyScrollElem.scrollTop;const currScrollLeft=bodyScrollElem.scrollLeft;const scrollTop=Math.max(0,currScrollTop+deltaTop);const scrollLeft=Math.max(0,currScrollLeft+deltaLeft);const isRollX=overflowX&&scrollLeft!==lastScrollLeft;const isRollY=overflowY&&scrollTop!==lastScrollTop;if(isRollX){// 如果禁用滚动
 if(scrollXVisible===false||scrollXVisible==='hidden'){evnt.preventDefault();return;}}if(isRollY){// 如果禁用滚动
 if(scrollYVisible===false||scrollYVisible==='hidden'){evnt.preventDefault();return;}const isTopWheel=deltaTop<0;// 如果滚动位置已经是顶部或底部，则不需要触发
@@ -13114,6 +13113,7 @@ function filterCheckAllEvent($xeFilterPanel, evnt, value) {
      * Publish methods
      *************************/
     renderOptions(h, filterRender, compConf) {
+      const VxeUIScrollbarComponent = core_.VxeUI.getComponent('VxeScrollbar');
       const $xeFilterPanel = this;
       const props = $xeFilterPanel;
       const $xeTable = $xeFilterPanel.$xeTable;
@@ -13122,12 +13122,15 @@ function filterCheckAllEvent($xeFilterPanel, evnt, value) {
         filterStore
       } = props;
       const {
-        column,
-        maxHeight
+        column
       } = filterStore;
       if (!column) {
         return [];
       }
+      const filterOpts = $xeTable.computeFilterOpts;
+      const {
+        useScrollbar
+      } = filterOpts;
       const {
         filterMultiple,
         filters,
@@ -13143,49 +13146,19 @@ function filterCheckAllEvent($xeFilterPanel, evnt, value) {
       const rtFilter = compConf ? compConf.renderTableFilter || compConf.renderFilter : null;
       if (filterSlot) {
         return [h('div', {
-          class: 'vxe-table--filter-template',
-          style: maxHeight ? {
-            maxHeight: toCssUnit(maxHeight)
-          } : {}
+          class: 'vxe-table--filter-template'
         }, $xeTable.callSlot(filterSlot, params, h))];
       } else if (filterRender && rtFilter) {
         return [h('div', {
-          class: 'vxe-table--filter-template',
-          style: maxHeight ? {
-            maxHeight: toCssUnit(maxHeight)
-          } : {}
+          class: 'vxe-table--filter-template'
         }, getSlotVNs(rtFilter.call($xeTable, h, filterRender, params)))];
       }
       const isAllChecked = filterMultiple ? filterStore.isAllSelected : !filterOptions.some(item => item._checked);
       const isAllIndeterminate = filterMultiple && filterStore.isIndeterminate;
-      return [h('ul', {
-        class: 'vxe-table--filter-header'
-      }, [h('li', {
-        class: ['vxe-table--filter-option', {
-          'is--checked': isAllChecked,
-          'is--indeterminate': isAllIndeterminate
-        }],
-        attrs: {
-          title: filter_panel_getI18n(filterMultiple ? 'vxe.table.allTitle' : 'vxe.table.allFilter')
-        },
-        on: {
-          click: evnt => {
-            $xeFilterPanel.changeAllOption(evnt, !filterStore.isAllSelected);
-          }
-        }
-      }, (filterMultiple ? [h('span', {
-        class: ['vxe-checkbox--icon', isAllIndeterminate ? filter_panel_getIcon().TABLE_CHECKBOX_INDETERMINATE : isAllChecked ? filter_panel_getIcon().TABLE_CHECKBOX_CHECKED : filter_panel_getIcon().TABLE_CHECKBOX_UNCHECKED]
-      })] : []).concat([h('span', {
-        class: 'vxe-checkbox--label'
-      }, filter_panel_getI18n('vxe.table.allFilter'))]))]), h('ul', {
-        class: 'vxe-table--filter-body',
-        style: maxHeight ? {
-          maxHeight: toCssUnit(maxHeight)
-        } : {}
-      }, filterOptions.map(item => {
+      const optVNs = filterOptions.map(item => {
         const isChecked = item._checked;
         const isIndeterminate = false;
-        return h('li', {
+        return h('div', {
           class: ['vxe-table--filter-option', {
             'is--checked': isChecked
           }],
@@ -13202,7 +13175,37 @@ function filterCheckAllEvent($xeFilterPanel, evnt, value) {
         })] : []).concat([h('span', {
           class: 'vxe-checkbox--label'
         }, formatText(item.label, 1))]));
-      }))];
+      });
+      return [h('div', {
+        class: 'vxe-table--filter-header'
+      }, [h('div', {
+        class: ['vxe-table--filter-option', {
+          'is--checked': isAllChecked,
+          'is--indeterminate': isAllIndeterminate
+        }],
+        attrs: {
+          title: filter_panel_getI18n(filterMultiple ? 'vxe.table.allTitle' : 'vxe.table.allFilter')
+        },
+        on: {
+          click: evnt => {
+            $xeFilterPanel.changeAllOption(evnt, !filterStore.isAllSelected);
+          }
+        }
+      }, (filterMultiple ? [h('span', {
+        class: ['vxe-checkbox--icon', isAllIndeterminate ? filter_panel_getIcon().TABLE_CHECKBOX_INDETERMINATE : isAllChecked ? filter_panel_getIcon().TABLE_CHECKBOX_CHECKED : filter_panel_getIcon().TABLE_CHECKBOX_UNCHECKED]
+      })] : []).concat([h('span', {
+        class: 'vxe-checkbox--label'
+      }, filter_panel_getI18n('vxe.table.allFilter'))]))]), useScrollbar ? h(VxeUIScrollbarComponent, {
+        class: 'vxe-table--scrollbar-filter-body',
+        props: {
+          viewClassName: 'vxe-table--scrollbar-filter-body-view'
+        },
+        scopedSlots: {
+          default: () => optVNs
+        }
+      }) : h('div', {
+        class: 'vxe-table--filter-body'
+      }, optVNs)];
     },
     renderFooter(h) {
       const $xeFilterPanel = this;
@@ -14421,7 +14424,8 @@ function updatePopupStyle($xeTable) {
   const internalData = $xeTable;
   const $xeGGWrapper = $xeGrid || $xeGantt;
   const {
-    filterStore
+    filterStore,
+    scrollbarHeight
   } = reactData;
   const {
     elemStore
@@ -14452,8 +14456,6 @@ function updatePopupStyle($xeTable) {
   if (!filterWrapperElem) {
     return $xeTable.$nextTick();
   }
-  const filterHeadElem = filterWrapperElem.querySelector('.vxe-table--filter-header');
-  const filterFootElem = filterWrapperElem.querySelector('.vxe-table--filter-footer');
   /**
    * 是否显示筛选按钮图标
    * 如果不存在图标，则相对单元格居中显示
@@ -14491,9 +14493,9 @@ function updatePopupStyle($xeTable) {
     } else {
       const filterWidth = filterWrapperElem.offsetWidth;
       const centerWidth = targetEl ? filterWidth / 2 : (filterWidth - column.renderWidth) / 2;
-      maxHeight = Math.max(40, tableEl.clientHeight - top - (filterHeadElem ? filterHeadElem.clientHeight : 0) - (filterFootElem ? filterFootElem.clientHeight : 0) - 14);
       left = btnRect.left - tableRect.left - centerWidth;
       top = btnRect.top - tableRect.top + currEl.clientHeight;
+      maxHeight = Math.max(40, tableEl.clientHeight - top - scrollbarHeight);
       if (left < 1) {
         left = 1;
       } else if (left > tableEl.clientWidth - filterWidth - 1) {
@@ -14514,7 +14516,6 @@ function updatePopupStyle($xeTable) {
     if (zIndex) {
       panelStyle.zIndex = zIndex;
     }
-    filterStore.style = panelStyle;
     // 筛选面板是自适应表格高度
     if (compConf ? !compConf.tableFilterAutoHeight : false) {
       maxHeight = 0;
@@ -14523,8 +14524,8 @@ function updatePopupStyle($xeTable) {
         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 $xeTable.$nextTick().then(() => {
@@ -21270,6 +21271,27 @@ const {
   globalMixins: table_globalMixins,
   renderEmptyElement: table_renderEmptyElement
 } = core_.VxeUI;
+function bindScrollbarResize($xeTable) {
+  const internalData = $xeTable;
+  const {
+    elemStore
+  } = internalData;
+  const isVScrollbar = $xeTable.computeIsVScrollbar;
+  if (isVScrollbar) {
+    const el = $xeTable.$refs.refElem;
+    const viewInnerEl = getRefElem(elemStore['main-body-table']);
+    const scrollObserver = table_globalResize.create(() => {
+      $xeTable.reScrollFlag++;
+    });
+    if (el) {
+      scrollObserver.observe(el);
+    }
+    if (viewInnerEl) {
+      scrollObserver.observe(viewInnerEl);
+    }
+    internalData.scrollObserver = scrollObserver;
+  }
+}
 function handleUpdateMergeBodyCells($xeTable, merges) {
   const internalData = $xeTable;
   internalData.mergeBodyList = [];
@@ -21769,18 +21791,15 @@ function renderNativeBody(h, $xeTable) {
   }, scrollbarYToLeft ? [renderScrollY(h, $xeTable), renderViewport(h, $xeTable)] : [renderViewport(h, $xeTable), renderScrollY(h, $xeTable)]);
 }
 function renderVirtualBody(h, $xeTable) {
-  const props = $xeTable;
   const reactData = $xeTable;
   const internalData = $xeTable;
   const $xeGantt = $xeTable.$xeGantt;
   const $xeGanttView = internalData.xeGanttView;
-  const {
-    useScrollbar
-  } = props;
   const {
     xThumbWidth,
     yThumbHeight
   } = reactData;
+  const isVScrollbar = $xeTable.computeIsVScrollbar;
   const scrollbarOpts = $xeTable.computeScrollbarOpts;
   const scrollXAutoHide = $xeTable.computeScrollXAutoHide;
   const scrollYAutoHide = $xeTable.computeScrollYAutoHide;
@@ -21794,10 +21813,10 @@ function renderVirtualBody(h, $xeTable) {
   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
     }]
@@ -22243,11 +22262,9 @@ function renderVirtualBody(h, $xeTable) {
     computeTooltipOpts() {
       const $xeTable = this;
       const props = $xeTable;
-      const {
-        useScrollbar
-      } = props;
+      const isVScrollbar = $xeTable.computeIsVScrollbar;
       return Object.assign({
-        useScrollbar
+        useScrollbar: isVScrollbar
       }, table_getConfig().tooltip, table_getConfig().table.tooltipConfig, props.tooltipConfig);
     },
     tipConfig() {
@@ -22319,7 +22336,10 @@ function renderVirtualBody(h, $xeTable) {
     computeFilterOpts() {
       const $xeTable = this;
       const props = $xeTable;
-      return Object.assign({}, table_getConfig().table.filterConfig, props.filterConfig);
+      const isVScrollbar = $xeTable.computeIsVScrollbar;
+      return Object.assign({
+        useScrollbar: isVScrollbar
+      }, table_getConfig().table.filterConfig, props.filterConfig);
     },
     computeFloatingFilterOpts() {
       const $xeTable = this;
@@ -23012,34 +23032,37 @@ function renderVirtualBody(h, $xeTable) {
       const $xeTable = this;
       $xeTable.reLayoutFlag++;
     },
+    computeIsVScrollbar() {
+      const $xeTable = this;
+      $xeTable.$nextTick(() => {
+        bindScrollbarResize($xeTable);
+        $xeTable.$nextTick(() => {
+          $xeTable.reLayoutFlag++;
+        });
+      });
+    },
     computeScrollbarXToTop() {
       const $xeTable = this;
-      $xeTable.reScrollFlag++;
       $xeTable.reLayoutFlag++;
     },
     computeScrollbarYToLeft() {
       const $xeTable = this;
-      $xeTable.reScrollFlag++;
       $xeTable.reLayoutFlag++;
     },
     computeScrollXVisible() {
       const $xeTable = this;
-      $xeTable.reScrollFlag++;
       $xeTable.reLayoutFlag++;
     },
     computeScrollYVisible() {
       const $xeTable = this;
-      $xeTable.reScrollFlag++;
       $xeTable.reLayoutFlag++;
     },
     computeScrollXHeight() {
       const $xeTable = this;
-      $xeTable.reScrollFlag++;
       $xeTable.reLayoutFlag++;
     },
     computeScrollYWidth() {
       const $xeTable = this;
-      $xeTable.reScrollFlag++;
       $xeTable.reLayoutFlag++;
     },
     computeCellHeitht() {
@@ -23048,17 +23071,14 @@ function renderVirtualBody(h, $xeTable) {
     },
     reLayoutFlag() {
       const $xeTable = this;
-      $xeTable.$nextTick(() => {
+      $xeTable.$nextTick().then(() => {
         $xeTable.recalculate(true);
       });
     },
     reScrollFlag() {
       const $xeTable = this;
-      $xeTable.$nextTick(() => {
+      $xeTable.updateScrollbar().then(() => {
         $xeTable.updateScrollbar();
-        $xeTable.$nextTick(() => {
-          $xeTable.updateScrollbar();
-        });
       });
     },
     footerData() {
@@ -23523,7 +23543,6 @@ function renderVirtualBody(h, $xeTable) {
     }
     $xeTable.$nextTick(() => {
       const {
-        useScrollbar,
         autoResize
       } = props;
       const {
@@ -23537,6 +23556,7 @@ function renderVirtualBody(h, $xeTable) {
         showHeaderOverflow,
         showFooterOverflow
       } = props;
+      const isVScrollbar = $xeTable.computeIsVScrollbar;
       const tooltipOpts = $xeTable.computeTooltipOpts;
       const headerTooltipOpts = $xeTable.computeHeaderTooltipOpts;
       const footerTooltipOpts = $xeTable.computeFooterTooltipOpts;
@@ -23577,7 +23597,7 @@ function renderVirtualBody(h, $xeTable) {
         }
       }
       const el = $xeTable.$refs.refElem;
-      if (useScrollbar) {
+      if (isVScrollbar) {
         const viewInnerEl = getRefElem(elemStore['main-body-table']);
         const scrollObserver = table_globalResize.create(() => {
           $xeTable.reScrollFlag++;
@@ -23705,7 +23725,6 @@ function renderVirtualBody(h, $xeTable) {
     const {
       loading,
       stripe,
-      useScrollbar,
       showHeader,
       height,
       treeConfig,
@@ -23738,6 +23757,7 @@ function renderVirtualBody(h, $xeTable) {
       leftList,
       rightList
     } = columnStore;
+    const isVScrollbar = $xeTable.computeIsVScrollbar;
     const loadingSlot = slots.loading;
     const tipSlots = {
       header: slots.headerTooltip || slots['header-tooltip'],
@@ -23781,7 +23801,7 @@ function renderVirtualBody(h, $xeTable) {
     }
     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,
@@ -23842,7 +23862,7 @@ function renderVirtualBody(h, $xeTable) {
     })]), h('div', {
       key: 'tw',
       class: 'vxe-table--render-wrapper'
-    }, useScrollbar ? [renderVirtualBody(h, $xeTable)] : scrollbarXToTop ? [renderScrollX(h, $xeTable), renderNativeBody(h, $xeTable)] : [renderNativeBody(h, $xeTable), renderScrollX(h, $xeTable)]),
+    }, isVScrollbar ? [renderVirtualBody(h, $xeTable)] : scrollbarXToTop ? [renderScrollX(h, $xeTable), renderNativeBody(h, $xeTable)] : [renderNativeBody(h, $xeTable), renderScrollX(h, $xeTable)]),
     /**
      * 空数据
      */
@@ -23988,7 +24008,7 @@ function renderVirtualBody(h, $xeTable) {
       props: {
         isArrow: false,
         enterable: false,
-        useScrollbar
+        useScrollbar: isVScrollbar
       }
     }) : table_renderEmptyElement($xeTable),
     /**
@@ -24079,7 +24099,7 @@ function renderVirtualBody(h, $xeTable) {
         enterable: validTipConfig.enterable,
         enterDelay: validTipConfig.enterDelay,
         leaveDelay: validTipConfig.leaveDelay,
-        useScrollbar
+        useScrollbar: validTipConfig.useScrollbar
       }
     }) : table_renderEmptyElement($xeTable)])]);
   },