应用场景
在使用iview组件库中,使用select下拉框,绑定on-change事件时,根据不同业务场景,需要返回value或label文本的记录。
on-change事件返回label
下拉框的on-change时间,默认情况下return的是value值。如果需要返回label文本的话,需要:
1)在select标签中增加属性 :label-in-value="true"
2)在对应的事件监听方法中获取label即可
<Select v-model="formItem.courseId" :label-in-value="true" @on-change="showCourseName">
<Option v-for="item in courseList" :value="item.id" :key="item.id" >{
{
item.courseName }}</Option>
</Select>
methods:{
showCourseName(data){
if(data!=undefined){
this.formItem.courseName = data.label
}
}
}
on-change事件返回value
上述方式说了,默认情况下返回value值。这里介绍下,在获取到label文本值的情况下,获取value值,其实非常简单:
<Select v-model="formItem.courseId" :label-in-value="true" @on-change="showCourseName">
<Option v-for="item in courseList" :value="item.id" :key="item.id" >{
{
item.courseName }}</Option>
</Select>
methods:{
showCourseName(data){
if(data!=undefined){
this.formItem.courseName = data.value
}
}
}