1 说明

rxgrid 使用类似ant design vue的头部 过滤 ；

2 案例代码

注意：如果表格的数据是使用url 的情况下 只需要在 搜索的时候 改变 :queryParam的传参
再 用 this.$refs.[当前表格的ref].loadData() 就可以实现查询；

//html
<rx-grid
                         ref="userGrid"
                         :bordered="true"
                         :showColumnsMenu="true"
                         :dataSource="gridData"
                         :columns="columns"
                         :defaultPageSize="15"
                         :pageSizeOptions="['10','15','30','60']"
                         id-fied="userNo"
                         :allowRowSelect="true"
                         :multiSelect="true"
                    >
                        <a-icon slot="filterIcon"  slot-scope="{filtered}" type="search" :style="{ color: filtered ? '#108ee9' : undefined }"/>
                        <div slot="filterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }">
                            <a-input                          
                                :placeholder="`Search ${column.dataIndex}`"
                                :value="selectedKeys[0]"
                                style="width: 188px; margin-bottom: 8px; display: block;"
                                @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
                                @pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
                            />
                            <a-button
                                type="primary"
                                icon="search"
                                size="small"
                                style="width: 90px; margin-right: 8px"
                                @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
                            >
                                Search
                            </a-button>
                            <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters)">
                                Reset
                            </a-button>
                        </div>
                        <div slot="email" slot-scope="{text,record,index,column}">
                            {{text}}
                        </div>
                    </rx-grid>

//javascrpit
export default{
    data(){
        return {
            gridData:[],
            storageData:[
                    {fullname:'张一',userNo:'01',email:'@123'},
                    {fullname:'张二',userNo:'02',email:'qw'},
                    {fullname:'张三',userNo:'03',email:'as'},
                    {fullname:'张四',userNo:'04',email:'zx'},
                    {fullname:'张五',userNo:'05',email:'cd'},
                    {fullname:'张五',userNo:'06',email:'er'},
                    {fullname:'张五',userNo:'07',email:'tf'},
                    {fullname:'张五',userNo:'08',email:'vg'},
                    {fullname:'张五',userNo:'09',email:'bh'},
                    {fullname:'张五',userNo:'10',email:'nj'},
                    {fullname:'张五',userNo:'12',email:'yu'},
                    {fullname:'张五',userNo:'13',email:'ml'},
                    {fullname:'张五',userNo:'14',email:'ij'},
                    {fullname:'张五',userNo:'15',email:'ok'},
                    {fullname:'张五',userNo:'16',email:'gd'},
                    {fullname:'张五',userNo:'17',email:'eh'},
                    {fullname:'张五',userNo:'18',email:'cs'},
                    {fullname:'张五',userNo:'19',email:'hf'},
                    {fullname:'张五',userNo:'20',email:'mr'},
                    {fullname:'张五',userNo:'21',email:'wc'}
            ],
            columns:[
                {
                    title: '序号',
                    type: 'indexColumn',
                    width: 80,
                    dataIndex: 'serial',
                    scopedSlots: {customRender: 'serial'}
                },
                {
                    title: '姓名',
                    dataIndex: 'fullname',
                    width:160
                },
                {
                    title: '工号',
                    dataIndex: 'userNo',
                    width:120
                },
                {
                    title: '邮件',
                    width:120,
                    dataIndex: 'email',
                    scopedSlots: {//过滤对应的slot
                        filterDropdown: 'filterDropdown',
                        filterIcon: 'filterIcon',
                        customRender: 'email'
                    }
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    width:180
                }
            ]
        }
    },
    created(){
        //默认进来的时候 把全部的数据给表格
        this.gridData = this.storageData ;
    },
    methods:{
         handleSearch(selectedKeys, confirm, dataIndex) { //点击search的事件
            //这个可以关闭 搜索层
            confirm();
            //过滤出符合条件的数据；
            let reg = new RegExp(selectedKeys[0].toLowerCase());
            let dataSourceCopy = [];
            //storageData表格的所有数据
            //toLowerCase()用来不区分大小写查询 看情况来定；
            this.storageData.forEach(item=>{
                if(item.email !== null && item.email){
                    if(item.email.toString().toLowerCase().match(reg)){
                        dataSourceCopy.push(item);
                    }
                }
            })
            this.gridData = dataSourceCopy ;
        },
        handleReset(clearFilters) {//取消按钮事件
            clearFilters();
            //把全部数据给表格；
            this.gridData = this.storageData ;
        },
    }

}