vue select 获取value和lable操作
vue select控件在选择时需要把id和name两个值都获取到,实现方案如下:
select控件代码
<FormItem label="物资类型:" prop="supplyType"> <Select v-model="detailData.supplyType" :label-in-value="true" placeholder="请选择物资类型" @on-change="getVendorId"> <Option v-for="item in supplyTypeList" :value="item.id" :key="item.id" :lable="item.dictionaryName">{{ item.dictionaryName }} </Option> </Select> </FormItem>
change事件
getVendorId: function (val) { let that = this; that.detailData.supplyType=val.value;//获取label that.detailData.supplyTypeName=val.label;//获取value },
下拉组件绑定数据源
supplyTypeList[ { "id": 45, "dictionaryName": "办公用品", "dictionaryCode": "nofficeSupplies" } ]
补充知识:vue选择器select获取选中项的value和id
今天在nuxt项目中使用element-ui的选择器时,有个需求要获取options的id和label。
做法如下:
html代码
在methods中:
这样就可以精准的获取到啦,希望可以帮到你呀!
以上这篇vue select 获取value和lable操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
Vue + Element-ui的下拉框el-select获取额外参数详解
直接上代码吧~ <el-table-column label="用户类型" width="180"> <template slot-scope="scope"> <el-select v-model="scope.row.roleID" placeholder="请选择" @change="changeRole($event,scope)"> <
-
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
API: https://vue-treeselect.js.org/#events 1.ids: 即value 1.lable: 需要用到方法:@select(node,instanceId) 和 @deselect(node,instanceId) <template> <treeselect ref="DRHA_EFaultModeTree" v-model="DRHA_EFaultModeTree_value" :multiple=&quo
-
详解element-ui中el-select的默认选择项问题
直接绑定将option中的value值绑定给v-model <template> <div> <el-select v-model="query"> <el-option v-for="item in options" :key="item.value" :value="item.value" :label="item.label"></el-optio
-
vue select 获取value和lable操作
vue select控件在选择时需要把id和name两个值都获取到,实现方案如下: select控件代码 <FormItem label="物资类型:" prop="supplyType"> <Select v-model="detailData.supplyType" :label-in-value="true" placeholder="请选择物资类型" @on-change=&quo
-
在Vue中使用Select选择器拼接label的操作
我就废话不多说了,大家还是直接看代码吧~ <el-form-item label="货道商品" prop="productid"> <el-select v-model="form.productid" filterable placeholder="请选择" @change="changeselect"> <el-option v-for="item in mypr
-
Ant Design of Vue select框获取key和name的问题
目录 Ant Design of Vue select框获取key和name 我的记录 Ant Design Vue使用select出现的问题 1.select下拉菜单滚动条滚动后,自动弹回到顶部 2.下拉列表在局部滚动时不跟随,与select框分离 Ant Design of Vue select框获取key和name 加入label-in-value这个属性 <a-form-item label="分类"> <a-select placeholder=
-
vue.js 获取select中的value实例
如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="./vue.js"></script> </head> <
-
在Vue 中获取下拉框的文本及选项值操作
方法1: <!-- element表单组件 --> <el-form :model="ruleForm" label-position="right" ref="ruleForm" // 被ref 标记的 status-icon size="small" inline :rules="rules" label-width="150px" class="demo
-
在vue中获取wangeditor的html和text的操作
目的:vue 中获取 wangeditor 的 html 和 text. 补充知识:vue-cli webpack 引入 wangeditor(轻量级富文本框) 1:使用npm下载: //(注意 wangeditor 全部是小写字母) npm install wangeditor 2: 直接在项目模板中引用 import E from 'wangeditor' 3:HTML <div id="editorElem" style="text-align:left"
-
vue 授权获取微信openId操作
1.获取url中参数code: 根据code 获取openId:调用后台接口获取openId . 参考文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842 function getUrlKey(name){//获取url 参数 return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&;]+?)(&|#|;|$)').exec(l
-
vue增删改查的简单操作
本文为大家分享了vue增删改查的简单操作,供大家参考,具体内容如下 我们把这些用户信息保存到list的数组中,然后增删改查就在这个数组上进行: list: [ { username: 'aaaaa', email: '123@qq.com', sex: '男', province: '北京市', hobby: ['篮球', '读书', '编程'] }, { username: 'bbbbb', email: 'bbbbbbb@163.com', sex: '女', province: '河北省'
-
解决vue select当前value没有更新到vue对象属性的问题
vue是一款轻量级的mvvm框架,追随了面向对象思想,使得实际操作变得方便,但是如果使用不当,将会面临着到处踩坑的危险,写这篇文章的目的是我遇到的这个问题在网上查了半天也没有发现解决方案,最终研究了vue的源码中有关select元素的部分找到了答案,下面简单介绍我踩的关于select的一个坑: 使用场景:有两个select元素,一个select元素变动时,动态修改另一个select中填充的内容,并默认选择第一项,问题来了,每次当我提交form数据时发现:从slave元素对应的数据没有更新到响应v
-
Ant design vue中的联动选择取消操作
项目中会遇到需求就是table表格中选中在侧边展示,侧边删除,table中选中取消的联动选中 ui框架:Ant design vue 组件:table 和 tag html中 <template v-for="tag in dataType"> <!-- key不能使用index --> <a-tag :key="tag.id" closable :afterClose="() => deleteDataType(tag
随机推荐
- C语言程序设计50例(经典收藏)
- MYSQL出现" Client does not support authentication "的解决方法
- 服务器XMLHTTP(Server XMLHTTP in ASP)基础知识
- 详解微信小程序——自定义圆形进度条
- asp.net MVC利用ActionFilterAttribute过滤关键字的方法
- docker指令收集整理(收藏)
- Apache下禁止php文件被直接访问的解决方案
- PHP5中GD库生成图形验证码(有汉字)
- jQuery web 组件 后台日历价格、库存设置的代码
- SqlServer 扩展属性的介绍
- sql语句优化的一般步骤详解
- 电脑"蓝屏"原因之速查手册
- C++设置系统时间及系统时间网络更新的方法
- nginx修改上传文件大小限制的方法
- LNMP系列教程之 解决sendmail不能发送邮件问题
- apache urlrewrite防盗链功能配置
- Android自定义封装banner组件
- spring boot结合Redis实现工具类的方法示例
- javascript异步编程的六种方式总结
- 微信小程序在ios下Echarts图表不能滑动的问题解决