vue 表格 vxe-table 开启筛选、excel 筛选框列表样式

vue 表格 vxe-table 开启筛选、excel 筛选框列表样式，通过设置列的 filterRender.name = 'FilterAggregation'启用组合筛选功能

https://vxetable.cn

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

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

const nameFilterRender = reactive({
  name: 'FilterAggregation'
})

const nicknameFilterRender = reactive({
  name: 'FilterAggregation'
})

const numFilterRender = reactive({
  name: 'FilterAggregation'
})

const rateFilterRender = reactive({
  name: 'FilterAggregation'
})

const gridOptions = reactive({
  border: true,
  height: 500,
  showOverflow: true,
  columnConfig: {
    resizable: true
  },
  columns: [
    { type: 'seq', width: 70 },
    {
      field: 'name',
      title: '名称',
      filterRender: nameFilterRender
    },
    {
      field: 'nickname',
      title: '昵称',
      filterRender: nicknameFilterRender
    },
    { field: 'role', title: '角色' },
    { field: 'sex', title: '性别' },
    { field: 'age', title: '年龄' },
    {
      field: 'num',
      title: '分数',
      filterRender: numFilterRender
    },
    {
      field: 'rate',
      title: '评分',
      filterRender: rateFilterRender
    },
    { field: 'address', title: '地址', minWidth: 200 }
  ],
  data: [
    { id: 10001, name: '张三', nickname: '非主流昵称', role: '前端开发', sex: 'Man', num: 23, age: 28, rate: 3, address: '北京市朝阳区33号' },
    { id: 10002, name: '小李', nickname: '使用说明', role: '测试人员', sex: 'Women', num: 38, age: 22, rate: 4, address: '广州市白云区964号' },
    { id: 10003, name: '小明', nickname: '自定义的', role: '项目经理', sex: 'Man', num: 33, age: 32, rate: 0, address: '深圳市龙华区94号' },
    { id: 10004, name: '李四', nickname: '一直风吹过', role: '前端开发', sex: 'Women', num: 456, age: 24, rate: 1, address: '广州市白云区15号' },
    { id: 10005, name: '王五', nickname: '暂无', role: '测试人员', sex: 'Women', num: 42, age: 42, rate: 5, address: '北京市朝阳区32号' },
    { id: 10006, name: '张三', nickname: '使用说明', role: '后端开发', sex: 'Man', num: 23, age: 38, rate: 0, address: '深圳市罗湖区94号' },
    { id: 10007, name: '小李', nickname: '一直风吹过', role: '前端开发', sex: 'Women', num: 100, age: 24, rate: null, address: '上海市黄浦区44号' },
    { id: 10008, name: '小徐', nickname: '非主流昵称', role: '设计师', sex: 'Man', num: 345, age: 34, rate: null, address: '上海市虹口区44号' },
    { id: 10009, name: '李四', nickname: '暂无', role: '前端开发', sex: 'Man', num: 67, age: 52, rate: 1, address: '深圳市龙岗区94号' },
    { id: 10010, name: '小明', nickname: '一直风吹过', role: '项目经理', sex: 'Women', num: 23, age: 44, rate: undefined, address: '北京市朝阳区105号' },
    { id: 10011, name: '王五', nickname: '自定义的', role: '测试人员', sex: 'Man', num: 56, age: 52, rate: 4, address: '深圳市南山区98号' },
    { id: 10012, name: '小李', nickname: '非主流昵称', role: '设计师', sex: 'Women', num: 24, age: 16, rate: 2, address: '北京市朝阳区863号' }
  ]
})
</script>

https://gitee.com/x-extends/vxe-table