如何用 vxe-table 实现列头筛选，在每一列下方增加一个筛选单元格，可以对数据直接进行渲染

原创

已于 2025-09-28 15:59:47 修改 · 823 阅读

标签

#javascript #vxe-table #vxe-ui #vue.js

收录于

于 2025-09-28 13:49:18 首次发布

如何用 vxe-table 实现列头筛选，在每一列下方增加一个筛选单元格，可以对数据直接进行渲染，记得需要最新版本才支持

查看官网：https://vxetable.cn
gitbub：https://github.com/x-extends/vxe-table
gitee：https://gitee.com/x-extends/vxe-table

效果

请添加图片描述

代码

通过 floating-filter-config.enabled 来启用浮动筛选,再对指定列设置 floating-filters 来开启筛选渲染

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

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

const sexFilterRender = reactive({
     
     
  name: 'VxeSelect',
  props: {
     
     
    clearable: true
  },
  options: [
    {
     
      label: 'Man', value: 'Man'