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
            }
          }
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章