<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>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构