element-ui select 的一些问题

@visible-change  select下拉框出现/隐藏时触发。默认参数是点击时展开为true。关闭为false。
   但是你在html写的时候要这样

<el-select v-model="zoneid" @change="getZoneCoursesetLists()"  label="请选择校区"  @visible-change="getZoneLists">
                        <el-option
                          v-for="item in schools"
                          :key="item.zoneid"
                          :label="item.zonename"  
                          :value="item.zoneid">
                        </el-option>
</el-select>

显示的是label

获取的是value

绑定的是选中的内容的value。

这个和element-ui 的el-checkbox相反的啊。checkbox  的v-model绑定的是label的值，就算你写了value他也获取不到的。可以看这篇文章。

https://blog.youkuaiyun.com/qq_33769914/article/details/82744209

 

@visible-change="getZoneLists"  注意这里没有括号，不是getZoneLists()

如果你用这个visible-change获取下拉的时候可能会先出现无数据，然后再加载出来数据的。像下面这样。总感觉体验不是很好。

  getZoneLists(flag){  

  if(flag==true){ alert("你展开了下拉！")  }

   else {alert("你缩回了下拉！")}

  } 
 

 

获取下拉列表。进页面就得去访问的。

getList(){

      getZoneAllCourse().then(res=>{//所有的
                        if(res.code==1){
                            this.schools=res.data;
                            if(this.schools.length>0){
                               this.zoneid=this.schools[0].zoneid;    //默认选中第一个。
                            }
                          }else{
                              this.$message({
                                message:res.msg,
                                type: 'error'
                             });
                          }
                })

}

 

下拉数据改变触发.html里面写的change事件

getZoneCoursesetLists(){

     在这里可以是根据select的内容去获取列表什么的。

}

 

 

注意注意。在编辑的时候。为什么有时候数据显示的是给的那个value的id，而不是label里面的name呢？

首先在编辑界面打开的时候也要触发获取那个所有下拉列表的函数。新增的时候也要获取。你最好是在页面显示之前就获取所有的下拉。或者是已进入页面就获取下拉，这样就不会出现先闪现一下id再出现label的情况啦。

第二保证你的value值能在下拉列表中找到对应的。比如校区id=9.但是我的下拉列表里面的校区没有id=9的。所以他找不到9对应的那个label。因此页面还是显示9.

那如果为9的时候我希望它显示的是暂未找到对应校区，该怎么办呢？那么我们可以直接定义value="暂未找到对应校区";

 

 

我还遇到过一种错误，我把value值上面写的是name值。所以他一直显示的是id。

还有打开页面的时候必须获取到了所有的下拉。这样打开编辑页面看到的才是数字对应的name值。如果你下拉设置成@change那就没什么问题。因为进去把值赋值了。就触发了change。但是如果你写的@visible-change 。那就得再打开页面的时候调接口啦

 

多选，加一个multiple 的属性。

<el-select v-model="value5" multiple placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select>

再多选时遇到的问题是，报错了。Error in event handler for "handleOptionClick": "TypeError: value.push is not a function"

原因是：多选最后获取的内容是个数组。里面放的是你选中的元素对应的value值。你如果定义的时候没有定义成数组，他就没办法使用push函数添加。所以报错了