@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。
@visible-change="getZoneLists" 注意这里没有括号，不是getZoneLists()
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呢？
首先在编辑界面打开的时候也要触发获取那个所有下拉列表的函数。
第二保证你的value值能在下拉列表中找到对应的。比如校区id=9.但是我的下拉列表里面的校区没有id=9的。所以他找不到9对应的那个label。因此页面还是显示9.
我还遇到过一种错误，我把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函数添加。所以报错了