ElementUI中获取select 的label值
时间:2019-04-19
本文章向大家介绍ElementUI中获取select 的label值,主要包括ElementUI中获取select 的label值使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
有俩种方案:
1、可以通过对option里value 属性的赋值,得到想要的结果值(适用于多选和单选,多选则在 中添加multiple,可以参看element官网);
代码如下:
let selectionOption = [{
value: 1,
label: '中国'
},{
value: 2,
label: '美国'
},{
value: 3,
label: '英国'
},{
value: 4,
label: '澳大利亚'
}];
<el-select
@change='handleChange'
v-model="selectVal"
placeholder="请选择"
>
<el-option
v-for="item in selectionOption"
:label="item.label"
:value="item.value" //这里赋值是**item.lvaue**,那么v-model里的selectVal 将会得到选中对象的value,如果赋值为**item**,将会得到选中的对象,例如:{value:2,label:'美国'},同时,v-model得到也是一个对象,可以在change事件里将返回的值分别赋予需要的变量;
:key="item.value"
>
</el-option>
</el-select>
<script>
export default {
data() {
return {
selectVal: this.value || '',
reasonTypes : [{
value: 1,
label: '中国'
},{
value: 2,
label: '美国'
},{
value: 3,
label: '英国'
},{
value: 4,
label: '澳大利亚'
}]
};
},
methods: {
//需要将返回对象的值拆分,可以使用chang函数
handleChange(data) {
//如果上面:value赋的是对象,则可以将返回的对象赋予其他变量,这里的data是选中的对象,那么data.label则是reasonTypes中的label值,如果下拉中选中美国,那么this.selectVal 值为“美国”
this.selectVal = data.label
},
},
};
</script>
2、option里:value 没有赋值为对象时,(也就是这样赋值:value="item.value"而不是:value="item"时,不理解看上面注释),也可以在change方法中得到选中的对象;
1)多选情况:
handleChange(val) {
let resultArr= this.reasonTypes.filter((ele,index,arr)=>{
return val.some(item=>{return item===ele.value});
});
},
2)单选情况:
handleChange(val) {
let resultArr= this.reasonTypes.filter((ele,index,arr)=>{
return ele.value === val
});
//这个方法得到的是数组对象,例如:[{
value: 2,
label: '美国'
}]
},
handleChange(val) {
let resultArr = this.reasonTypes.find((item)=>{
return item.value === val;
});
//这个方法得到的是对象,例如:{
value: 2,
label: '美国'
}
},
- 一个实现批量抓取淘女郎写真图片的爬虫
- 计算机程序的思维逻辑 (8) - char的真正含义
- 搭建Docker私有仓库--自签名方式
- 详解JavaScript闭包
- Python多进程抓取全国邮政编码和长途区号
- [个人翻译]Redis 集群教程(下)
- [个人翻译]Redis 集群教程(中)
- 自学Apache Spark博客(节选)
- scrapy爬取免费代理IP存储到数据库构建自有IP池
- 每天一个Linux命令:netstat
- Hadoop - MapReduce
- 进击的爬虫:用Python搭建匿名代理池
- 计算机程序的思维逻辑 (5) - 小数计算为什么会出错?
- QQ空间爬虫最新分享,一天 400 万条数据
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Angular list列表绑定的一个例子
- Angular双向绑定的一个例子
- mysqlbinlog命令详解 Part 3 - 查看十六进制格式内容
- MySQL information_schema详解 CHARACTER_SETS 表
- 彻底弄懂 Unicode 编码
- 两种使用代码获得SAP CRM product sales status的办法
- C#: "$"作用和用法
- SAP ABAP字符和字符串变量隐式转换的一些规则
- MySQL information_schema详解 COLLATION_CHARACTER_SET_APPLICABILITY
- 如何处理Angular项目在Visual Studio Code打开报关于@Decorators的警告信息
- QT 中普通数值与字符串之间的转换
- C# 时间与时间戳互转 13位
- 在C#中ref和out具体怎么使用?在什么情况下使用?
- Vs code 创建vue模版
- [892]python中re.split()方法