vxe-table 如何实现跟 excel 一样的筛选框，支持字符串、数值、日期类型筛选
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' 或空默认设置为字符串类型筛选框
<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' 设置为数值类型筛选框
<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' 设置为日期类型筛选框
<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>
浙公网安备 33010602011771号