vxe-table 如何實現跟 excel 一樣的篩選框，支持字符串、數值、日期類型篩選

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

字符串類型

通過設置 filterRender.cellType='string' 或空默認設置為字符串類型篩選框

image

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

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

const gridOptions = reactive({
  border: true,
  height: 500,
  showOverflow: true,
  columnConfig: {
    resizable: true
  },
  columns: [
    { type: 'seq', width: 70 },
    {
      field: 'name',
      title: '名稱',
      sortable: true,
      filterRender: {
        name: 'FilterCombination'
      }
    },
    {
      field: 'nickname',
      title: '暱稱',
      sortable: true,
      filterRender: {
        name: 'FilterCombination'
      }
    },
    { field: 'role', title: '角色' },
    { field: 'sex', title: '性別' },
    { field: 'age', title: '年齡' },
    { field: 'num', title: '分數' },
    { field: 'rate', title: '評分' },
    { 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: 1, address: '上海市黃浦區44號' },
    { id: 10008, name: '小徐', nickname: '非主流暱稱', role: '設計師', sex: 'Man', num: 345, age: 34, rate: 3, 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: 5, 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>

數值類型

通過設置 filterRender.cellType='number' 設置為數值類型篩選框

image

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

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

const gridOptions = reactive({
  border: true,
  height: 500,
  showOverflow: true,
  columnConfig: {
    resizable: true
  },
  columns: [
    { type: 'seq', width: 70 },
    { field: 'name', title: '名稱' },
    { field: 'nickname', title: '暱稱' },
    { field: 'role', title: '角色' },
    { field: 'sex', title: '性別' },
    { field: 'age', title: '年齡' },
    {
      field: 'num',
      title: '分數',
      sortable: true,
      filterRender: {
        name: 'FilterCombination',
        cellType: 'number'
      }
    },
    {
      field: 'rate',
      title: '評分',
      sortable: true,
      filterRender: {
        name: 'FilterCombination',
        cellType: 'number'
      }
    },
    { 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: 1, address: '上海市黃浦區44號' },
    { id: 10008, name: '小徐', nickname: '非主流暱稱', role: '設計師', sex: 'Man', num: 345, age: 34, rate: 3, 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: 5, 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>

日期類型

通過設置 filterRender.cellType='date' 設置為日期類型篩選框

image

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

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

const gridOptions = reactive({
  border: true,
  height: 500,
  showOverflow: true,
  columnConfig: {
    resizable: true
  },
  columns: [
    { type: 'seq', width: 70 },
    { field: 'name', title: '名稱' },
    { field: 'nickname', title: '暱稱' },
    { field: 'role', title: '角色' },
    {
      field: 'date1',
      title: '日期1',
      sortable: true,
      filterRender: {
        name: 'FilterCombination',
        cellType: 'date'
      }
    },
    {
      field: 'date2',
      title: '日期2',
      sortable: true,
      filterRender: {
        name: 'FilterCombination',
        cellType: 'date'
      }
    },
    { field: 'address', title: '地址', minWidth: 200 }
  ],
  data: [
    { id: 10001, name: '張三', nickname: '非主流暱稱', role: '前端開發', sex: 'Man', num: 23, age: 28, rate: 3, date1: '2025-10-02', date2: '', address: '北京市朝陽區33號' },
    { id: 10002, name: '小李', nickname: '使用説明', role: '測試人員', sex: 'Women', num: 38, age: 22, rate: 4, date1: '2025-11-12', date2: '2025-09-24', address: '廣州市白雲區964號' },
    { id: 10003, name: '小明', nickname: '自定義的', role: '項目經理', sex: 'Man', num: 33, age: 32, rate: 0, date1: '', date2: '2025-10-015', address: '深圳市龍華區94號' },
    { id: 10004, name: '李四', nickname: '一直風吹過', role: '前端開發', sex: 'Women', num: 456, age: 24, rate: 1, date1: '2025-12-18', date2: '2025-08-28', address: '廣州市白雲區15號' },
    { id: 10005, name: '王五', nickname: '暫無', role: '測試人員', sex: 'Women', num: 42, age: 42, rate: 5, date1: '2026-07-15', date2: '2026-05-21', address: '北京市朝陽區32號' },
    { id: 10006, name: '張三', nickname: '使用説明', role: '後端開發', sex: 'Man', num: 23, age: 38, rate: 0, date1: '2023-04-10', date2: '2025-11-29', address: '深圳市羅湖區94號' },
    { id: 10007, name: '小李', nickname: '一直風吹過', role: '前端開發', sex: 'Women', num: 100, age: 24, rate: 1, date1: '2024-09-10', date2: '2025-02-05', address: '上海市黃浦區44號' },
    { id: 10008, name: '小徐', nickname: '非主流暱稱', role: '設計師', sex: 'Man', num: 345, age: 34, rate: 3, date1: '', date2: '2027-12-28', address: '上海市虹口區44號' },
    { id: 10009, name: '李四', nickname: '暫無', role: '前端開發', sex: 'Man', num: 67, age: 52, rate: 1, date1: '2022-08-07', date2: '2029-08-17', address: '深圳市龍崗區94號' },
    { id: 10010, name: '小明', nickname: '一直風吹過', role: '項目經理', sex: 'Women', num: 23, age: 44, rate: 5, date1: '2025-02-05', date2: '2026-05-04', address: '北京市朝陽區105號' },
    { id: 10011, name: '王五', nickname: '自定義的', role: '測試人員', sex: 'Man', num: 56, age: 52, rate: 4, date1: '2025-09-16', date2: '2028-10-15', address: '深圳市南山區98號' },
    { id: 10012, name: '小李', nickname: '非主流暱稱', role: '設計師', sex: 'Women', num: 24, age: 16, rate: 2, date1: '2025-10-25', date2: '', address: '北京市朝陽區863號' }
  ]
})
</script>

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