SOURCE

var Main = {
  data() {
     return {
                inputValue:null,
                selectValue:null,
                dateValue:null,
                gridOptions: {
                    ref:"filterTable",
                    border: true,
                    resizable: true,
                    showHeaderOverflow: true,
                    showOverflow: false,
                    showFooter:true,
                    height: 300,
                    align: 'left',
                    toolbarConfig: {
                        slots: {
                            buttons: 'toolbar_buttons'
                        }
                    },
                    columns: [
                        { type: 'seq', width: 50 },
                        { field: 'name', title: 'name',align:"right", slots: {
                                header: 'input_default'
                            } },
                        { field: 'sex', title: 'sex', slots: {
                                header: 'input_default'
                            }},
                        { field: 'address', title: 'Address', showOverflow: true, slots: {
                                header: 'input_default'
                            } }
                    ],
                    data: [
                        { id: 10001, name: 'Test1', nickname: 'T1', role: 'Develop', sex: 'Man', age: 0, address: 'Shenzhen' },
                        { id: 10002, name: 'Test2', nickname: 'T2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
                        { id: 10003, name: 'Test3', nickname: 'T3', role: 'PM', sex: 'Man', age: 100, address: 'Shanghai' },
                        { id: 10004, name: 'Test4', nickname: 'T4', role: 'Designer', sex: 'Women ', age: 70, address: 'Shenzhen' },
                        { id: 10005, name: 'Test5', nickname: 'T5', role: 'Develop', sex: 'Women ', age: 10, address: 'Shanghai' },
                        { id: 10006, name: 'Test6', nickname: 'T6', role: 'Designer', sex: 'Women ', age: 90, address: 'Shenzhen' },
                        { id: 10007, name: 'Test7', nickname: 'T7', role: 'Test', sex: 'Man ', age: 5, address: 'Shenzhen' },
                        { id: 10008, name: 'Test8', nickname: 'T8', role: 'Develop', sex: 'Man ', age: 80, address: 'Shenzhen' }
                    ]
                },
                filterArray:{filters: [{operator: "like", column: "cusName", value: "2"}]}
            }
  },
        methods:{
            filterChange(v,field){

                const xTable = this.$refs.filterTable;
                const column = xTable.getColumnByField(field);

                if(!column.filters){
                    column.filters = [{}];
                }

                xTable.setFilter(column, [
                    {data:v,checked:true}
                ])

                // const option = column.filters[0];
                // option.data = v;
                // option.checked = true
                debugger
                // 搜出来暂无数据
                xTable.updateData()
            }
        }
};
var Ctor = Vue.extend(Main);
new Ctor().$mount('#app')

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
<script src="https://cdn.jsdelivr.net/npm/vxe-table"></script>
<!-- 使用 cdn 引用方式需要注意是否锁定版本，默认指向最新版本 -->

<div id="app">
  <template>
    <div class="grid filter">
        <vxe-grid v-bind="gridOptions">
            <template v-slot:toolbar_buttons>
                <vxe-button @click="gridOptions.align = 'left'">居左</vxe-button>
                <vxe-button @click="gridOptions.align = 'center'">居中</vxe-button>
                <vxe-button @click="gridOptions.align = 'right'">居右</vxe-button>
            </template>

            <template v-slot:input_default="{ column }">
                <div class="slotBox">
                    <p class="titleBox">{{column.title}}</p>
                    <div class="filterBox">
                        <vxe-input placeholder="搜索" size="mini" v-model="inputValue" size="mini" @change="filterChange($event,column.property)"></vxe-input>
                    </div>
                </div>
            </template>

        </vxe-grid>
    </div>
  </template>
</div>

@import url("https://cdn.jsdelivr.net/npm/vxe-table/lib/style.css");

 .filterBox{
        border-top:1px solid #ddd;
        padding: 4px;
        background: #ffffff;
    }
    .titleBox{
        padding:5px 10px;
        margin: 0;
        line-height: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .grid .slotBox{
        position: absolute;
        top: 0;
        left:0;
        width: calc(100% - 1px );
    }
    .grid .vxe-cell--title{
        width: 100%;
    }
    .grid .el-select,.grid .el-date-editor{
        width: 100%;
    }
    .grid .el-select .el-input__inner,.grid .el-date-editor .el-input__inner{
        height: 28px;
        line-height: 28px;
    }
    .grid .el-select .el-input .el-input__icon,.grid .el-date-editor .el-input__icon{
        line-height: 28px;
    }
    .grid .el-date-editor.el-input,.grid .el-date-editor.el-input__inner{
        width: 100%;
    }
    .grid .vxe-table .vxe-header--column{
        padding: 0!important;
    }
    .grid .vxe-table .vxe-header--column.col--ellipsis{
        height: 64px;
    }