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= ...
随机推荐
- 父网访问子网(校园网访问校园网IP路由器下的一台电脑)远程路由器下的电脑
网路由器添加转发规则,端口转发,本人仅使用Pandora Box路由器固件 当然设置了这些还不够,还需要设置其他的允许端口转发的东西,例如 然后远程桌面的话还需要设置某些相关设置,例如电脑允许使用远程 ...
- Python 上下文管理协议中的__enter__和__exit__基本理解
所谓上下文管理协议,就是咱们打开文件时常用的一种方法:with __enter__(self):当with开始运行的时候触发此方法的运行 __exit__(self, exc_type, exc_va ...
- ORA-12557协议适配器不可加载
背景:以前电脑没有装ORACLE,仅是安装了简易客户端,此次想安装一个11g数据库,安装完成后用PLSQL登录,发现报错. 解决方案A:使用免安装的oracle客户端(instantclient_11 ...
- C#基本方法(瞎写写)
public static IEnumerable<T> GetAll<T>() where T : new() { using (var conn = new Profile ...
- 高版本mysql8.0解压版安装步骤
解压版安装操作官网下载: mysql-installer-community-8.0.12.0.msi如上操作: http://www.cnblogs.com/elfin/p/9429877.html ...
- Android Studio环境安装
Android Studio下载 http://www.android-studio.org/ JDK下载 https://www.oracle.com/technetwork/java/index. ...
- Java8过滤器(Filter)
1.在Java之前对List进行过滤的方式 public class BeforeJava8 { public static void main(String[] args) { List<Pe ...
- mysql中利用show profile很直观的看到查询缓存的作用。
1.首先,开启mysql的查询缓存. 查看查询缓存情况: MariaDB [test]> show variables like '%query_cache%';+--------------- ...
- Axure RP 9 Mac正式汉化版安装教程
Axure RP9 汉化版是mac平台上一款交互式原型设计神器,是专为UX专业人员和业务分析师设计的专业网站原型设计工具!可以帮助他们快速创建应用程序和网站的线框,原型和规格!新功能包括一系列广泛的改 ...
- Price Channel Breakout 交易系统简价及源码
Price Channel Breakout 交易系统简价及源码 既然这个版有交易系统的模型报告,小弟先在这裡野人献曝一下,把目前正在用的系统拿来请大家批评指教一下. ================ ...