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