Vue中-下拉框可以选择可以填写

Posted 2022-02-09 ahao214

<el-form-item label="方法名称">
                            <el-autocomplete popper-class="my-autocomplete"
                                             v-model="customForm.MethodName"
                                             :fetch-suggestions="querySearchMethod"
                                             placeholder="请输入方法名称"
                                             :disabled="IsDisabled"
                                             @select="((item)=>selectMethodChange(item))">
                                <template slot-scope=" item ">
                                    <div class="name"> item.value </div>
                                </template>
                            </el-autocomplete>
                        </el-form-item>

// 方法
            querySearchMethod(queryString, cb) 
                let that = this;
                var solList = []
                that.MethodOptionItems.forEach(item => 
                    solList.push( ‘label‘: item.value, ‘value‘: item.label )
                )

                var results = queryString
                    ? solList.filter(this.createFilterMethod(queryString))
                    : solList;
                // 调用 callback 返回建议列表的数据
                cb(results);
            ,
            createFilterMethod(queryString) 
                let that = this;
                var solList = that.MethodOptionItems;
                return solList => 
                    return (
                        //solList.label.toLowerCase().indexOf(queryString.toLowerCase()) === 0
                        solList.label
                    );
                ;
            ,
            handleSelectMethod(item) 
                console.log(item);
            ,