vxe-table 4.16.19 → 4.17.0-beta.0

package/packages/table/render/index.ts

@@ -3,10 +3,10 @@ import XEUtils from 'xe-utils'
 import { VxeUI } from '../../ui'
 import { getCellValue, setCellValue } from '../../table/src/util'
 import { getFuncText, formatText, isEmptyValue } from '../../ui/src/utils'
-import { getOnName, getModelEvent, getChangeEvent } from '../../ui/src/vn'
+import { getOnName, getModelEvent, getChangeEvent, hasInputType } from '../../ui/src/vn'
 import { errLog } from '../../ui/src/log'
 
-import type { VxeGlobalRendererHandles, VxeColumnPropTypes, VxeTableConstructor, VxeTablePrivateMethods } from '../../../types'
+import type { VxeGlobalRendererHandles, VxeColumnPropTypes, VxeTableConstructor, VxeTablePrivateMethods, VxeTableDefines } from '../../../types'
 
 const { getConfig, renderer, getI18n, getComponent } = VxeUI
 
@@ -51,9 +51,14 @@ function getOldComponent ({ name }: any) {
   return resolveComponent(getOldComponentName(name)) as ComponentOptions
 }
 
-function handleConfirmFilter (params: any, checked: any, option: any) {
-  const { $panel } = params
-  $panel.changeOption({}, checked, option)
+function updateFilterChangeOption (params: VxeGlobalRendererHandles.RenderTableFilterParams | VxeGlobalRendererHandles.RenderTableFloatingFilterParams, checked: boolean, option: VxeTableDefines.FilterOption) {
+  const { $table } = params
+  $table.updateFilterOptionStatus(option, checked)
+}
+
+function saveFilterEvent (params: VxeGlobalRendererHandles.RenderTableFilterParams | VxeGlobalRendererHandles.RenderTableFloatingFilterParams) {
+  const { $table, column } = params
+  $table.saveFilterByEvent(new Event('change'), column)
 }
 
 function getNativeAttrs (renderOpts: VxeGlobalRendererHandles.RenderTableCellOptions) {
@@ -164,6 +169,7 @@ function getNativeElementOns (renderOpts: VxeGlobalRendererHandles.RenderTableCe
 }
 
 const blurEvent = 'blur'
+const clearEvent = 'clear'
 
 /**
  * 组件事件处理
@@ -176,11 +182,12 @@ function getComponentOns (renderOpts: VxeGlobalRendererHandles.RenderTableCellOp
   model: (cellValue: any) => void
   change?: (...args: any[]) => void
   blur?: (...args: any[]) => void
+  clear?: (...args: any[]) => void
 }, eventOns?: Record<string, any>) {
   const { events } = renderOpts
   const modelEvent = getModelEvent(renderOpts)
   const changeEvent = getChangeEvent(renderOpts)
-  const { model: modelFunc, change: changeFunc, blur: blurFunc } = eFns || {}
+  const { model: modelFunc, change: changeFunc, blur: blurFunc, clear: clearFunc } = eFns || {}
   const ons: any = {}
   XEUtils.objectEach(events, (func, key: any) => {
     ons[getOnName(key)] = function (...args: any[]) {
@@ -214,6 +221,14 @@ function getComponentOns (renderOpts: VxeGlobalRendererHandles.RenderTableCellOp
       }
     }
   }
+  if (clearFunc) {
+    ons[getOnName(clearEvent)] = function (...args: any[]) {
+      clearFunc(...args)
+      if (events && events[clearEvent]) {
+        events[clearEvent](params, ...args)
+      }
+    }
+  }
   return eventOns ? Object.assign(ons, eventOns) : ons
 }
 
@@ -252,17 +267,64 @@ function getEditOns (renderOpts: VxeGlobalRendererHandles.RenderTableEditOptions
   })
 }
 
-function getFilterOns (renderOpts: VxeGlobalRendererHandles.RenderTableFilterOptions, params: any, option: any) {
+function getFilterOns (renderOpts: VxeGlobalRendererHandles.RenderTableFilterOptions, params: VxeGlobalRendererHandles.RenderTableFilterParams, option: VxeTableDefines.FilterOption) {
   return getComponentOns(renderOpts, params, {
     model (value: any) {
       // 处理 model 值双向绑定
       option.data = value
     },
     change () {
-      handleConfirmFilter(params, !XEUtils.eqNull(option.data), option)
+      updateFilterChangeOption(params, !isEmptyValue(option.data), option)
     },
     blur () {
-      handleConfirmFilter(params, !XEUtils.eqNull(option.data), option)
+      updateFilterChangeOption(params, !isEmptyValue(option.data), option)
+    }
+  })
+}
+
+function getFloatingFilterOns (renderOpts: VxeGlobalRendererHandles.RenderTableFilterOptions, params: VxeGlobalRendererHandles.RenderTableFloatingFilterParams, option: VxeTableDefines.FilterOption) {
+  const { $table, column } = params
+  if (hasInputType(renderOpts)) {
+    return getComponentOns(renderOpts, params, {
+      model (value: any) {
+        // 处理 model 值双向绑定
+        option.data = value
+      },
+      change () {
+        updateFilterChangeOption(params, !isEmptyValue(option.data), option)
+      },
+      clear () {
+        updateFilterChangeOption(params, !isEmptyValue(option.data), option)
+        saveFilterEvent(params)
+      },
+      blur () {
+        $table.saveFilterByEvent(new Event('change'), column)
+      }
+    }, renderOpts.name === 'VxeNumberInput'
+      ? {
+          [getOnName('plus-number')] () {
+            updateFilterChangeOption(params, !isEmptyValue(option.data), option)
+            saveFilterEvent(params)
+          },
+          [getOnName('minus-number')] () {
+            updateFilterChangeOption(params, !isEmptyValue(option.data), option)
+            saveFilterEvent(params)
+          }
+        }
+      : {})
+  }
+  return getComponentOns(renderOpts, params, {
+    model (value: any) {
+      // 处理 model 值双向绑定
+      option.data = value
+    },
+    clear () {
+      updateFilterChangeOption(params, !isEmptyValue(option.data), option)
+      $table.saveFilterByEvent(new Event('change'), column)
+    },
+    change () {
+      updateFilterChangeOption(params, !isEmptyValue(option.data), option)
+      $table.saveFilterByEvent(new Event('change'), column)
     }
   })
 }
@@ -312,10 +374,10 @@ function getNativeFilterOns (renderOpts: VxeGlobalRendererHandles.RenderTableFil
       }
     },
     change () {
-      handleConfirmFilter(params, !XEUtils.eqNull(option.data), option)
+      updateFilterChangeOption(params, !XEUtils.eqNull(option.data), option)
     },
     blur () {
-      handleConfirmFilter(params, !XEUtils.eqNull(option.data), option)
+      updateFilterChangeOption(params, !XEUtils.eqNull(option.data), option)
     }
   })
 }
@@ -458,11 +520,11 @@ function renderNativeOptions (options: any, renderOpts: VxeGlobalRendererHandles
   return []
 }
 
-function nativeFilterRender (renderOpts: VxeGlobalRendererHandles.RenderTableFilterOptions, params: any) {
+function nativeFilterRender (renderOpts: VxeGlobalRendererHandles.RenderTableFilterOptions, params: VxeGlobalRendererHandles.RenderTableFilterParams) {
   const { column } = params
   const { name } = renderOpts
   const attrs = getNativeAttrs(renderOpts)
-  return column.filters.map((option: any, oIndex: any) => {
+  return column.filters.map((option, oIndex) => {
     return h(`${name}`, {
       key: oIndex,
       class: `vxe-default-${name}`,
@@ -473,9 +535,9 @@ function nativeFilterRender (renderOpts: VxeGlobalRendererHandles.RenderTableFil
   })
 }
 
-function defaultFilterRender (renderOpts: VxeGlobalRendererHandles.RenderTableFilterOptions, params: any) {
+function defaultFilterRender (renderOpts: VxeGlobalRendererHandles.RenderTableFilterOptions, params: VxeGlobalRendererHandles.RenderTableFilterParams) {
   const { column } = params
-  return column.filters.map((option: any, oIndex: any) => {
+  return column.filters.map((option, oIndex) => {
     const optionValue = option.data
     return h(getDefaultComponent(renderOpts), {
       key: oIndex,
@@ -485,6 +547,23 @@ function defaultFilterRender (renderOpts: VxeGlobalRendererHandles.RenderTableFi
   })
 }
 
+function defaultFloatingFilterRender (renderOpts: VxeGlobalRendererHandles.RenderTableFloatingFilterOptions, params: VxeGlobalRendererHandles.RenderTableFloatingFilterParams) {
+  const { option } = params
+  const optionValue = option.data
+  return [
+    h(getDefaultComponent(renderOpts), {
+      ...getCellEditFilterProps(renderOpts, renderOpts, optionValue),
+      ...getFloatingFilterOns(renderOpts, params, option)
+    })
+  ]
+}
+
+function defaultFilterOptions () {
+  return [
+    { data: null }
+  ]
+}
+
 /**
  * 已废弃
  * @deprecated
@@ -744,7 +823,9 @@ renderer.mixin({
       return getCellLabelVNs(renderOpts, params, cellValue)
     },
     renderTableDefault: defaultEditRender,
+    createTableFilterOptions: defaultFilterOptions,
     renderTableFilter: defaultFilterRender,
+    renderTableFloatingFilter: defaultFloatingFilterRender,
     tableFilterDefaultMethod: handleInputFilterMethod
   },
   FormatNumberInput: {
@@ -797,7 +878,9 @@ renderer.mixin({
       return getFuncText(itemValue, 1)
     },
     renderTableDefault: defaultEditRender,
+    createTableFilterOptions: defaultFilterOptions,
     renderTableFilter: defaultFilterRender,
+    renderTableFloatingFilter: defaultFloatingFilterRender,
     tableFilterDefaultMethod: handleInputFilterMethod,
     tableExportMethod (params) {
       const { row, column } = params
@@ -820,7 +903,9 @@ renderer.mixin({
       return getCellLabelVNs(renderOpts, params, cellValue)
     },
     renderTableDefault: defaultEditRender,
+    createTableFilterOptions: defaultFilterOptions,
     renderTableFilter: defaultFilterRender,
+    renderTableFloatingFilter: defaultFloatingFilterRender,
     tableFilterDefaultMethod: handleFilterMethod
   },
   VxeDateRangePicker: {
@@ -924,6 +1009,7 @@ renderer.mixin({
     renderTableCell (renderOpts, params) {
       return getCellLabelVNs(renderOpts, params, getSelectCellValue(renderOpts, params))
     },
+    createTableFilterOptions: defaultFilterOptions,
     renderTableFilter (renderOpts, params) {
       const { column } = params
       const { options, optionProps, optionGroups, optionGroupProps } = renderOpts
@@ -936,6 +1022,15 @@ renderer.mixin({
         })
       })
     },
+    renderTableFloatingFilter (renderOpts, params) {
+      const { option } = params
+      const { options, optionProps, optionGroups, optionGroupProps } = renderOpts
+      const optionValue = option.data
+      return h(getDefaultComponent(renderOpts), {
+        ...getCellEditFilterProps(renderOpts, params, optionValue, { options, optionProps, optionGroups, optionGroupProps }),
+        ...getFloatingFilterOns(renderOpts, params, option)
+      })
+    },
     tableFilterDefaultMethod: handleFilterMethod,
     tableExportMethod: handleExportSelectMethod
   },

package/packages/table/src/cell.ts

@@ -318,7 +318,7 @@ function renderCellHandle (params: VxeTableDefines.CellRenderBodyParams & {
     case 'html':
       return isDeepCell ? Cell.renderDeepHTMLCell(params) : Cell.renderHTMLCell(params)
   }
-  if (isEnableConf(editConfig) && editRender) {
+  if (editConfig && isEnableConf(editOpts) && editRender) {
     return editOpts.mode === 'cell' ? (isDeepCell ? Cell.renderDeepCellEdit(params) : Cell.renderCellEdit(params)) : (isDeepCell ? Cell.renderDeepRowEdit(params) : Cell.renderRowEdit(params))
   }
   return isDeepCell ? Cell.renderDeepCell(params) : Cell.renderDefaultCell(params)
@@ -329,7 +329,9 @@ function renderHeaderHandle (params: VxeTableDefines.CellRenderHeaderParams & {
 }) {
   const { column, $table } = params
   const tableProps = $table.props
+  const { computeEditOpts } = $table.getComputeMaps()
   const { editConfig } = tableProps
+  const editOpts = computeEditOpts.value
   const { type, filters, sortable, editRender } = column
   switch (type) {
     case 'seq':
@@ -348,7 +350,7 @@ function renderHeaderHandle (params: VxeTableDefines.CellRenderHeaderParams & {
       }
       break
   }
-  if (editConfig && editRender) {
+  if (editConfig && isEnableConf(editOpts) && editRender) {
     return Cell.renderEditHeader(params)
   } else if (filters && sortable) {
     return Cell.renderSortAndFilterHeader(params)
@@ -406,11 +408,15 @@ export const Cell = {
   },
   renderDefaultCell (params: VxeTableDefines.CellRenderBodyParams & { $table: VxeTableConstructor & VxeTablePrivateMethods }) {
     const { $table, row, column } = params
+    const tableProps = $table.props
     const tableReactData = $table.reactData
     const tableInternalData = $table.internalData
     const { isRowGroupStatus } = tableReactData
+    const { computeEditOpts } = $table.getComputeMaps()
+    const { editConfig } = tableProps
+    const editOpts = computeEditOpts.value
     const { field, slots, editRender, cellRender, rowGroupNode, aggFunc } = column
-    const renderOpts = editRender || cellRender
+    const renderOpts = editConfig && isEnableConf(editOpts) && editRender ? editRender : cellRender
     const defaultSlot = slots ? slots.default : null
     const gcSlot = slots ? (slots.groupContent || slots['group-content']) : null
     let cellValue: string | number | null = ''

package/packages/table/src/column.ts

@@ -94,6 +94,8 @@ export const columnProps = {
   filterRecoverMethod: Function as PropType<VxeColumnPropTypes.FilterRecoverMethod>,
   // 筛选模板配置项
   filterRender: Object as PropType<VxeColumnPropTypes.FilterRender>,
+  // 是否显示浮动筛选
+  floatingFilters: Object as PropType<VxeColumnPropTypes.FloatingFilters>,
   // 设置为分组节点
   rowGroupNode: Boolean as PropType<VxeColumnPropTypes.RowGroupNode>,
   // 设置为树节点

package/packages/table/src/columnInfo.ts

@@ -1,12 +1,13 @@
 import XEUtils from 'xe-utils'
 import { VxeUI } from '../../ui'
 import { toFilters } from './util'
-import { getFuncText } from '../../ui/src/utils'
+import { isEnableConf, getFuncText } from '../../ui/src/utils'
 import { warnLog, errLog } from '../../ui/src/log'
 
-import type { VxeTableConstructor, VxeTablePrivateMethods } from '../../../types'
+import type { VxeTableConstructor, VxeTablePrivateMethods, VxeTableDefines } from '../../../types'
+
+const { getI18n, formats, renderer } = VxeUI
 
-const { getI18n, formats } = VxeUI
 export class ColumnInfo {
   /* eslint-disable @typescript-eslint/no-use-before-define */
   constructor ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, _vm: any, { renderHeader, renderCell, renderFooter, renderData }: any = {}) {
@@ -15,11 +16,18 @@ export class ColumnInfo {
     const $xeGantt = $xeTable.xeGantt
     const $xeGGWrapper = $xeGrid || $xeGantt
 
-    const { field, editRender } = _vm
+    const { field, editRender, filterRender } = _vm
+
+    const colId = _vm.colId || XEUtils.uniqueId('col_')
 
     const formatter: string | any[] = _vm.formatter
     const visible = XEUtils.isBoolean(_vm.visible) ? _vm.visible : true
 
+    const flCompConf = isEnableConf(filterRender) ? renderer.get(filterRender.name) : null
+    const ctFilterOptions = flCompConf ? flCompConf.createTableFilterOptions : null
+
+    const filters = toFilters(_vm.filters, colId)
+
     const types = ['seq', 'checkbox', 'radio', 'expand', 'html']
     if (_vm.type && types.indexOf(_vm.type) === -1) {
       warnLog('vxe.error.errProp', [`type=${_vm.type}`, types.join(', ')])
@@ -94,12 +102,13 @@ export class ColumnInfo {
       sortable: _vm.sortable,
       sortBy: _vm.sortBy,
       sortType: _vm.sortType,
-      filters: toFilters(_vm.filters),
+      filters: filters,
       filterMultiple: XEUtils.isBoolean(_vm.filterMultiple) ? _vm.filterMultiple : true,
       filterMethod: _vm.filterMethod,
       filterResetMethod: _vm.filterResetMethod,
       filterRecoverMethod: _vm.filterRecoverMethod,
-      filterRender: _vm.filterRender,
+      filterRender: filterRender,
+      floatingFilters: _vm.floatingFilters,
       rowGroupNode: _vm.rowGroupNode,
       treeNode: _vm.treeNode,
       dragSort: _vm.dragSort,
@@ -118,7 +127,7 @@ export class ColumnInfo {
       // 自定义参数
       params: _vm.params,
       // 渲染属性
-      id: _vm.colId || XEUtils.uniqueId('col_'),
+      id: colId,
       parentId: null,
       visible,
       // 内部属性（一旦被使用，将导致不可升级版本）
@@ -169,6 +178,9 @@ export class ColumnInfo {
       // 单元格插槽，只对 grid 有效
       slots: _vm.slots
     })
+    if (ctFilterOptions && (!filters || !filters.length)) {
+      (this as any).filters = toFilters(ctFilterOptions({ $table: $xeTable, column: this as unknown as VxeTableDefines.ColumnInfo }), colId)
+    }
     if ($xeGGWrapper) {
       const { computeProxyOpts } = $xeGGWrapper.getComputeMaps()
       const proxyOpts = computeProxyOpts.value

package/packages/table/src/header.ts

@@ -2,9 +2,11 @@ import { h, ref, Ref, PropType, inject, nextTick, watch, onMounted, onUnmounted
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { VxeUI } from '../../ui'
+import { isEnableConf } from '../../ui/src/utils'
 import { getCalcHeight, convertHeaderColumnToRows, convertHeaderToGridRows } from './util'
+import { getSlotVNs } from '../../ui/src/vn'
 
-import type { VxeTablePrivateMethods, VxeTableConstructor, VxeTableMethods, VxeTableDefines, VxeColumnPropTypes } from '../../../types'
+import type { VxeTablePrivateMethods, VxeTableConstructor, VxeTableMethods, VxeTableDefines } from '../../../types'
 
 const { renderer, renderEmptyElement } = VxeUI
 
@@ -42,7 +44,7 @@ export default defineVxeComponent({
     const $xeTable = inject('$xeTable', {} as VxeTableConstructor & VxeTableMethods & VxeTablePrivateMethods)
 
     const { xID, props: tableProps, reactData: tableReactData, internalData: tableInternalData } = $xeTable
-    const { computeColumnOpts, computeColumnDragOpts, computeCellOpts, computeMouseOpts, computeHeaderCellOpts, computeDefaultRowHeight, computeVirtualXOpts } = $xeTable.getComputeMaps()
+    const { computeColumnOpts, computeColumnDragOpts, computeCellOpts, computeMouseOpts, computeHeaderCellOpts, computeDefaultRowHeight, computeVirtualXOpts, computeFloatingFilterOpts } = $xeTable.getComputeMaps()
 
     const headerColumn = ref<VxeTableDefines.ColumnInfo[][]>([])
 
@@ -103,9 +105,9 @@ export default defineVxeComponent({
         const showTooltip = headOverflow === true || headOverflow === 'tooltip'
         const hasEllipsis = showTitle || showTooltip || showEllipsis
         let hasFilter = false
-        let firstFilterOption: VxeColumnPropTypes.FilterItem | null = null
+        let firstFilterOption: VxeTableDefines.FilterOption | null = null
         if (filters) {
-          firstFilterOption = filters[0]
+          firstFilterOption = filters[0] as VxeTableDefines.FilterOption
           hasFilter = filters.some((item) => item.checked)
         }
         const columnIndex = colRest.index
@@ -264,13 +266,127 @@ export default defineVxeComponent({
       })
     }
 
-    const renderHeads = (isGroup: boolean, isOptimizeMode: boolean, headerGroups: VxeTableDefines.ColumnInfo[][]) => {
+    const renderFilterRows = (isOptimizeMode: boolean, cols: VxeTableDefines.ColumnInfo[]) => {
+      const $xeGrid = $xeTable.xeGrid
+      const $xeGantt = $xeTable.xeGantt
+
       const { fixedType } = props
-      const { headerRowClassName, headerRowStyle } = tableProps
+      const { showHeaderOverflow: allColumnHeaderOverflow, headerAlign: allHeaderAlign, align: allAlign } = tableProps
+      const { currentColumn, overflowX } = tableReactData
+      const { fullColumnIdData } = tableInternalData
+      const cellOpts = computeCellOpts.value
+      const defaultRowHeight = computeDefaultRowHeight.value
+      const headerCellOpts = computeHeaderCellOpts.value
+      const currCellHeight = getCalcHeight(headerCellOpts.height) || defaultRowHeight
 
-      return headerGroups.map((cols, $rowIndex) => {
-        const params = { $table: $xeTable, $rowIndex, fixed: fixedType, type: renderType }
+      return cols.map((column, $columnIndex) => {
+        const { type, showHeaderOverflow, headerAlign, align, filters, editRender, cellRender, floatingFilters, filterRender, slots } = column
+        const colid = column.id
+        const colRest = fullColumnIdData[colid] || {}
+        const renderOpts = editRender || cellRender
+        const flSlot = slots ? (slots.floatingFilter || slots['floating-filter']) : null
+        const compConf = renderOpts ? renderer.get(renderOpts.name) : null
+        const flCompConf = isEnableConf(filterRender) ? renderer.get(filterRender.name) : null
+        const rtFloatingFilter = flCompConf ? flCompConf.renderTableFloatingFilter : null
+        const fixedHiddenColumn = overflowX && (fixedType ? column.fixed !== fixedType : !!column.fixed)
+        const isPadding = XEUtils.isBoolean(headerCellOpts.padding) ? headerCellOpts.padding : cellOpts.padding
+        const headOverflow = XEUtils.eqNull(showHeaderOverflow) ? allColumnHeaderOverflow : showHeaderOverflow
+        const headAlign = headerAlign || (compConf ? compConf.tableHeaderCellAlign : '') || allHeaderAlign || align || (compConf ? compConf.tableCellAlign : '') || allAlign
+        const showEllipsis = headOverflow === 'ellipsis'
+        const showTitle = headOverflow === 'title'
+        const showTooltip = headOverflow === true || headOverflow === 'tooltip'
+        const hasEllipsis = showTitle || showTooltip || showEllipsis
+        let hasFilter = false
+        let firstFilterOption: VxeTableDefines.FilterOption | null = null
+        if (filters) {
+          firstFilterOption = filters[0] as VxeTableDefines.FilterOption
+          hasFilter = filters.some((item) => item.checked)
+        }
+        const columnIndex = colRest.index
+        const _columnIndex = colRest._index
+        const cellParams: VxeTableDefines.CellFloatingFilterParams & {
+          $table: VxeTableConstructor & VxeTablePrivateMethods
+        } = {
+          $table: $xeTable,
+          $grid: $xeGrid,
+          $gantt: $xeGantt,
+          column,
+          columnIndex,
+          $columnIndex,
+          _columnIndex,
+          option: firstFilterOption,
+          fixed: fixedType,
+          type: renderType,
+          isHidden: fixedHiddenColumn,
+          hasFilter
+        }
+        const thAttrs: Record<string, string | number | null> = {
+          colid
+        }
+
+        const isLastColumn = $columnIndex === cols.length - 1
+        const isAutoCellWidth = !column.resizeWidth && (column.minWidth === 'auto' || column.width === 'auto')
+
+        const tcStyle: Record<string, string> = {}
+        if (hasEllipsis) {
+          tcStyle.height = `${currCellHeight}px`
+        } else {
+          tcStyle.minHeight = `${currCellHeight}px`
+        }
+
+        return h('th', {
+          class: ['vxe-table--column vxe-header--column', colid, fixedHiddenColumn ? 'fixed--hidden' : 'fixed--visible', {
+            [`col--${headAlign}`]: headAlign,
+            [`col--${type}`]: type,
+            'col--last': isLastColumn,
+            'col--fixed': column.fixed,
+            'col--ellipsis': hasEllipsis,
+            'fixed--width': !isAutoCellWidth,
+            'is--padding': isPadding,
+            'is--sortable': column.sortable,
+            'col--current': currentColumn === column
+          }
+          ],
+          key: colid,
+          ...thAttrs
+        }, [
+          h('div', {
+            class: ['vxe-cell', {
+              'c--title': showTitle,
+              'c--tooltip': showTooltip,
+              'c--ellipsis': showEllipsis
+            }],
+            style: tcStyle
+          }, isOptimizeMode && fixedHiddenColumn && !floatingFilters
+            ? []
+            : [
+                h('div', {
+                  colid,
+                  class: 'vxe-cell--wrapper vxe-header-cell--wrapper'
+                }, flSlot
+                  ? $xeTable.callSlot(flSlot, cellParams)
+                  : (rtFloatingFilter && firstFilterOption
+                      ? getSlotVNs(rtFloatingFilter(filterRender, {
+                        $table: $xeTable,
+                        option: firstFilterOption,
+                        column: column as any,
+                        columnIndex,
+                        $columnIndex
+                      }))
+                      : []))
+              ])
+        ])
+      })
+    }
+
+    const renderHeads = (isGroup: boolean, isOptimizeMode: boolean, headerGroups: VxeTableDefines.ColumnInfo[][]) => {
+      const { fixedType, fixedColumn } = props
 
+      const { headerRowClassName, headerRowStyle } = tableProps
+      const { visibleColumn } = tableInternalData
+      const floatingFilterOpts = computeFloatingFilterOpts.value
+      const rowVNs = headerGroups.map((cols, $rowIndex) => {
+        const params = { $table: $xeTable, $rowIndex, fixed: fixedType, type: renderType }
         return h('tr', {
           key: $rowIndex,
           class: [
@@ -280,6 +396,19 @@ export default defineVxeComponent({
           style: headerRowStyle ? (XEUtils.isFunction(headerRowStyle) ? headerRowStyle(params) : headerRowStyle) : null
         }, renderRows(isGroup, isOptimizeMode, headerGroups, $rowIndex, cols))
       })
+
+      if (floatingFilterOpts.enabled) {
+        rowVNs.push(
+          h('tr', {
+            key: 'ff',
+            class: [
+              'vxe-header--row'
+            ]
+          }, renderFilterRows(isOptimizeMode, isOptimizeMode && fixedType ? fixedColumn as VxeTableDefines.ColumnInfo[] : visibleColumn))
+        )
+      }
+
+      return rowVNs
     }
 
     const renderVN = () => {

package/packages/table/src/props.ts

@@ -241,6 +241,8 @@ export const tableProps = {
   sortConfig: Object as PropType<VxeTablePropTypes.SortConfig>,
   // 筛选配置项
   filterConfig: Object as PropType<VxeTablePropTypes.FilterConfig>,
+  // 浮动筛选配置项
+  floatingFilterConfig: Object as PropType<VxeTablePropTypes.FloatingFilterConfig>,
   // 单选框配置
   radioConfig: Object as PropType<VxeTablePropTypes.RadioConfig>,
   // 复选框配置项