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