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
            }
          }
}