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= ...
随机推荐
- meterpreter 持久后门
创建持久后门 当成功获取目标系统的访问权限后,需要寻找方法来恢复与目标主机的连接,而无需再进入目标系统.如果目标用户破坏了该连接,例如重新启动计算机,此时使用后门将允许自动重新与目标系统建立连接.为了 ...
- sql server导出数据,详细操作!(自用)
右键数据库——>任务——>导出数据 填写数据源连接信息 填写 要导入的数据库 连接信息 导出表时,全选,[编辑映射],勾选启用标识插入,这样才能让自增的字段 行正常插入. 然后导出即可. ...
- Delphi使用两种不同方法获取系统端口信息--(装载)
Delphi使用两种方法获取windows系统的端口,还可测试发送消息,点击获取端口信息后,可依次得到如下信息:DCB结构大小.波特率大小.XON的临界值.XOFF的临界值.字符位数.奇偶检验位.停止 ...
- Log4j介绍与使用
Log4j三大组件 1) 日志记录器Logger负责输出日志信息,并能够对日志信息进行分类筛选,决定哪些日志信息应该被输出,哪些该被忽略.Loggers组件输出日志信息时分为5个级别:DEBUG.IN ...
- IO流(三)
五.Java序列化 概述 Java序列化是指把Java对象转换为字节序列的过程 Java反序列化是指把字节序列恢复为Java对象的过程 当两个Java进程进行通信时,发送方需要把这个Java对象转换为 ...
- linux软AP--hostapd+dhcpd
linux软AP--hostapd+dhcpd 2018年05月08日 ⁄ 综合 ⁄ 共 4908字 ⁄ 字号 小 中 大 ⁄ 评论关闭 随着手机.笔记本等无线设备的增多,公司里的家用三个无线路由器已 ...
- LDAP&IMPLEMENTATION
LDAP是轻量目录访问协议,英文全称是LIGHTWEIGHT DIRECTORY ACCESS PROTOCOL,一般都简称为LDAPLDAP的特点1.LDAP 是一种网络协议而不是数据库,而且LDA ...
- 基于ROS的人脸识别
#!/usr/bin/env python # -*- coding: utf-8 -*- import rospy import cv2 import numpy as np from sensor ...
- MyBatis笔记(二) 最简单的insert命令
接上一篇随笔.这里没有用到MyBatis最关键的映射器接口,因此只做个简单的insert操作,update和delete同理,就不再赘述了. 直接上代码: 首先是dao包下的UserDAO.java文 ...
- java0422 wen 集合框架