element-ui select多选情况下获取label和value
html部分
<el-select
v-model="value"
multiple
collapse-tags
ref="select"
@change="changeLocationValue" //将用到此方法
style="margin-left: 20px;"
placeholder="请选择角色">
<el-option
v-for="item in options" //options 数据源
:key="item.id"
:label="item.roleName" //我的label是 roleName
:value="item.id"> //我的value 是 id
</el-option>
</el-select>
data(){
return {
options:[
{id:1,roleName:'dafe'},
{id:2,roleName:'gged'},
{id:3,roleName:'dafgddvde'},
{id:4,roleName:'hjrtb'},
{id:5,roleName:'fgdcbd'}
],
departmentIds:[],
departmentNames:[]
}
}
js部分
changeLocationValue(val){
this.departmentIds = [] //初始化数据
this.departmentNames = [] //初始化数据
for(let i=0;i<=val.length-1;i++){
this.options.find((item)=>{ //这里的options就是数据源
if(item.id == val[i]){
this.departmentIds.push(item.id) //这里的value我改成了id
this.departmentNames.push(item.roleName) //这里的label我改成了roleName
}
});
}
console.log(this.departmentIds)
console.log(this.departmentNames)
},
element-ui select多选情况下获取label和value的更多相关文章
- 把cookie以json形式返回,用js来set cookie.(解决手机浏览器未知情况下获取不到cookie)
.继上一篇随笔,链接点我,解决手机端cookie的问题. .上次用cookie+redis实现了session,并且手机浏览器可能回传cookies有问题,所以最后用js取出cookie跟在请求的ur ...
- Codeigniter 数据库操作事务情况下获取不到last_insert_id()
开发中,数据库Insert使用了事务,如果 $this->db->insert_id() 放在 $this->db->trans_complete(); 这句语句之后,$thi ...
- Element ui select同时获取value和label的值
代码如下: <el-form-item v-if="isMD" label="业务员名称"> <el-select v-model=" ...
- Element ui select 同时获取value和label的值
html <el-form-item label="单位名称" prop="checkInUnitName"> <el-select v-mo ...
- @Select注解的情况下,重载的报错
在编写代码的时候,我对查询这个方法进行了重载,这样调用的时候会根据参数的不同,进而去执行不同的操作,但是......问题来了.想法都是美好的,实际情况却不是我理想的状态.运行代码的时候他动了几下,然后 ...
- element ui select组件和table做分页完整功能和二级联动效果
<template> <div class="index_box"> <div class="search_box"> &l ...
- spring-如何在项目启动的情况下获取Bean实例
十年阿里,就只剩下这套Java开发体系了 >>> 大家都知道,项目启动的时候,spring读取xml文件,将配置的bean 或者 注解下的controller service d ...
- 使用 Element UI Select 组件的 value-key 属性,让绑定值可以为一个对象
EsunR 2019-11-07 12:14:42 12264 收藏 6 分类专栏: Vue 文章标签: element-ui 版权 当我们使用 Elemet UI 的选择组件进行多选时,Sele ...
- python字典嵌套字典的情况下获取某个key的value
最近在用python写接口的测试程序,期间用到解析字典获取某个key的value,由于多个接口返回的字典格式不是固定的并存在多层嵌套的情况.在字典的方法中也没有找到可直接达到目的的方法(也可能是我对字 ...
随机推荐
- python mysql数据库压力测试
python mysql数据库压力测试 pymysql 的执行时间对比 1,装饰器,计算插入1000条数据需要的时间 def timer(func): def decor(*args): start_ ...
- mysql知识集锦
1.mysql中InnoDB引擎中页的概念 2.mysql索引详解--如何从磁盘中读取索引文件
- 本地快速搭建MarkDown语法网站
主要是在之前跟人学的快速搭建一个简单的网站,可以通过这样的方式把相关的文档美美的放在服务器上,然后给别人看也好,自己也能熟系熟系MarkDown的语法并学习,要是接口文档还是推荐通过swagger去实 ...
- Gradle 教程: 教你配置全局国内仓库,解决新建项目卡顿,下载构建慢等问题
想必各位从Maven 转过来的大佬们,对于maven中配置国内仓库的方法还记忆深刻.通过/用户目录下/.m2/settings.xml 局部配置或者修改全局配置.不过没有接触过maven 也不要紧,可 ...
- error Microsoft Visual C++ 14.0 is required 解决方案
Windows平台上,pip install fastFM scrapy等工具的时候,经常出现 error Microsoft Visual C++ 14.0 is required 的错误, ...
- Hadoop的三种调度器FIFO、Capacity Scheduler、Fair Scheduler(转载)
目前Hadoop有三种比较流行的资源调度器:FIFO .Capacity Scheduler.Fair Scheduler.目前Hadoop2.7默认使用的是Capacity Scheduler容量调 ...
- SpringBoot Error creating bean with name 'dataSource' defined in class path resource。。。
启动spring boot项目出错 解决方法在Application类上增加:@EnableAutoConfiguration(exclude={DataSourceAutoConfiguration ...
- Android NDK编译选项设置
Android NDK编译选项设置 网易加固关注 0.5472016.08.22 14:07:00字数 3,034阅读 6,805 在Android NDK开发中,有两个重要的文件:Android.m ...
- [译]在Ubuntu 18.04上安装pip
三步走: 1.更新源 sudo apt update 2.安装pip sudo apt install python3-pip 3.查看pip版本 pip3 --version pip 9.0.1 f ...
- LeetCode_448. Find All Numbers Disappeared in an Array
448. Find All Numbers Disappeared in an Array Easy Given an array of integers where 1 ≤ a[i] ≤ n (n ...