iview组件select下拉框on-change事件返回value或label

应用场景

在使用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
            }
          }
}