<template>
<div>
<span style="margin-left:30px;font-weight:bolder;">教练:
<el-select v-model="staffId"
placeholder="请选择"
multiple
collapse-tags
@change="changeStaff"
style="width:180px">
<el-option
v-for="(item, key) in staff"
:key="key"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</span>
</div>
</template>
<script>
export default {
data() {
return {
staffId: [-1],
isContainAll: true,
staffNmae: [],
staff: [
{ 'value': -1, 'nameCn': '全部' },
{ 'value': 1, 'nameCn': '张三' },
{ 'value': 2, 'nameCn': '李四'},
{ 'value': 3, 'nameCn': '王五' },
{ 'value': 4, 'nameCn': '潇潇' },
{ 'value': 5, 'nameCn': '小美'},
{ 'value': 6, 'nameCn': '赵琴' },
{ 'value': 7, 'nameCn': '张玲' }
]
}
},
methods: {
// 定义一个变量,用来存储当前下拉框是否选中了全部
if (this.isContainAll) {
// 只有下拉框的值发生了变化才会进入此方法
// 如果之前选中了全部,则变化后肯定不包含全部了
this.isContainAll = false
// 则删除第一个全部
this.staffId.splice(0, 1)
} else {
// 如果之前没有选中全部
// 判断此次是否选中了全部
this.isContainAll = this.staffId.some(value => value === -1)
// 如果此次选中了全部
if (this.isContainAll) {
// 则去除其他,只保留全部,默认value=-1 是全部
this.staffId = [-1]
} else {
// 如果当前不包含全部,则判断是否其他的七个日期全选了
if (this.staffId.length === this.staff.length - 1) {
// 如果其他员工全选了,则也将当前置为全部
this.staffId = [-1]
this.isContainAll = true
}
}
}
// 当没有选中任何教练时,将当前置为全部
if (this.staffId.length === 0) {
this.staffId = [-1]
this.isContainAll = true
}
// 如果选择全部
if (this.isContainAll === true) {
this.staffName = ['全部']
} else {
// 获得选中教练的姓名
for (let i = 0; i < this.staffId.length; i++) {
let obj = this.staff.find((item) => {
return item.value === this.staffId[i]
})
this.$set(this.staffName, i, obj.label)
}
}
}
</script>

elementUI el-select 多选情况下包含全部选项,及获得选中项的label的更多相关文章

  1. element-ui select多选情况下获取label和value

    直接上代码 <el-select v-model="value" multiple collapse-tags ref="select" @change= ...

  2. @Select注解的情况下,重载的报错

    在编写代码的时候,我对查询这个方法进行了重载,这样调用的时候会根据参数的不同,进而去执行不同的操作,但是......问题来了.想法都是美好的,实际情况却不是我理想的状态.运行代码的时候他动了几下,然后 ...

  3. 大型情感剧集Selenium:4_老中医教你(单/多/下拉框)选项定位 #华为云·寻找黑马程序员#

    今天讲什么 讲什么标题说了,讲selenium的单选.多选.下拉框选项定位.但其实这东西,没什么太多说的,又比较枯燥,那该怎么让这一集selenium的课程变得有趣呢?有请老中医,哈哈- 怎么样,这个 ...

  4. 在element-ui的select下拉框加上滚动加载

    在项目中,我们需要运用到很多来自后端返回的数据.有时是上百条,有时甚至上千条.如果加上后端的多表查询或者数据量过大,这就导致在前端的显示就会及其慢,特别是在网络不好的时候更是如此. 自然,后端就做了一 ...

  5. vue结合element-ui 的select 全选问题

    下拉列表多选 问题 通过操作 所有来进行全选 全不选问题 element-ui 中 select 记录下自己最近使用element-ui 中的 select多选问题 在element中默认是指单纯多选 ...

  6. 默认情况下,不使用of子句表示在select所有的数据表中加锁(转)

    Select …forupdate语句是我们经常使用手工加锁语句.通常情况下,select语句是不会对数据加锁,妨碍影响其他的DML和DDL操作.同时,在多版本一致读机制的支持下,select语句也不 ...

  7. [VS] - "包含了重复的“Content”项。.NET SDK 默认情况下包括你项目中的“Content”项。

    copy to :http://www.cnblogs.com/jinzesudawei/p/7376916.html VS 2017 升级至  VS 2017 v15.3 后,.Net Core 1 ...

  8. 关于datagridview中checkbox列在选中行的情况下无法操作值

    这几天做项目的时候碰到了个小问题,在datagridview中实现对checkbox列的全选和反选功能.代码如下              //全选              if (dataGrid ...

  9. 数据库SQL调优的几种方式 EFcore读的情况下使用 AsNoTracking非跟踪查询

    不要用GUID 当主键 没有规律 可以用雪花ID DBA 优化法则 硬件资源是根本,DBA是为了充分利用硬件资源 一般清空下可以不使用外键 可以提高性能 合理使用临时表 临时表分页; 一些查询语句加w ...

随机推荐

  1. HTML5新增和废弃的标签

    一.废弃的标签 以下的 HTML 4.01 元素在HTML5中已经被删除,虽然浏览器为了兼容性考虑都还支持这些标签,但建议使用新的替代标签,矛盾的是老浏览器对新标签的支持度又不够,视项目的受众对象而定 ...

  2. 丢手绢问题(约瑟夫问题)的python实现

    约瑟夫问题是个有名的问题:N个人围成一圈,从第一个开始报数,第M个将被杀掉,最后剩下一个,其余人都将被杀掉. def fnA(p, personNum, cnt): times = cnt // pe ...

  3. Java并发编程--6.Exchanger线程间交换数据

    在两个线程之间定义同步点,当两个线程都到达同步点时,他们交换数据结构,因此第一个线程的数据结构进入到第二个线程中,第二个线程的数据结构进入到第一个线程中 在生产者-消费者情境模式中它包含了一个数缓冲区 ...

  4. Java并发编程--4.Executor框架

    简介 Executor框架是启动,管理线程的API, 它的内部实现是线程池机制,它有很多好处,比如使任务提交和任务执行解耦合,防止this逃逸:它的主要API包括: Executor,  Execut ...

  5. 20145203 实验五 Java网络编程及安全

    20145203 实验五 Java网络编程及安全 实验内容 1.掌握Socket程序的编写: 2.掌握密码技术的使用: 3.设计安全传输系统. 实验要求 1.基于Java Socket实现安全传输 2 ...

  6. virtualbox+vagrant学习-2(command cli)-25-Machine Readable Output

    Machine Readable Output机器可读的输出 每个vagrant命令都接受一个--machine-readable的标志,它支持机器可读的输出模式.在这种模式下,终端的输出被机器友好的 ...

  7. week3编程作业: Logistic Regression中一些难点的解读

    %% ============ Part : Compute Cost and Gradient ============ % In this part of the exercise, you wi ...

  8. 统计单词出现的最多次数(Trie树)

    A Time Limit: 60ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描写叙述 给出n(1<= n && n <= 2*10^6) ...

  9. 提取win10默认锁屏壁纸

    win10锁屏设置为windows聚焦时锁屏会有好看的图片出现.想让一张好看的图片一直使用,就去提取出来然后设置一下. 找到C盘:用户目录下 找到你的主机名文件夹: 在查看的选项栏中将隐藏文件夹显示: ...

  10. C语言学习记录_2019.02.06

    break语句的作用:当执行到break,则跳出循环,免去不必要的循环次数,节省时间和资源.-----跳出循环,结束循环: continue:跳过这一次循环剩下的语句,进入到下一轮循环.-----跳到 ...