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= ...
随机推荐
- JavaScript字符串字节长度
var txt2="He中!!";var t = txt2.replace(/[^\u0000-\u00ff]/g,"aa").length;//值是7
- 暑期培训7日游解题思路(day1~day3)
暑期培训7日游解题思路(day1~day3) day1 第一天,王聿中老师出的题目比较简单,T1很水,T2是个简单的DP,T3还是有一点意思的.在网格图中删掉若干条边,使得所有格子都联通,求删掉的边的 ...
- springmvc 配置之 mvc:default-servlet-handler
配置dispatchServlet的方法一般是: <servlet> <servlet-name>mvc-servlet</servlet-name> <se ...
- 用JavaScript+css制作下拉式菜单
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- linux查看与修改交换内存配置(解决zabbix-agent启动报错)
问题 zabbix-agent在一台centos6.5上启动报错: cannot allocate shared memory of size 949056: [28] No space left o ...
- Windows Server Backup(2016) 备份
1. 使用 Windows Server Backup 备份 如果服务器没有启用 Windows Server Backup,需要打开服务器管理器,如下图 点击添加角色和功能,根据向导,添加 Wind ...
- Vue/Egg大型项目开发(二)数据库设计
项目Github地址:前端(https://github.com/14glwu/stuer)后端(https://github.com/14glwu/stuer-server) 项目线上预览:http ...
- Sony索尼数码录音笔MSV格式转换为MP3格式【转】
本文转载自:http://blog.sina.com.cn/s/blog_4b2c860f0100d78w.html Sony索尼数码录音笔一般存储为WAV格式,有些没有特意修改存储格式的就保存为MS ...
- d3-tip中show在自己调用时需要改变this值
<script src="https://d3js.org/d3.v4.min.js"></script><script src="http ...
- Markdown简记
一篇好的博客文档离不开一个优秀的编辑器.借此篇文章介绍一下编写该博客markdown的语法,方便大家写出更好更漂亮的文档.重点是点击左上角的Github链接,有主题源码哦 一篇好的博客文档离不开一个优 ...