Vue+Element+Select获取选中的对象
案例演示:获取select当前选中的所有内容
<el-select v-model="value8" filterable placeholder="请选择" value-key="id" @change="currentSel">
<el-option v-for="item in options" :key="item.id" :label="item.label" :value="item"></el-option>
</el-select>
options: [
{
value: "选项1",
id: 1,
code: "xuanxiang1",
label: "黄金糕"
},
{
code: "xuanxiang2",
id: 2,
value: "选项2",
label: "双皮奶"
},
{
id: 3,
value: "选项3",
code: "xuanxiang3",
label: "蚵仔煎"
},
{
value: "选项4",
id: 4,
code: "xuanxiang4",
label: "龙须面"
},
{
value: "选项5",
label: "北京烤鸭",
id: 5,
code: "xuanxiang5"
}
],
currentSel(selVal) {
this.code = selVal.code;
this.name = selVal.label;
console.log("选择的name为:" + this.name, "选择的code为:" + this.code);
console.log(selVal);
},
若有不明白请加群号:复制 695182980 ,也可扫码,希望能帮助到大家。
Vue+Element+Select获取选中的对象的更多相关文章
- vue操作select获取option值
如何实时的获取你选中的值 只用@change件事 @change="changeProduct($event)" 动态传递参数 vue操作select获取option的ID值 如果 ...
- select获取选中的option(包含value和text,重点是text怎么获取)
简单描述:后台需要获取到select标签选择的内容,也就是text,该怎么取呢?很简单. 代码: //hml代码<div class="col-md-6"> <l ...
- JQuery/JS select标签动态设置选中值、设置禁止选择 button按钮禁止点击 select获取选中值
//**1.设置选中值:(根据索引确定选中值)**// var osel=document.getElementById("selID"); //得到select的ID var o ...
- vue element select多选回显
我们经常在使用 Element组件里面的 select多选 场景:添加账号的时候需要选择可见分公司(分公司为多选),添加成功之后可以编辑,需要回显添加时所提交的分公司 代码如下: 多选框: data( ...
- 使用layui框架的select获取选中的值
在使用时需要注意:select标签的外层需要加上类名".layui-form" 接下来就是根据需求来改变下拉框的内容了,直接给select的option重新赋一次值,记得加上对应的 ...
- select获取选中项的值与文本
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- select 获取选中option的值方法,选中option方法
options=$("#Select option:selected"); options.attr('name');options.val(); options.text(); ...
- 获取select标签选中状态 的label的值。
<select name="procode" onchange="alert(this.options[this.selectedIndex].text)" ...
- 使用JavaScript获取select元素选中的value和text
示例代码如下(js直接写在了html里面,没有写在一个单独的外部文件中): <!DOCTYPE html> <html> <head> <meta name= ...
随机推荐
- 279. Perfect Squares(动态规划)
Given a positive integer n, find the least number of perfect square numbers (for example, 1, 4, 9, 1 ...
- Sketchup (待续)
Sketchup插件 来自20个最好用的SketchUp插件 https://www.bilibili.com/video/av17242031/?from=search&seid=15336 ...
- storm-sql-kafka问题情况
首先上官方文档:http://storm.apache.org/releases/1.2.2/storm-sql.html 解决的问题 1.kafka版本不对 开始测试时采用storm1.2.2+ka ...
- Oarcle之单行函数(下)
1.字符函数 ltrim 去除字符串左边指定字符,如果不设定第二个参数,则默认去除空格 rtrim去除字符串右边指定字符,如果不设定第二个参数,则默认去除空格 例如:select ltrim (‘a ...
- 利用 html js判断 客户端是否安装了某个app 安装了就打开 否则跳转到gp
三种方式 方式一:简单的进行打开app,延时操作若未打开直接跳gp function isInstalled(){ var urlFrag = 'somepars'; var the_href = ' ...
- C#匿名类型和动态解析减少定义传输类模板
C#作为强类型语言,在序列化和反序列化(json)场景中对字符串解析常常需要定义强类型模板,造成编码上的繁琐.其实可以使用匿名类型和动态解析减少json序列化时候的数据模板定义: string a = ...
- Python hasattr() 函数
hasattr() 函数用于判断对象是否包含对应的属性.(has attribute) hasattr(object, name) 参数 object -- 对象. name -- 字符串,属性名. ...
- self study 权限 permission
demo 测试成功, import 'package:permission/permission.dart'; Future requirePermission()async { await Perm ...
- 小米5查看设备号信息及验证type-c数据线
首先,下载adb软件. 接着打开系统的开发者模式和调试模式. 打开cmd软件,切换到adb软件文件夹所在路径,输入命令:adb devices,则能看到设备的设备号信息. 如果设备号是00000001 ...
- chrome浏览器导出文件提示病毒扫描失败
转自https://zhidao.baidu.com/question/758059392558639324.html 1.windows+R,打开运行 2.输入regedit.exe,确定,打开注册 ...