element cascader中的before-filter钩子输入框的搜索关键词为空时不触发，还有什么方法监测输入关键词的变化

Question

问题遇到的现象和发生背景

我想监测输入关键词的变化，当有值时进行数据请求，没值时默认请求初始数据

问题相关代码，请勿粘贴截图

<el-cascader
        v-model="cascaderValue"
        :options="Options"
        :props="Props"
        ref="myCascader"
        :show-all-levels='showAllLevels'
        :filterable="Filterable"
        :clearable='clearable'
        separator
        :debounce='debounce'
        @change="handleChange"
        @expand-change="expandChange"
        :before-filter="searchFilter">
 </el-cascader>

searchFilter(searchKey){
            this.searchVal=searchKey
            let query={
                with:1,
                paged:1,
                per_page:100,
                search:this.searchVal
            }
            this.getOptions(query)
            return false
},

getOptions(query){
            const req = new ARequest({
                method:'get',
                url:`/api/vc/term?query[term_group]=term-product`,
                nonce:true,
                lang:true,
                catch:true,
                query
            })
            req.send().then(res=>{
                // 判断是否是展开选项还是搜索或者默认加载数据
                if(this.soureVal!=''){
                    this.getMenuBtnList(this.Options,res,this.soureVal)
                }else if(this.searchVal!=''){
                    let Options=[]
                    res.forEach(item=>{
                        let obj = {
                            label:item[this.nameKey],
                            value:item[this.idKey]
                        }
                        Options.push(obj)
                    })
                    this.Options = Options
                    this.searchVal=''
                }else if(query.search==''||this.soureVal==''){
                    let Options=[]
                    res.forEach(item=>{
                        let obj = {
                            label:item[this.nameKey],
                            value:item[this.idKey],
                            children:[]
                        }
                        Options.push(obj)
                    })
                    this.Options = Options
                }
            })
            
        },

getMenuBtnList (menuTreeList, menuList,val) {
            let list =[]
            for (let item of menuTreeList) {
                if(menuList.length==0&&item.value==val){
                    let {children,...data}=item
                    item=data
                }else{
                    for(let item1 of menuList){
                        if (item.value === val) {
                            list.push({
                                label: item1[this.nameKey],
                                value: item1[this.idKey],
                                children: []
                            });
                            item.children=list
                        } else if (item.children.length > 0 ) {
                            this.getMenuBtnList(item.children, menuList,val);
                        }
                    }
                }
            }
            this.soureVal=''
        },

created(){
        let query = {
            with:1,
            paged:1,
            per_page:-1,
            'query[parent]':0
        } 
        this.getOptions(query)
 }

Answer 1

cascaderValue 判断这个的值 。给 不同的参数 。

或者 监听 这个 watch也可以做到 。

filter-method 这个可以自定义逻辑