vue 表格组件 vxe-table 实现传统 ERP 那样表头放筛选框的筛选渲染方式

传统 ERP 系统习惯把筛选输入框直接放在表头下方或上方，而不是点击图标后弹出面板。vxe-table 通过 floatingFilterConfig 提供这种“浮动筛选”渲染方式：每一列的表头直接渲染一个筛选组件，输入即筛选，无需额外弹窗。筛选框显示在表头下方还是上方，由 position 控制。

vxe-table 如何实现表头直接放筛选框？

在表格配置中设置 floatingFilterConfig.enabled: true 启用浮动筛选，再通过 position: 'top' | 'bottom' 控制筛选框显示在表头的上方或下方。每一列通过 filterRender 指定筛选组件，组件会直接渲染在表头区域，而不是点击后弹出。

• 生效前提：
  • floatingFilterConfig.enabled 必须为 true，否则 position 不生效，表头不会出现筛选框。
  • 需要筛选的列必须配置 filterRender，未配置的列不显示筛选框。
  • 表格需设置固定 height，否则浮动筛选行的高度计算可能异常。
    预期结果：表头区域出现一行（或上方一行）筛选组件，输入名称、选择性别、输入年龄、选择日期后，表格数据即时或点击确认后按条件过滤，行为接近传统 ERP 的表头筛选。

代码

<template>
  <div>
    显示位置：
    <vxe-radio-group v-model="gridOptions.floatingFilterConfig.position">
      <vxe-radio-button checked-value="top" content="顶部"></vxe-radio-button>
      <vxe-radio-button checked-value="bottom" content="底部"></vxe-radio-button>
    </vxe-radio-group>

    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const gridOptions = reactive({
  border: true,
  height: 400,
  floatingFilterConfig: {
    enabled: true,
    position: 'top'
  },
  columns: [
    { field: 'name', title: 'Name', filterRender: { name: 'VxeInput', props: { clearable: true } } },
    {
      field: 'sex',
      title: 'Sex',
      filterRender: {
        name: 'VxeSelect',
        props: {
          clearable: true
        },
        options: [
          { label: 'Man', value: 'Man' },
          { label: 'Woman', value: 'Woman' }
        ]
      }
    },
    { field: 'age', title: 'Age', filterRender: { name: 'VxeNumberInput', props: { clearable: true } } },
    { field: 'date', title: 'Date', filterRender: { name: 'VxeDatePicker', props: { clearable: true } } }
  ],
  data: [
    { id: 10001, name: 'Test1', role: 'Develop', sex: 'Woman', age: 28, date: '2025-10-01' },
    { id: 10002, name: 'Test2', role: 'Test', sex: 'Man', age: 22, date: '2025-10-02' },
    { id: 10003, name: 'Test3', role: 'PM', sex: 'Woman', age: 32, date: '2025-10-05' },
    { id: 10004, name: 'Test4', role: 'Designer', sex: 'Man', age: 54, date: '2025-10-14' },
    { id: 10005, name: 'Test5', role: 'Develop', sex: 'Man', age: 44, date: '2025-09-01' },
    { id: 10006, name: 'Test6', role: 'Develop', sex: 'Woman', age: 24, date: '2025-08-15' },
    { id: 10007, name: 'Test7', role: 'Test', sex: 'Man', age: 52, date: '2025-11-12' },
    { id: 10008, name: 'Test8', role: 'PM', sex: 'Woman', age: 34, date: '2025-11-27' },
    { id: 10009, name: 'Test9', role: 'PM', sex: 'Man', age: 24, date: '2025-10-18' },
    { id: 100010, name: 'Test10', role: 'Develop', sex: 'Woman', age: 24, date: '2025-10-25' }
  ]
})
</script>

• 预期结果：
  • 选中“顶部”时，筛选框出现在表头文字上方；选中“底部”时，筛选框出现在表头文字下方。
  • 每个配置了 filterRender 的列都显示对应的输入/选择/日期组件，未配置的列不显示筛选框。
  • 切换位置时表格实时重排，不影响已输入或已选中的筛选条件。

关键配置参数

配置项	类型	默认值	说明
floatingFilterConfig.enabled	Boolean	false	是否启用浮动筛选，必须为 true
floatingFilterConfig.position	String	'bottom'	筛选框位置，'top' 表头上方，'bottom' 表头下方
列 filterRender	Object	—	指定该列筛选组件；浮动筛选模式下直接渲染为表头筛选框
列 filterRender.name	String	—	组件名称，如 VxeInput、VxeSelect、VxeNumberInput、VxeDatePicker
列 filterRender.props	Object	—	传给筛选组件的属性，如 clearable: true
列 filterRender.options	Array	—	下拉类筛选组件的选项数据

浮动筛选与默认筛选面板的区别

维度	传统筛选（filterConfig）	浮动筛选（floatingFilterConfig）
交互方式	点击表头筛选图标弹出面板	筛选组件直接显示在表头区域
视觉位置	浮层，脱离表头	表头上方或下方，占据固定一行
适用风格	现代 Web 应用	传统 ERP、财务系统、管理后台
配置入口	filterConfig	floatingFilterConfig
列配置	filterRender	filterRender（复用同一套渲染器）

两种方式可以独立使用，也可以根据业务场景选择其一。如果项目需要“一眼看到所有筛选条件”，浮动筛选更合适；如果希望界面更紧凑，传统弹出面板更节省空间。

注意事项

• filterRender 在浮动模式下直接渲染
  • 与弹出面板模式不同，浮动筛选的 filterRender 不是“面板内容”，而是表头里的筛选控件本身。因此组件的 props 需要按直接展示的场景配置，例如 clearable: true 让用户可以一键清空。
• 未配置 filterRender 的列不显示筛选框
  • 这是正常行为。若希望某列不参与筛选，不配置 filterRender 即可。

https://vxetable.cn