vue+elementui中,el-select多选下拉列表中,如何同时获取:value和:label的值?
【摘要】 大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂。 项目场景:正如题目所说,今天在项目过程中遇到了个需求,因为需要在前台展示运动员的名称,但是运动员的编号在别的地方还需要使用,所以想了想,还是将编号和名称一并添加到数据库中,到时候拿的时候也比较方便。就不用在根据编号查询一遍呢了(接口是外部的,重新查的话会影响效率)使用的技术:element-ui的el-select标签 问题描述:下面是下...
大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂。
项目场景:
正如题目所说,今天在项目过程中遇到了个需求,因为需要在前台展示运动员的名称,但是运动员的编号在别的地方还需要使用,所以想了想,还是将编号和名称一并添加到数据库中,到时候拿的时候也比较方便。就不用在根据编号查询一遍呢了(接口是外部的,重新查的话会影响效率)
使用的技术:element-ui的el-select标签
问题描述:
下面是下拉列表展示的代码:
<el-form-item label="人员名称" >
<el-select
v-model="fanganform.pbeizhu"
multiple
placeholder="请选择运动员"
:style="{width: '93%'}"
>
<el-option
v-for="item in athlist"
:key="item.id"
:label="item.aname"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
效果如下:
要想获取value值很简单,直接提交表单,默认就是获取的value,但是现在还需要获取label的值,该如何获取呢?
思路分析:
给下拉列表添加改变**@change
**事件,当option选项改变时触发,根据value
值遍历数据源中的name
即可。
解决方案:
1.添加<el-select>
的@change
事件。
<el-form-item label="人员名称" >
<el-select
@change="getPeoples"
v-model="fanganform.pbeizhu"
multiple
placeholder="请选择运动员"
:style="{width: '93%'}"
>
<el-option
v-for="item in athlist"
:key="item.id"
:label="item.aname"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
2.methods
中,在getPeoples
方法中写遍历数据源的代码,然后给变量中赋值即可。
//获取运动员名称(根据选择下拉列表)--添加方案
getPeoples(val){
var names = "";
for(let i=0;i<=val.length-1;i++){
this.athlist.find((item)=>{
if(item.id == val[i]){
names+=item.aname+",";
}
});
}
this.fanganform.ppersons = names;
},
希望能帮助到你,今天的分享就到这里啦,我们明天在见。
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)