<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>