vxe-table 4.23.7 → 4.23.9

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

@@ -1,501 +1,519 @@
-import { nextTick } from 'vue'
-import XEUtils from 'xe-utils'
-import { VxeUI } from '../../../ui'
-import { toFilters, handleFieldOrColumn, getRefElem } from '../../src/util'
-import { toCssUnit, triggerEvent, updatePanelPlacement } from '../../../ui/src/dom'
-import { hasEnableConf, isEnableConf } from '../../../ui/src/utils'
-
-import type { TableFilterMethods, TableFilterPrivateMethods, VxeTableDefines } from '../../../../types'
-
-const { renderer, hooks } = VxeUI
-
-const tableFilterMethodKeys: (keyof TableFilterMethods)[] = ['openFilter', 'setFilter', 'clearFilter', 'saveFilter', 'saveFilterByEvent', 'saveFilterPanel', 'saveFilterPanelByEvent', 'resetFilter', 'resetFilterByEvent', 'resetFilterPanel', 'resetFilterPanelByEvent', 'getCheckedFilters', 'updateFilterOptionStatus']
-
-const sourceType = 'table'
-
-hooks.add('tableFilterModule', {
-  setupTable ($xeTable) {
-    const $xeGrid = $xeTable.xeGrid
-    const $xeGantt = $xeTable.xeGantt
-    const $xeGGWrapper = $xeGrid || $xeGantt
-
-    const { props, reactData, internalData } = $xeTable
-    const { refElem, refTableFilter } = $xeTable.getRefMaps()
-    const { computeFilterOpts, computeMouseOpts, computeRendererOpts } = $xeTable.getComputeMaps()
-
-    const updatePopupStyle = () => {
-      const { filterStore, scrollbarHeight } = reactData
-      const { elemStore } = internalData
-      const { column, targetEl } = filterStore
-      if (!column) {
-        return nextTick()
-      }
-      const tableEl = refElem.value
-      const filterOpts = computeFilterOpts.value
-      const rendererOpts = computeRendererOpts.value
-      const { maxHeight: customMaxHeight, transfer, zIndex } = filterOpts
-      const filterRender = column ? column.filterRender : null
-      const compConf = filterRender && isEnableConf(filterRender) && filterRender.name ? (rendererOpts[filterRender.name] || renderer.get(filterRender.name)) : null
-
-      const headerScrollElem = getRefElem(elemStore['main-header-scroll'])
-      if (!headerScrollElem) {
-        return nextTick()
-      }
-      const tableFilter = refTableFilter.value
-      const filterWrapperElem = tableFilter ? tableFilter.getRefMaps().refElem.value as HTMLDivElement : null
-      if (!filterWrapperElem) {
-        return nextTick()
-      }
-
-      /**
-       * 是否显示筛选按钮图标
-       * 如果不存在图标，则相对单元格居中显示
-       */
-      const handleStyle = () => {
-        let currEl = targetEl
-        if (!targetEl) {
-          const headerWrapperElem = getRefElem(elemStore[`${column.fixed || 'main'}-header-wrapper`] || elemStore['main-header-wrapper'])
-          const colEl = headerWrapperElem ? headerWrapperElem.querySelector<HTMLDivElement>(`.vxe-header--column.${column.id}`) : null
-          if (colEl) {
-            currEl = colEl
-          }
-        }
-        if (!currEl) {
-          return nextTick()
-        }
-
-        const btnRect = currEl.getBoundingClientRect()
-        const tableRect = tableEl.getBoundingClientRect()
-        let left = 0
-        let top = 0
-        let maxHeight = 0
-        let panelStyle: Record<string, string | number> = {}
-        if (transfer) {
-          const ppObj = updatePanelPlacement(currEl, filterWrapperElem, {
-            defaultPlacement: 'bottom',
-            appendTo: '',
-            isMinWidth: false,
-            teleportTo: transfer
-          })
-          panelStyle = ppObj.style
-        } else {
-          const filterWidth = filterWrapperElem.offsetWidth
-          const centerWidth = targetEl ? filterWidth / 2 : ((filterWidth - column.renderWidth) / 2)
-          left = btnRect.left - tableRect.left - centerWidth
-          top = btnRect.top - tableRect.top + currEl.clientHeight
-          maxHeight = Math.max(40, tableEl.clientHeight - top - scrollbarHeight)
-          if (left < 1) {
-            left = 1
-          } else if (left > (tableEl.clientWidth - filterWidth - 1)) {
-            left = tableEl.clientWidth - filterWidth - 1
-          }
-          if ($xeGGWrapper) {
-            const wrapperEl = $xeGGWrapper.getRefMaps().refElem.value
-            if (wrapperEl) {
-              const wrapperRect = wrapperEl.getBoundingClientRect()
-              top += tableRect.top - wrapperRect.top
-            }
-          }
-          panelStyle = {
-            top: toCssUnit(top),
-            left: toCssUnit(left)
-          }
-        }
-        if (zIndex) {
-          panelStyle.zIndex = zIndex
-        }
-        // 筛选面板是自适应表格高度
-        if (compConf ? !compConf.tableFilterAutoHeight : false) {
-          maxHeight = 0
-        } else {
-          if (customMaxHeight) {
-            maxHeight = customMaxHeight > maxHeight ? maxHeight : customMaxHeight
-          }
-        }
-        panelStyle['--vxe-ui-vxe-table-filter-default-max-height'] = maxHeight ? toCssUnit(maxHeight) : 'none'
-        filterStore.style = panelStyle
-      }
-      handleStyle()
-      return nextTick().then(() => {
-        handleStyle()
-      })
-    }
-    const filterPrivateMethods: TableFilterPrivateMethods = {
-      checkFilterOptions () {
-        const { filterStore } = reactData
-        const { column } = filterStore
-        if (column) {
-          const filterOptions = (column.filters || []) as VxeTableDefines.FilterOption[]
-          filterStore.isAllSelected = filterOptions.every((item) => item._checked)
-          filterStore.isIndeterminate = !filterStore.isAllSelected && filterOptions.some((item) => item._checked)
-        }
-      },
-      handleOpenFilterColumn (evnt: MouseEvent, btnEl: HTMLDivElement | null, colEl: HTMLDivElement, column: VxeTableDefines.ColumnInfo, params: any) {
-        const { initStore, filterStore } = reactData
-        if (filterStore.column === column && filterStore.visible) {
-          filterStore.visible = false
-        } else {
-          $xeTable.handleFilterOptions(column)
-          internalData._currFilterParams = params
-          filterStore.targetEl = btnEl
-          filterStore.style = null
-          filterStore.visible = true
-          initStore.filter = true
-        }
-        nextTick().then(() => {
-          updatePopupStyle()
-        })
-        $xeTable.dispatchEvent('filter-visible', { column, field: column.field, property: column.field, filterList: $xeTable.getCheckedFilters(), visible: filterStore.visible }, evnt)
-      },
-      /**
-       * 点击筛选事件
-       * 当筛选图标被点击时触发
-       * 更新选项是否全部状态
-       * 打开筛选面板
-       * @param {Event} evnt 事件
-       * @param {ColumnInfo} column 列配置
-       * @param {Object} params 参数
-       */
-      triggerFilterEvent (evnt: MouseEvent, column: VxeTableDefines.ColumnInfo, params) {
-        const { elemStore } = internalData
-        const { fixed } = column
-        const headerWrapperElem = getRefElem(elemStore[`${fixed || 'main'}-header-wrapper`] || elemStore['main-header-wrapper'])
-        const btnElem = evnt.currentTarget as HTMLDivElement
-        const colEl = headerWrapperElem ? headerWrapperElem.querySelector<HTMLElement>(`.vxe-header--column.${column.id}`) : null
-        $xeTable.handleOpenFilterColumn(evnt, btnElem, colEl || btnElem, column, params)
-      },
-      handleClearFilter (column) {
-        if (column) {
-          const { filters, filterRender } = column
-          if (filters) {
-            const rendererOpts = computeRendererOpts.value
-            const compConf = isEnableConf(filterRender) && filterRender.name ? (rendererOpts[filterRender.name] || renderer.get(filterRender.name)) : null
-            const frMethod = column.filterResetMethod || (compConf ? (compConf.tableFilterResetMethod || compConf.filterResetMethod) : null)
-            filters.forEach((item: any) => {
-              item._checked = false
-              item.checked = false
-              if (!frMethod) {
-                item.data = XEUtils.clone(item.resetValue, true)
-              }
-            })
-            if (frMethod) {
-              frMethod({ options: filters as VxeTableDefines.FilterOption[], column, $table: $xeTable })
-            }
-          }
-        }
-      },
-      handleColumnConfirmFilter (column, evnt) {
-        const { mouseConfig } = props
-        const { scrollXLoad: oldScrollXLoad, scrollYLoad: oldScrollYLoad } = reactData
-        const filterOpts = computeFilterOpts.value
-        const mouseOpts = computeMouseOpts.value
-        const { field, filters } = column
-        const filterOptions = filters || []
-        const values: any[] = []
-        const datas: any[] = []
-        filterOptions.forEach((item) => {
-          if (item.checked) {
-            values.push(item.value)
-            datas.push(item.data)
-          }
-        })
-        const filterList = $xeTable.getCheckedFilters()
-        const params = { $table: $xeTable, $event: evnt as Event, column, field, property: field, values, datas, filters: filterList, filterList }
-        // 如果是服务端筛选，则跳过本地筛选处理
-        if (!filterOpts.remote) {
-          $xeTable.handleTableData(true)
-          $xeTable.checkSelectionStatus()
-        }
-        if (hasEnableConf(mouseConfig, mouseOpts) && mouseOpts.area && $xeTable.handleFilterEvent) {
-          $xeTable.handleFilterEvent(evnt as Event, params)
-        }
-        if (evnt) {
-          $xeTable.dispatchEvent('filter-change', params, evnt)
-        }
-        $xeTable.closeFilter()
-        return $xeTable.updateFooter().then(() => {
-          const { scrollXLoad, scrollYLoad } = reactData
-          if ((oldScrollXLoad || scrollXLoad) || (oldScrollYLoad || scrollYLoad)) {
-            if (oldScrollXLoad || scrollXLoad) {
-              $xeTable.updateScrollXSpace()
-            }
-            if (oldScrollYLoad || scrollYLoad) {
-              $xeTable.updateScrollYSpace()
-            }
-            return $xeTable.refreshScroll()
-          }
-        }).then(() => {
-          $xeTable.updateCellAreas()
-          return $xeTable.recalculate(true)
-        }).then(() => {
-          // 存在滚动行为未结束情况
-          setTimeout(() => $xeTable.recalculate(), 50)
-        })
-      },
-      /**
-       * 确认筛选
-       * 当筛选面板中的确定按钮被按下时触发
-       */
-      confirmFilterEvent (evnt, column) {
-        if (column) {
-          $xeTable.handleColumnConfirmFilter(column, evnt)
-        }
-      },
-      // （单选）筛选发生改变
-      handleFilterChangeRadioOption (evnt, checked, item) {
-        const { filterStore } = reactData
-        const { column } = filterStore
-        if (column) {
-          const filterOptions = (column.filters || []) as VxeTableDefines.FilterOption[]
-          filterOptions.forEach((option) => {
-            option._checked = false
-          })
-          item._checked = checked
-          $xeTable.checkFilterOptions()
-          $xeTable.handleFilterConfirmFilter(evnt, column)
-        }
-      },
-      // （多选）筛选发生改变
-      handleFilterChangeMultipleOption (evnt, checked, item) {
-        item._checked = checked
-        $xeTable.checkFilterOptions()
-      },
-      // 筛选发生改变
-      handleFilterChangeOption (evnt, checked, item) {
-        const { filterStore } = reactData
-        const { fullColumnIdData } = internalData
-        let column = filterStore.column
-        if (!column) {
-          const colRest = fullColumnIdData[item._colId]
-          if (colRest) {
-            column = colRest.column
-            filterStore.column = column
-          }
-        }
-        if (column) {
-          if (column.filterMultiple) {
-            $xeTable.handleFilterChangeMultipleOption(evnt, checked, item)
-          } else {
-            $xeTable.handleFilterChangeRadioOption(evnt, checked, item)
-          }
-        }
-      },
-      // 确认筛选
-      handleFilterConfirmFilter (evnt, column) {
-        if (column) {
-          const filterOptions = (column.filters || []) as VxeTableDefines.FilterOption[]
-          filterOptions.forEach((option) => {
-            option.checked = option._checked
-          })
-          $xeTable.confirmFilterEvent(evnt, column)
-        }
-      },
-      /**
-       * 重置筛选
-       * 当筛选面板中的重置按钮被按下时触发
-       */
-      handleFilterResetFilter (evnt: Event, column) {
-        if (column) {
-          $xeTable.handleClearFilter(column)
-          $xeTable.confirmFilterEvent(evnt, column)
-          if (evnt) {
-            $xeTable.dispatchEvent('clear-filter', { filterList: [] }, evnt)
-          }
-        }
-      },
-      handleFilterStyle () {
-        const { filterStore } = reactData
-        if (!filterStore.visible) {
-          return nextTick()
-        }
-        return updatePopupStyle()
-      }
-    }
-
-    const filterMethods: TableFilterMethods = {
-      /**
-       * 手动弹出筛选面板
-       * @param column
-       */
-      openFilter (fieldOrColumn) {
-        const column = handleFieldOrColumn($xeTable, fieldOrColumn)
-        if (column && column.filters) {
-          const { elemStore } = internalData
-          const { fixed, filters } = column
-          return $xeTable.scrollToColumn(column).then(() => {
-            const headerWrapperElem = getRefElem(elemStore[`${fixed || 'main'}-header-wrapper`] || elemStore['main-header-wrapper'])
-            if (headerWrapperElem) {
-              const filterBtnElem = headerWrapperElem.querySelector<HTMLElement>(`.vxe-header--column.${column.id} .vxe-cell--filter`)
-              if (filterBtnElem) {
-                triggerEvent(filterBtnElem, 'click')
-              } else {
-                const colEl = headerWrapperElem.querySelector<HTMLElement>(`.vxe-header--column.${column.id}`)
-                if (colEl) {
-                  let firstFilterOption: VxeTableDefines.FilterOption | null = null
-                  if (filters) {
-                    firstFilterOption = filters[0] as VxeTableDefines.FilterOption
-                  }
-                  const params = {
-                    $table: $xeTable,
-                    $grid: $xeGrid,
-                    $gantt: $xeGantt,
-                    $rowIndex: -1,
-                    column,
-                    columnIndex: $xeTable.getColumnIndex(column),
-                    $columnIndex: $xeTable.getVMColumnIndex(column),
-                    _columnIndex: $xeTable.getVTColumnIndex(column),
-                    firstFilterOption: firstFilterOption as VxeTableDefines.FilterOption,
-                    fixed,
-                    source: sourceType,
-                    type: 'header'
-                    // isHidden
-                    // hasFilter
-                  }
-                  $xeTable.handleOpenFilterColumn(new Event('click'), null, colEl, column, params)
-                }
-              }
-            }
-          })
-        }
-        return nextTick()
-      },
-      /**
-       * 修改筛选条件列表
-       * @param {ColumnInfo} fieldOrColumn 列或字段名
-       * @param {Array} options 选项
-       */
-      setFilter (fieldOrColumn, options, isUpdate) {
-        const { filterStore } = reactData
-        const column = handleFieldOrColumn($xeTable, fieldOrColumn)
-        if (column && column.filters) {
-          column.filters = toFilters(options || [], column.id)
-          if (isUpdate) {
-            return $xeTable.handleColumnConfirmFilter(column, null)
-          } else {
-            if (filterStore.visible) {
-              $xeTable.handleFilterOptions(column)
-            }
-          }
-        }
-        return nextTick()
-      },
-      /**
-       * 清空指定列的筛选条件
-       * 如果为空则清空所有列的筛选条件
-       * @param {String} fieldOrColumn 列或字段名
-       */
-      clearFilter (fieldOrColumn) {
-        const { filterStore } = reactData
-        const { tableFullColumn } = internalData
-        const filterOpts = computeFilterOpts.value
-        let column
-        if (fieldOrColumn) {
-          column = handleFieldOrColumn($xeTable, fieldOrColumn)
-          if (column) {
-            $xeTable.handleClearFilter(column)
-          }
-        } else {
-          tableFullColumn.forEach($xeTable.handleClearFilter)
-        }
-        if (!fieldOrColumn || column !== filterStore.column) {
-          Object.assign(filterStore, {
-            isAllSelected: false,
-            isIndeterminate: false,
-            style: null,
-            options: [],
-            column: null,
-            multiple: false,
-            visible: false
-          })
-        }
-        if (!filterOpts.remote) {
-          return $xeTable.updateData()
-        }
-        return nextTick()
-      },
-      saveFilter (fieldOrColumn) {
-        if (fieldOrColumn) {
-          const column = handleFieldOrColumn($xeTable, fieldOrColumn)
-          $xeTable.handleFilterConfirmFilter(null, column)
-        }
-        return nextTick()
-      },
-      saveFilterByEvent (evnt, fieldOrColumn) {
-        if (fieldOrColumn) {
-          const column = handleFieldOrColumn($xeTable, fieldOrColumn)
-          $xeTable.handleFilterConfirmFilter(evnt, column)
-        }
-        return nextTick()
-      },
-      resetFilter (fieldOrColumn) {
-        if (fieldOrColumn) {
-          const column = handleFieldOrColumn($xeTable, fieldOrColumn)
-          $xeTable.handleFilterResetFilter(null, column)
-        }
-        return nextTick()
-      },
-      resetFilterByEvent (evnt, fieldOrColumn) {
-        if (fieldOrColumn) {
-          const column = handleFieldOrColumn($xeTable, fieldOrColumn)
-          $xeTable.handleFilterResetFilter(evnt, column)
-        }
-        return nextTick()
-      },
-      saveFilterPanel () {
-        const { filterStore } = reactData
-        $xeTable.handleFilterConfirmFilter(null, filterStore.column || null)
-        return nextTick()
-      },
-      saveFilterPanelByEvent (evnt) {
-        const { filterStore } = reactData
-        $xeTable.handleFilterConfirmFilter(evnt, filterStore.column || null)
-        return nextTick()
-      },
-      resetFilterPanel () {
-        const { filterStore } = reactData
-        $xeTable.handleFilterResetFilter(null, filterStore.column || null)
-        return nextTick()
-      },
-      resetFilterPanelByEvent (evnt) {
-        const { filterStore } = reactData
-        $xeTable.handleFilterResetFilter(evnt, filterStore.column || null)
-        return nextTick()
-      },
-      getCheckedFilters () {
-        const { tableFullColumn } = internalData
-        const filterList: VxeTableDefines.FilterCheckedParams[] = []
-        tableFullColumn.forEach((column) => {
-          const { field, filters } = column
-          const filterOptions = filters || []
-          const valueList: any[] = []
-          const dataList: any[] = []
-          if (filterOptions) {
-            filterOptions.forEach((item) => {
-              if (item.checked) {
-                valueList.push(item.value)
-                dataList.push(item.data)
-              }
-            })
-            if (valueList.length) {
-              filterList.push({ column, field, property: field, values: valueList, datas: dataList })
-            }
-          }
-        })
-        return filterList
-      },
-      updateFilterOptionStatus (item: any, checked: boolean) {
-        item._checked = checked
-        item.checked = checked
-        return nextTick()
-      }
-    }
-
-    return { ...filterMethods, ...filterPrivateMethods }
-  },
-  setupGrid ($xeGrid) {
-    return $xeGrid.extendTableMethods(tableFilterMethodKeys)
-  },
-  setupGantt ($xeGantt) {
-    return $xeGantt.extendTableMethods(tableFilterMethodKeys)
-  }
-})
+import { nextTick } from 'vue'
+import XEUtils from 'xe-utils'
+import { VxeUI } from '@vxe-ui/core'
+import { toFilters, handleFieldOrColumn, getRefElem } from '../../src/util'
+import { toCssUnit, triggerEvent, updatePanelPlacement } from '../../../ui/src/dom'
+import { hasEnableConf, isEnableConf } from '../../../ui/src/utils'
+
+import type { TableFilterMethods, TableFilterPrivateMethods, VxeTableDefines } from '../../../../types'
+
+const { renderer, hooks } = VxeUI
+
+const tableFilterMethodKeys: (keyof TableFilterMethods)[] = [
+  'openFilter',
+  'setFilter',
+  'clearFilter',
+  'saveFilter',
+  'saveFilterByEvent',
+  'saveFilterPanel',
+  'saveFilterPanelByEvent',
+  'resetFilter',
+  'resetFilterByEvent',
+  'resetFilterPanel',
+  'resetFilterPanelByEvent',
+  'getCheckedFilters',
+  'updateFilterOptionStatus'
+]
+
+const sourceType = 'table'
+
+hooks.add('tableFilterModule', {
+  setupTable($xeTable) {
+    const $xeGrid = $xeTable.xeGrid
+    const $xeGantt = $xeTable.xeGantt
+    const $xeGGWrapper = $xeGrid || $xeGantt
+
+    const { props, reactData, internalData } = $xeTable
+    const { refElem, refTableFilter } = $xeTable.getRefMaps()
+    const { computeFilterOpts, computeMouseOpts, computeRendererOpts } = $xeTable.getComputeMaps()
+
+    const updatePopupStyle = () => {
+      const { filterStore, scrollbarHeight } = reactData
+      const { elemStore } = internalData
+      const { column, targetEl } = filterStore
+      if (!column) {
+        return nextTick()
+      }
+      const tableEl = refElem.value
+      const filterOpts = computeFilterOpts.value
+      const rendererOpts = computeRendererOpts.value
+      const { maxHeight: customMaxHeight, transfer, zIndex } = filterOpts
+      const filterRender = column ? column.filterRender : null
+      const compConf = filterRender && isEnableConf(filterRender) && filterRender.name ? rendererOpts[filterRender.name] || renderer.get(filterRender.name) : null
+
+      const headerScrollElem = getRefElem(elemStore['main-header-scroll'])
+      if (!headerScrollElem) {
+        return nextTick()
+      }
+      const tableFilter = refTableFilter.value
+      const filterWrapperElem = tableFilter ? (tableFilter.getRefMaps().refElem.value as HTMLDivElement) : null
+      if (!filterWrapperElem) {
+        return nextTick()
+      }
+
+      /**
+       * 是否显示筛选按钮图标
+       * 如果不存在图标，则相对单元格居中显示
+       */
+      const handleStyle = () => {
+        let currEl = targetEl
+        if (!targetEl) {
+          const headerWrapperElem = getRefElem(elemStore[`${column.fixed || 'main'}-header-wrapper`] || elemStore['main-header-wrapper'])
+          const colEl = headerWrapperElem ? headerWrapperElem.querySelector<HTMLDivElement>(`.vxe-header--column.${column.id}`) : null
+          if (colEl) {
+            currEl = colEl
+          }
+        }
+        if (!currEl) {
+          return nextTick()
+        }
+
+        const btnRect = currEl.getBoundingClientRect()
+        const tableRect = tableEl.getBoundingClientRect()
+        let left = 0
+        let top = 0
+        let maxHeight = 0
+        let panelStyle: Record<string, string | number> = {}
+        if (transfer) {
+          const ppObj = updatePanelPlacement(currEl, filterWrapperElem, {
+            defaultPlacement: 'bottom',
+            appendTo: '',
+            isMinWidth: false,
+            teleportTo: transfer
+          })
+          panelStyle = ppObj.style
+        } else {
+          const filterWidth = filterWrapperElem.offsetWidth
+          const centerWidth = targetEl ? filterWidth / 2 : (filterWidth - column.renderWidth) / 2
+          left = btnRect.left - tableRect.left - centerWidth
+          top = btnRect.top - tableRect.top + currEl.clientHeight
+          maxHeight = Math.max(40, tableEl.clientHeight - top - scrollbarHeight)
+          if (left < 1) {
+            left = 1
+          } else if (left > tableEl.clientWidth - filterWidth - 1) {
+            left = tableEl.clientWidth - filterWidth - 1
+          }
+          if ($xeGGWrapper) {
+            const wrapperEl = $xeGGWrapper.getRefMaps().refElem.value
+            if (wrapperEl) {
+              const wrapperRect = wrapperEl.getBoundingClientRect()
+              top += tableRect.top - wrapperRect.top
+            }
+          }
+          panelStyle = {
+            top: toCssUnit(top),
+            left: toCssUnit(left)
+          }
+        }
+        if (zIndex) {
+          panelStyle.zIndex = zIndex
+        }
+        // 筛选面板是自适应表格高度
+        if (compConf ? !compConf.tableFilterAutoHeight : false) {
+          maxHeight = 0
+        } else {
+          if (customMaxHeight) {
+            maxHeight = customMaxHeight > maxHeight ? maxHeight : customMaxHeight
+          }
+        }
+        panelStyle['--vxe-ui-vxe-table-filter-default-max-height'] = maxHeight ? toCssUnit(maxHeight) : 'none'
+        filterStore.style = panelStyle
+      }
+      handleStyle()
+      return nextTick().then(() => {
+        handleStyle()
+      })
+    }
+    const filterPrivateMethods: TableFilterPrivateMethods = {
+      checkFilterOptions() {
+        const { filterStore } = reactData
+        const { column } = filterStore
+        if (column) {
+          const filterOptions = (column.filters || []) as VxeTableDefines.FilterOption[]
+          filterStore.isAllSelected = filterOptions.every((item) => item._checked)
+          filterStore.isIndeterminate = !filterStore.isAllSelected && filterOptions.some((item) => item._checked)
+        }
+      },
+      handleOpenFilterColumn(evnt: MouseEvent, btnEl: HTMLDivElement | null, colEl: HTMLDivElement, column: VxeTableDefines.ColumnInfo, params: any) {
+        const { initStore, filterStore } = reactData
+        if (filterStore.column === column && filterStore.visible) {
+          filterStore.visible = false
+        } else {
+          $xeTable.handleFilterOptions(column)
+          internalData._currFilterParams = params
+          filterStore.targetEl = btnEl
+          filterStore.style = null
+          filterStore.visible = true
+          initStore.filter = true
+        }
+        nextTick().then(() => {
+          updatePopupStyle()
+        })
+        $xeTable.dispatchEvent('filter-visible', { column, field: column.field, property: column.field, filterList: $xeTable.getCheckedFilters(), visible: filterStore.visible }, evnt)
+      },
+      /**
+       * 点击筛选事件
+       * 当筛选图标被点击时触发
+       * 更新选项是否全部状态
+       * 打开筛选面板
+       * @param {Event} evnt 事件
+       * @param {ColumnInfo} column 列配置
+       * @param {Object} params 参数
+       */
+      triggerFilterEvent(evnt: MouseEvent, column: VxeTableDefines.ColumnInfo, params) {
+        const { elemStore } = internalData
+        const { fixed } = column
+        const headerWrapperElem = getRefElem(elemStore[`${fixed || 'main'}-header-wrapper`] || elemStore['main-header-wrapper'])
+        const btnElem = evnt.currentTarget as HTMLDivElement
+        const colEl = headerWrapperElem ? headerWrapperElem.querySelector<HTMLElement>(`.vxe-header--column.${column.id}`) : null
+        $xeTable.handleOpenFilterColumn(evnt, btnElem, colEl || btnElem, column, params)
+      },
+      handleClearFilter(column) {
+        if (column) {
+          const { filters, filterRender } = column
+          if (filters) {
+            const rendererOpts = computeRendererOpts.value
+            const compConf = isEnableConf(filterRender) && filterRender.name ? rendererOpts[filterRender.name] || renderer.get(filterRender.name) : null
+            const frMethod = column.filterResetMethod || (compConf ? compConf.tableFilterResetMethod || compConf.filterResetMethod : null)
+            filters.forEach((item: any) => {
+              item._checked = false
+              item.checked = false
+              if (!frMethod) {
+                item.data = XEUtils.clone(item.resetValue, true)
+              }
+            })
+            if (frMethod) {
+              frMethod({ options: filters as VxeTableDefines.FilterOption[], column, $table: $xeTable })
+            }
+          }
+        }
+      },
+      handleColumnConfirmFilter(column, evnt) {
+        const { mouseConfig } = props
+        const { scrollXLoad: oldScrollXLoad, scrollYLoad: oldScrollYLoad } = reactData
+        const filterOpts = computeFilterOpts.value
+        const mouseOpts = computeMouseOpts.value
+        const { field, filters } = column
+        const filterOptions = filters || []
+        const values: any[] = []
+        const datas: any[] = []
+        filterOptions.forEach((item) => {
+          if (item.checked) {
+            values.push(item.value)
+            datas.push(item.data)
+          }
+        })
+        const filterList = $xeTable.getCheckedFilters()
+        const params = { $table: $xeTable, $event: evnt as Event, column, field, property: field, values, datas, filters: filterList, filterList }
+        // 如果是服务端筛选，则跳过本地筛选处理
+        if (!filterOpts.remote) {
+          $xeTable.handleTableData(true)
+          $xeTable.checkSelectionStatus()
+        }
+        if (hasEnableConf(mouseConfig, mouseOpts) && mouseOpts.area && $xeTable.handleFilterEvent) {
+          $xeTable.handleFilterEvent(evnt as Event, params)
+        }
+        if (evnt) {
+          $xeTable.dispatchEvent('filter-change', params, evnt)
+        }
+        $xeTable.closeFilter()
+        return $xeTable
+          .updateFooter()
+          .then(() => {
+            const { scrollXLoad, scrollYLoad } = reactData
+            if (oldScrollXLoad || scrollXLoad || oldScrollYLoad || scrollYLoad) {
+              if (oldScrollXLoad || scrollXLoad) {
+                $xeTable.updateScrollXSpace()
+              }
+              if (oldScrollYLoad || scrollYLoad) {
+                $xeTable.updateScrollYSpace()
+              }
+              return $xeTable.refreshScroll()
+            }
+          })
+          .then(() => {
+            $xeTable.updateCellAreas()
+            return $xeTable.recalculate(true)
+          })
+          .then(() => {
+            // 存在滚动行为未结束情况
+            setTimeout(() => $xeTable.recalculate(), 50)
+          })
+      },
+      /**
+       * 确认筛选
+       * 当筛选面板中的确定按钮被按下时触发
+       */
+      confirmFilterEvent(evnt, column) {
+        if (column) {
+          $xeTable.handleColumnConfirmFilter(column, evnt)
+        }
+      },
+      // （单选）筛选发生改变
+      handleFilterChangeRadioOption(evnt, checked, item) {
+        const { filterStore } = reactData
+        const { column } = filterStore
+        if (column) {
+          const filterOptions = (column.filters || []) as VxeTableDefines.FilterOption[]
+          filterOptions.forEach((option) => {
+            option._checked = false
+          })
+          item._checked = checked
+          $xeTable.checkFilterOptions()
+          $xeTable.handleFilterConfirmFilter(evnt, column)
+        }
+      },
+      // （多选）筛选发生改变
+      handleFilterChangeMultipleOption(evnt, checked, item) {
+        item._checked = checked
+        $xeTable.checkFilterOptions()
+      },
+      // 筛选发生改变
+      handleFilterChangeOption(evnt, checked, item) {
+        const { filterStore } = reactData
+        const { fullColumnIdData } = internalData
+        let column = filterStore.column
+        if (!column) {
+          const colRest = fullColumnIdData[item._colId]
+          if (colRest) {
+            column = colRest.column
+            filterStore.column = column
+          }
+        }
+        if (column) {
+          if (column.filterMultiple) {
+            $xeTable.handleFilterChangeMultipleOption(evnt, checked, item)
+          } else {
+            $xeTable.handleFilterChangeRadioOption(evnt, checked, item)
+          }
+        }
+      },
+      // 确认筛选
+      handleFilterConfirmFilter(evnt, column) {
+        if (column) {
+          const filterOptions = (column.filters || []) as VxeTableDefines.FilterOption[]
+          filterOptions.forEach((option) => {
+            option.checked = option._checked
+          })
+          $xeTable.confirmFilterEvent(evnt, column)
+        }
+      },
+      /**
+       * 重置筛选
+       * 当筛选面板中的重置按钮被按下时触发
+       */
+      handleFilterResetFilter(evnt: Event, column) {
+        if (column) {
+          $xeTable.handleClearFilter(column)
+          $xeTable.confirmFilterEvent(evnt, column)
+          if (evnt) {
+            $xeTable.dispatchEvent('clear-filter', { filterList: [] }, evnt)
+          }
+        }
+      },
+      handleFilterStyle() {
+        const { filterStore } = reactData
+        if (!filterStore.visible) {
+          return nextTick()
+        }
+        return updatePopupStyle()
+      }
+    }
+
+    const filterMethods: TableFilterMethods = {
+      /**
+       * 手动弹出筛选面板
+       * @param column
+       */
+      openFilter(fieldOrColumn) {
+        const column = handleFieldOrColumn($xeTable, fieldOrColumn)
+        if (column && column.filters) {
+          const { elemStore } = internalData
+          const { fixed, filters } = column
+          return $xeTable.scrollToColumn(column).then(() => {
+            const headerWrapperElem = getRefElem(elemStore[`${fixed || 'main'}-header-wrapper`] || elemStore['main-header-wrapper'])
+            if (headerWrapperElem) {
+              const filterBtnElem = headerWrapperElem.querySelector<HTMLElement>(`.vxe-header--column.${column.id} .vxe-cell--filter`)
+              if (filterBtnElem) {
+                triggerEvent(filterBtnElem, 'click')
+              } else {
+                const colEl = headerWrapperElem.querySelector<HTMLElement>(`.vxe-header--column.${column.id}`)
+                if (colEl) {
+                  let firstFilterOption: VxeTableDefines.FilterOption | null = null
+                  if (filters) {
+                    firstFilterOption = filters[0] as VxeTableDefines.FilterOption
+                  }
+                  const params = {
+                    $table: $xeTable,
+                    $grid: $xeGrid,
+                    $gantt: $xeGantt,
+                    $rowIndex: -1,
+                    column,
+                    columnIndex: $xeTable.getColumnIndex(column),
+                    $columnIndex: $xeTable.getVMColumnIndex(column),
+                    _columnIndex: $xeTable.getVTColumnIndex(column),
+                    firstFilterOption: firstFilterOption as VxeTableDefines.FilterOption,
+                    fixed,
+                    source: sourceType,
+                    type: 'header'
+                    // isHidden
+                    // hasFilter
+                  }
+                  $xeTable.handleOpenFilterColumn(new Event('click'), null, colEl, column, params)
+                }
+              }
+            }
+          })
+        }
+        return nextTick()
+      },
+      /**
+       * 修改筛选条件列表
+       * @param {ColumnInfo} fieldOrColumn 列或字段名
+       * @param {Array} options 选项
+       */
+      setFilter(fieldOrColumn, options, isUpdate) {
+        const { filterStore } = reactData
+        const column = handleFieldOrColumn($xeTable, fieldOrColumn)
+        if (column && column.filters) {
+          column.filters = toFilters(options || [], column.id)
+          if (isUpdate) {
+            return $xeTable.handleColumnConfirmFilter(column, null)
+          } else {
+            if (filterStore.visible) {
+              $xeTable.handleFilterOptions(column)
+            }
+          }
+        }
+        return nextTick()
+      },
+      /**
+       * 清空指定列的筛选条件
+       * 如果为空则清空所有列的筛选条件
+       * @param {String} fieldOrColumn 列或字段名
+       */
+      clearFilter(fieldOrColumn) {
+        const { filterStore } = reactData
+        const { tableFullColumn } = internalData
+        const filterOpts = computeFilterOpts.value
+        let column
+        if (fieldOrColumn) {
+          column = handleFieldOrColumn($xeTable, fieldOrColumn)
+          if (column) {
+            $xeTable.handleClearFilter(column)
+          }
+        } else {
+          tableFullColumn.forEach($xeTable.handleClearFilter)
+        }
+        if (!fieldOrColumn || column !== filterStore.column) {
+          Object.assign(filterStore, {
+            isAllSelected: false,
+            isIndeterminate: false,
+            style: null,
+            options: [],
+            column: null,
+            multiple: false,
+            visible: false
+          })
+        }
+        if (!filterOpts.remote) {
+          return $xeTable.updateData()
+        }
+        return nextTick()
+      },
+      saveFilter(fieldOrColumn) {
+        if (fieldOrColumn) {
+          const column = handleFieldOrColumn($xeTable, fieldOrColumn)
+          $xeTable.handleFilterConfirmFilter(null, column)
+        }
+        return nextTick()
+      },
+      saveFilterByEvent(evnt, fieldOrColumn) {
+        if (fieldOrColumn) {
+          const column = handleFieldOrColumn($xeTable, fieldOrColumn)
+          $xeTable.handleFilterConfirmFilter(evnt, column)
+        }
+        return nextTick()
+      },
+      resetFilter(fieldOrColumn) {
+        if (fieldOrColumn) {
+          const column = handleFieldOrColumn($xeTable, fieldOrColumn)
+          $xeTable.handleFilterResetFilter(null, column)
+        }
+        return nextTick()
+      },
+      resetFilterByEvent(evnt, fieldOrColumn) {
+        if (fieldOrColumn) {
+          const column = handleFieldOrColumn($xeTable, fieldOrColumn)
+          $xeTable.handleFilterResetFilter(evnt, column)
+        }
+        return nextTick()
+      },
+      saveFilterPanel() {
+        const { filterStore } = reactData
+        $xeTable.handleFilterConfirmFilter(null, filterStore.column || null)
+        return nextTick()
+      },
+      saveFilterPanelByEvent(evnt) {
+        const { filterStore } = reactData
+        $xeTable.handleFilterConfirmFilter(evnt, filterStore.column || null)
+        return nextTick()
+      },
+      resetFilterPanel() {
+        const { filterStore } = reactData
+        $xeTable.handleFilterResetFilter(null, filterStore.column || null)
+        return nextTick()
+      },
+      resetFilterPanelByEvent(evnt) {
+        const { filterStore } = reactData
+        $xeTable.handleFilterResetFilter(evnt, filterStore.column || null)
+        return nextTick()
+      },
+      getCheckedFilters() {
+        const { tableFullColumn } = internalData
+        const filterList: VxeTableDefines.FilterCheckedParams[] = []
+        tableFullColumn.forEach((column) => {
+          const { field, filters } = column
+          const filterOptions = filters || []
+          const valueList: any[] = []
+          const dataList: any[] = []
+          if (filterOptions) {
+            filterOptions.forEach((item) => {
+              if (item.checked) {
+                valueList.push(item.value)
+                dataList.push(item.data)
+              }
+            })
+            if (valueList.length) {
+              filterList.push({ column, field, property: field, values: valueList, datas: dataList })
+            }
+          }
+        })
+        return filterList
+      },
+      updateFilterOptionStatus(item: any, checked: boolean) {
+        item._checked = checked
+        item.checked = checked
+        return nextTick()
+      }
+    }
+
+    return { ...filterMethods, ...filterPrivateMethods }
+  },
+  setupGrid($xeGrid) {
+    return $xeGrid.extendTableMethods(tableFilterMethodKeys)
+  },
+  setupGantt($xeGantt) {
+    return $xeGantt.extendTableMethods(tableFilterMethodKeys)
+  }
+})