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

6 篇文章 0 订阅

应用场景

在使用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
            }
          }
}
  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

瓜仙人

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值