element-ui select下拉框 远程搜索回填选项的时候为什么不能点击

 

在编辑的时候可能需要回填你开始利用远程搜索选好的那些选项。

                    mainteacherid"  filterable remote placeholder="请输入姓名或手机号筛选" clearable :remote-method="getTeacherLists"  :loading="loading"  ref="mainteachername"  :value="mainteachername">
                                   v-for="item in mainteacherlist"
                  :key="item.userid"
                  :label="item.username"
                  :value="item.userid">
                
            

 

        // 获取主讲老师
            getTeacherLists(query){
                this.mainteacherlist= [];
                let zoneid;
                if(this.addFormVisible==true){zoneid=this.addForm.zoneid||this.zoneid}//添加页面
                else{zoneid=this.editForm.zoneid;}
                if (query !== '') {
                  this.loading = true;
                      setTimeout(() => {
                        this.loading = false;
                        let para={
                                page:0,
                                filters:{search:query},
                                zoneid:zoneid,
                            };
                        getTeacherListTimeTable(para).then(res=>{
                                this.mainteacherlist=res.data;
                            
                        });
                    }, 200);
                } else {
                  this.mainteacherlist = [];
                }
            },

只有在输入内容的时候才会触发 getTeacherLists这个函数。也就是说你在打开编辑页面的时候。这个mainteacherlist数组是个空的。所以你v-model绑定的mainteacherid即使能获取到但是显示在页面上的是id值。只有他在mainteacherlist里面找到id对应的name的时候他才会显示name的。

但是如果点击编辑就去访问这个接口，此时根本没有query值也不知道怎么传参。传空的话他会提示请输入内容搜索，获取不到mainteacherlist的值。所以这个方法也不行。

最后我想把我获取的那个name和id都push进mainteacherlist。此时mainteacherlist里面有id有name。就可以显示他id对应的name啦。

还有一个注意的是你认为是编辑就写this.editForm.mainteacherid然后绑定的是这个值也是错的。必须从新定义一个变量mainteacherid，绑定他。

//显示编辑界面

handleEdit: function(index, row) {

this.editForm = Object.assign({}, row);//接口给的list里面就有teacherlist。主讲老师是根据里面的type获取的。这里面编辑的时候可以根据这段代码直接获取到。
                this.assistteachernames=[];
                this.assistteacherids=[];
                this.mainteacherlist=[];
                this.editForm.teacherlist.forEach(res=>{
                        this.mainteacherid=res.userid;
                        this.mainteachername=res.username;
                        this.mainteacherlist.push(res);
                   
                })

}）