elementUI el-select 多選狀況下包含所有選項,及得到選中項的label

<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>    
相關文章
相關標籤/搜索