elementui，vue项目开发中el-select支持模糊搜索【下拉选择框支持模糊搜索】

做项目的过程中需要下拉选择框支持模糊查询，并在清空的时候自动展示数据列表，下面这些代码希望对你有帮助

html代码

    <el-form-item label="销售产品" prop="branchFen">
                            <el-autocomplete
                            ref="listMohu"
                                v-model="ruleForm.branchFen"
                                :fetch-suggestions="querySearchGroup"
                                placeholder="请选择"
                                clearable
                                class="filter-item"
                                style="width: 100%; margin-top: 0px"
                                @select="selectGroup"
                                @focus="groupListMe"
                               @clear="clearSearch"
                            />
                        </el-form-item>

js部分代码
data中的数据

ruleForm: { branchFen: ''}
groupArr:[]
groupId:''

methods方法

  querySearchGroup(queryString, cb) {
   var groupArr = this.groupArr;
 	 cb(groupArr);
 },
 selectGroup(val) {
 this.groupId = val.id;
        },
groupListMe(){
   this.$sys_doAjax({
                method: 'GET',
                path: '接口地址',
                data: {
                    parent: ''  //请求参数
                }
            })
                .then((data) => {
                   
                    if (code === '0') {
                        this.groupList = [];
                        this.groupArr = [];
                        this.groupList = data.body.organization;
                        for (const item of this.groupList) {
                            this.groupArr.push({
                                value: item.name, //这里一定是value: '值'
                                id: item.id
                            });
                        }
                       
                    } 
                  
                })
                .catch((err) => {
                 
                    vm.$kpAlert(err.message);
                });

}
//清空自动显示列表
  clearSearch() {
            this.$refs.listMohu.handleFocus();
        },