琪琪的假期最新版
108.12MB · 2025-10-10
vxe-table 实现列头授权自定义插槽模板，自定义输入框
查看官网：https://vxetable.cn
gitbub：https://github.com/x-extends/vxe-table
gitee：https://gitee.com/x-extends/vxe-table
通过自定义插槽模板 floatingFilter 实现，可以同时自定义弹出筛选面板和浮动筛选的自定义模板，非常灵活实现自定义组件
<template> <div> <vxe-grid ref="gridRef" v-bind="gridOptions"> <template #nameFilter="{ option }"> <vxe-input v-model="option.data" clearable @change="updateNameFilterStatus(option)"></vxe-input> </template> <template #nameFloatingFilter="{ option, column }"> <vxe-input v-model="option.data" clearable @change="changeNameFilter(option, column)"></vxe-input> </template> </vxe-grid> </div></template><script setup>import { ref, reactive } from 'vue'import XEUtils from 'xe-utils'const gridRef = ref()const gridOptions = reactive({ border: true, height: 400, filterConfig: { showIcon: true }, floatingFilterConfig: { enabled: true }, columns: [ { field: 'name', title: 'Name', filters: [ { data: '' } ], filterMethod ({ option, row, column }) { if (option.data) { return `${row[column.field]}`.indexOf(option.data) > -1 } return true }, slots: { filter: 'nameFilter', floatingFilter: 'nameFloatingFilter' } }, { field: 'sex', title: 'Sex' }, { field: 'age', title: 'Age' }, { field: 'date', title: 'Date' } ], data: [ { id: 10001, name: 'Test1', role: 'Develop', sex: 'Woman', age: 28, date: '2025-10-01' }, { id: 10002, name: 'Test2', role: 'Test', sex: 'Man', age: 22, date: '2025-10-02' }, { id: 10003, name: 'Test3', role: 'PM', sex: 'Woman', age: 32, date: '2025-10-05' }, { id: 10004, name: 'Test4', role: 'Designer', sex: 'Man', age: 54, date: '2025-10-14' }, { id: 10005, name: 'Test5', role: 'Develop', sex: 'Man', age: 44, date: '2025-09-01' }, { id: 10006, name: 'Test6', role: 'Develop', sex: 'Woman', age: 24, date: '2025-08-15' }, { id: 10007, name: 'Test7', role: 'Test', sex: 'Man', age: 52, date: '2025-11-12' }, { id: 10008, name: 'Test8', role: 'PM', sex: 'Woman', age: 34, date: '2025-11-27' }, { id: 10009, name: 'Test9', role: 'PM', sex: 'Man', age: 24, date: '2025-10-18' }, { id: 100010, name: 'Test10', role: 'Develop', sex: 'Woman', age: 24, date: '2025-10-25' } ]})const updateNameFilterStatus = (option) => { const $grid = gridRef.value if ($grid) { $grid.updateFilterOptionStatus(option, !!option.data) }}// 节流函数、间隔0.5秒触发一次查询const changeNameFilter = XEUtils.debounce((option, column) => { const $grid = gridRef.value if ($grid) { $grid.updateFilterOptionStatus(option, !!option.data) $grid.saveFilter(column) // $table.saveFilterByEvent(new Event('keydown'), column) }}, 500, { leading: false, trailing: true })</script>https://gitee.com/x-extends/vxe-table
