elementUI的select全選

elementUI中的el-select全選

<template>
    <el-select class="handle-select"
            size="mini" 
            v-model="Bank" clearable multiple collapse-tags
            @change="selectAll" @focus="setBank">
            <el-option
              v-for="item in Banks"
              :key="item.value"
              :label="item.value"
              :value="item.value"
            >
            </el-option>
     </el-select>
</template> 

data() {
return {
  bank: [],
  banks: [
    {
      "id": "0",
      "value": "全選"
    },
    {
      "id": "1",
      "value": "農行"
    },
    {
      "id": "2",
      "value": "工行"
    },
    {
      "id": "3",
      "value": "建行"
    },
    {
      "id": "4",
      "value": "中信"
    },
    {
      "id": "5",
      "value": "招行"
    },
    {
      "id": "6",
      "value": "郵政"
    },
    {
      "id": "7",
      "value": "平安"
    },
    {
      "id": "8",
      "value": "支付寶"
    },
    {
      "id": "9",
      "value": "微信"
    },
    {
      "id": "10",
      "value": "雲閃付"
    },
    {
      "id": "11",
      "value": "浦發"
    },
    {
      "id": "12",
      "value": "華夏"
    }
  ]
};
}

 

// 給el-select添加change事件

// oldSearchBankType  存儲上一次的值

selectAll(val) {
        let allValues = [];
        for (const item of this.Banks) {
          allValues.push(item.value);
        }
        let oldVal = this.oldSearchBankType.length === 1 ? this.oldSearchBankType : [];
        if (val.includes('全選')) {
          console.log(allValues);
          this.Bank = allValues;
          oldVal = this.Bank;
        }
        if (this.oldSearchBankType.includes('全選') && val.includes('全選')) {
          if (val.length === 1) this.Bank = [];
          else {
            const index = val.indexOf('全選');
            val.splice(index, 1); // 排除全選選項
            this.Bank = val;
          }
          oldVal = this.Bank;
        }
        if (!this.oldSearchBankType.includes('全選') && !val.includes('全選')) {
          if (val.length === allValues.length - 1) {
            this.Bank = ['全選'].concat(val);
            oldVal = this.Bank;
          }
        }
        this.oldSearchBankType = oldVal;
      }