vue 表格 vxe-table 开启筛选、excel 筛选框列表样式
<p>vue 表格 vxe-table 开启筛选、excel 筛选框列表样式，通过设置列的 filterRender.name = 'FilterAggregation'启用组合筛选功能</p><p>https://vxetable.cn</p>
<p><img src="https://img2024.cnblogs.com/blog/3563285/202512/3563285-20251226181333757-801010659.gif"></p>
<pre><code class="language-html"><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>
</code></pre>
<p>https://gitee.com/x-extends/vxe-table</p><br><br>
来源：https://www.cnblogs.com/qaz666/p/19406274
頁:
[1]