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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "3.25.0-beta.3",
+  "version": "3.25.0-beta.4",
   "description": "A PC-end table component based on Vxe UI, supporting copy-paste, data pivot table, and high-performance virtual list table solution.",
   "scripts": {
     "update": "npm install --legacy-peer-deps",
@@ -65,7 +65,7 @@
     "vue-i18n": "^8.15.1",
     "vue-router": "^3.5.1",
     "vue-template-compiler": "2.6.14",
-    "vxe-pc-ui": "3.20.8"
+    "vxe-pc-ui": "3.20.9"
   },
   "vetur": {
     "tags": "helper/vetur/tags.json",

package/packages/grid/src/grid.ts

@@ -10,7 +10,7 @@ import { tableProps } from '../../table/src/props'
 import VxeTableComponent from '../../table'
 import VxeToolbarComponent from '../../toolbar'
 
-import type { VxeFormItemProps, VxeFormDefines, VxeComponentStyleType, VxeComponentSizeType, ValueOf, VxeFormInstance, VxeFormItemPropTypes, VxePagerInstance } from 'vxe-pc-ui'
+import type { VxeFormItemProps, VxeFormDefines, VxeComponentStyleType, VxeComponentSizeType, VxeComponentIsVScrollbar, ValueOf, VxeFormInstance, VxeFormItemPropTypes, VxePagerInstance } from 'vxe-pc-ui'
 import type { GridReactData, VxeTablePropTypes, VxeGridConstructor, VxeToolbarPropTypes, VxeToolbarInstance, VxeGridPropTypes, VxeTableMethods, GridInternalData, VxeGridEmits, VxePagerDefines, VxeTableConstructor, VxeTableDefines, VxeTablePrivateMethods, TableInternalData, VxeTableProps, VxeGridDefines } from '../../../types'
 
 const { warnLog, errLog } = createComponentLog('grid')
@@ -139,6 +139,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
   computed: {
     ...({} as {
       computeSize(): VxeComponentSizeType
+      computeIsVScrollbar(): VxeComponentIsVScrollbar
     }),
     isRespMsg () {
       const $xeGrid = this

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

@@ -17,7 +17,7 @@ function updatePopupStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethod
   const internalData = $xeTable as unknown as TableInternalData
   const $xeGGWrapper = $xeGrid || $xeGantt
 
-  const { filterStore } = reactData
+  const { filterStore, scrollbarHeight } = reactData
   const { elemStore } = internalData
   const { column, targetEl } = filterStore
   if (!column) {
@@ -39,8 +39,6 @@ function updatePopupStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethod
   if (!filterWrapperElem) {
     return $xeTable.$nextTick()
   }
-  const filterHeadElem = filterWrapperElem.querySelector<HTMLDivElement>('.vxe-table--filter-header')
-  const filterFootElem = filterWrapperElem.querySelector<HTMLDivElement>('.vxe-table--filter-footer')
 
   /**
    * 是否显示筛选按钮图标
@@ -80,9 +78,9 @@ function updatePopupStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethod
     } 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)) {
@@ -104,7 +102,6 @@ function updatePopupStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethod
     if (zIndex) {
       panelStyle.zIndex = zIndex
     }
-    filterStore.style = panelStyle
     // 筛选面板是自适应表格高度
     if (compConf ? !compConf.tableFilterAutoHeight : false) {
       maxHeight = 0
@@ -113,8 +110,8 @@ function updatePopupStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethod
         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(() => {

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

@@ -2,7 +2,7 @@ import { CreateElement, PropType } from 'vue'
 import { defineVxeComponent } from '../../../ui/src/comp'
 import { VxeUI } from '../../../ui'
 import { formatText, isEnableConf } from '../../../ui/src/utils'
-import { getPropClass, toCssUnit } from '../../../ui/src/dom'
+import { getPropClass } from '../../../ui/src/dom'
 import { getSlotVNs } from '../../../ui/src/vn'
 import { createComponentLog } from '../../../ui/src/log'
 
@@ -142,16 +142,20 @@ export default /* define-vxe-component start */ defineVxeComponent({
      *************************/
 
     renderOptions (h: CreateElement, filterRender: VxeColumnPropTypes.FilterRender | null, compConf: VxeGlobalRendererOptions | null) {
+      const VxeUIScrollbarComponent = VxeUI.getComponent('VxeScrollbar')
+
       const $xeFilterPanel = this
       const props = $xeFilterPanel
       const $xeTable = $xeFilterPanel.$xeTable
       const tableInternalData = $xeTable as unknown as TableInternalData
 
       const { filterStore } = props
-      const { column, maxHeight } = filterStore
+      const { column } = filterStore
       if (!column) {
         return []
       }
+      const filterOpts = $xeTable.computeFilterOpts
+      const { useScrollbar } = filterOpts
       const { filterMultiple, filters, slots } = column
       const filterOptions = (filters || []) as VxeTableDefines.FilterOption[]
       const filterSlot = slots ? slots.filter : null
@@ -160,33 +164,52 @@ export default /* define-vxe-component start */ 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, 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
+
+      const optVNs = filterOptions.map((item: any) => {
+        const isChecked = item._checked
+        const isIndeterminate = false
+        return h('div', {
+          class: ['vxe-table--filter-option', {
+            'is--checked': isChecked
+          }],
+          attrs: {
+            title: item.label
+          },
+          on: {
+            click: (evnt: MouseEvent) => {
+              ($xeFilterPanel as any).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
@@ -211,40 +234,19 @@ export default /* define-vxe-component start */ defineVxeComponent({
             }, getI18n('vxe.table.allFilter'))
           ]))
         ]),
-        h('ul', {
-          class: 'vxe-table--filter-body',
-          style: maxHeight
-            ? {
-                maxHeight: toCssUnit(maxHeight)
-              }
-            : {}
-        }, filterOptions.map((item: any) => {
-          const isChecked = item._checked
-          const isIndeterminate = false
-          return h('li', {
-            class: ['vxe-table--filter-option', {
-              'is--checked': isChecked
-            }],
-            attrs: {
-              title: item.label
+        useScrollbar
+          ? h(VxeUIScrollbarComponent, {
+            class: 'vxe-table--scrollbar-filter-body',
+            props: {
+              viewClassName: 'vxe-table--scrollbar-filter-body-view'
             },
-            on: {
-              click: (evnt: MouseEvent) => {
-                ($xeFilterPanel as any).changeOption(evnt, !item._checked, item)
-              }
+            scopedSlots: {
+              default: () => optVNs
             }
-          }, (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))
-          ]))
-        }))
+          })
+          : h('div', {
+            class: 'vxe-table--filter-body'
+          }, optVNs)
       ]
     },
     renderFooter (h: CreateElement) {

package/packages/table/src/methods.ts

@@ -3242,6 +3242,7 @@ function handleRecalculateStyle ($xeTable: VxeTableConstructor & VxeTablePrivate
     if (reFull) {
       updateTreeLineStyle($xeTable)
     }
+    $xeTable.updateScrollbar()
     internalData.rceRunTime = Date.now()
     if (reFull) {
       return computeScrollLoad($xeTable)
@@ -10275,8 +10276,15 @@ const tableMethods: any = {
    */
   updateScrollbar () {
     const $xeTable = this
-    $xeTable.updateThumbSize()
-    $xeTable.updateThumbOffset()
+
+    const isVScrollbar = $xeTable.computeIsVScrollbar
+    if (isVScrollbar) {
+      return $xeTable.$nextTick().then(() => {
+        $xeTable.updateThumbSize()
+        $xeTable.updateThumbOffset()
+      })
+    }
+    return Promise.resolve()
   },
   /**
    * 表头单元格按下事件
@@ -12820,12 +12828,11 @@ const tableMethods: any = {
   },
   triggerBodyScrollEvent (evnt: Event, fixedType: '' | 'left' | 'right') {
     const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
-    const props = $xeTable
     const reactData = $xeTable as unknown as TableReactData
     const internalData = $xeTable as unknown as TableInternalData
 
-    const { useScrollbar } = props
     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
@@ -12844,7 +12851,7 @@ const tableMethods: any = {
     if (!bodyScrollElem) {
       return
     }
-    if (!useScrollbar) {
+    if (!isVScrollbar) {
       if (!xHandleEl) {
         return
       }

package/packages/table/src/table.ts

@@ -33,6 +33,27 @@ const { warnLog, errLog } = createComponentLog('table')
 
 const { getConfig, getIcon, getI18n, renderer, globalResize, globalEvents, domUtils, globalMixins, renderEmptyElement } = VxeUI
 
+function bindScrollbarResize ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
+  const internalData = $xeTable as unknown as TableInternalData
+
+  const { elemStore } = internalData
+  const isVScrollbar = $xeTable.computeIsVScrollbar
+  if (isVScrollbar) {
+    const el = $xeTable.$refs.refElem as HTMLDivElement
+    const viewInnerEl = getRefElem(elemStore['main-body-table'])
+    const scrollObserver = globalResize.create(() => {
+      ($xeTable as any).reScrollFlag++
+    })
+    if (el) {
+      scrollObserver.observe(el)
+    }
+    if (viewInnerEl) {
+      scrollObserver.observe(viewInnerEl)
+    }
+    internalData.scrollObserver = scrollObserver
+  }
+}
+
 function handleUpdateMergeBodyCells ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, merges: VxeTableDefines.MergeOptions | VxeTableDefines.MergeOptions[]) {
   const internalData = $xeTable as unknown as TableInternalData
 
@@ -564,14 +585,13 @@ function renderNativeBody (h: CreateElement, $xeTable: VxeTableConstructor & Vxe
 }
 
 function renderVirtualBody (h: CreateElement, $xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
-  const props = $xeTable
   const reactData = $xeTable as unknown as TableReactData
   const internalData = $xeTable as unknown as TableInternalData
   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
@@ -586,10 +606,10 @@ function renderVirtualBody (h: CreateElement, $xeTable: VxeTableConstructor & Vx
   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
     }]
@@ -1091,8 +1111,8 @@ export default {
       const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
       const props = $xeTable
 
-      const { useScrollbar } = props
-      return Object.assign({ useScrollbar }, getConfig().tooltip, getConfig().table.tooltipConfig, props.tooltipConfig)
+      const isVScrollbar = $xeTable.computeIsVScrollbar
+      return Object.assign({ useScrollbar: isVScrollbar }, getConfig().tooltip, getConfig().table.tooltipConfig, props.tooltipConfig)
     },
     tipConfig () {
       return { ...this.tooltipOpts }
@@ -1162,7 +1182,8 @@ export default {
       const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
       const props = $xeTable
 
-      return Object.assign({}, getConfig().table.filterConfig, props.filterConfig)
+      const isVScrollbar = $xeTable.computeIsVScrollbar
+      return Object.assign({ useScrollbar: isVScrollbar }, getConfig().table.filterConfig, props.filterConfig)
     },
     computeFloatingFilterOpts () {
       const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
@@ -1783,40 +1804,44 @@ export default {
 
       $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 () {
@@ -1827,18 +1852,15 @@ export default {
     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()
-        })
       })
     },
 
@@ -2319,7 +2341,7 @@ export default {
     }
 
     $xeTable.$nextTick(() => {
-      const { useScrollbar, autoResize } = props
+      const { autoResize } = props
       const { elemStore } = internalData
 
       // 使用已安装的组件，如果未安装则不渲染
@@ -2327,6 +2349,7 @@ export default {
       const VxeUITooltipComponent = VxeUI.getComponent('VxeTooltip')
 
       const { showOverflow, showHeaderOverflow, showFooterOverflow } = props
+      const isVScrollbar = $xeTable.computeIsVScrollbar
       const tooltipOpts = $xeTable.computeTooltipOpts
       const headerTooltipOpts = $xeTable.computeHeaderTooltipOpts
       const footerTooltipOpts = $xeTable.computeFooterTooltipOpts
@@ -2368,7 +2391,7 @@ export default {
       }
 
       const el = $xeTable.$refs.refElem as HTMLDivElement
-      if (useScrollbar) {
+      if (isVScrollbar) {
         const viewInnerEl = getRefElem(elemStore['main-body-table'])
         const scrollObserver = globalResize.create(() => {
           $xeTable.reScrollFlag++
@@ -2498,9 +2521,10 @@ export default {
 
     const { xID } = $xeTable
 
-    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 { leftList, rightList } = columnStore
+    const isVScrollbar = $xeTable.computeIsVScrollbar
     const loadingSlot = slots.loading
     const tipSlots = {
       header: slots.headerTooltip || slots['header-tooltip'],
@@ -2546,7 +2570,7 @@ export default {
     }
     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,
@@ -2614,7 +2638,7 @@ export default {
       h('div', {
         key: 'tw',
         class: 'vxe-table--render-wrapper'
-      }, useScrollbar
+      }, isVScrollbar
         ? [renderVirtualBody(h, $xeTable)]
         : (
             scrollbarXToTop
@@ -2805,7 +2829,7 @@ export default {
             props: {
               isArrow: false,
               enterable: false,
-              useScrollbar
+              useScrollbar: isVScrollbar
             }
           })
           : renderEmptyElement($xeTable),
@@ -2877,7 +2901,7 @@ export default {
               enterable: validTipConfig.enterable,
               enterDelay: validTipConfig.enterDelay,
               leaveDelay: validTipConfig.leaveDelay,
-              useScrollbar
+              useScrollbar: validTipConfig.useScrollbar
             }
           })
           : renderEmptyElement($xeTable)

package/packages/table/src/util.ts

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

package/packages/ui/index.ts

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

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

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