element UI select組件全選


 
        
 <el-select class="fr" v-model="searchJobType" style="width: 185px; margin-right:8px;" size="mini" type="text" multiple collapse-tags @change="changeSelect" placeholder="請選擇類型查詢">
    <el-option v-for="(type,ind) in typeList" :key=ind :label="type.label" :value="type.value"></el-option>
  </el-select>

var Main = {
    data() {
      return {
        searchJobType: ['ALL_SELECT','00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10'],
        oldSearchJobType: [['ALL_SELECT','00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10']],
        typeList: [
          {value: 'ALL_SELECT', label: '全部'},
          {value: '00', label: 'label0'},
          {value: '01', label: 'label1'},
          {value: '02', label: 'label2'},
          {value: '03', label: 'label3'},
          {value: '04', label: 'label4'},
          {value: '05', label: 'label5'},
          {value: '06', label: 'label6'},
          {value: '07', label: 'label7'},
          {value: '08', label: 'label8'},
          {value: '09', label: 'label9'},
          {value: '10', label: 'label10'},
        ]
      }
    },
    methods:{
        changeSelect(val) {
        const allValues = [];
        // 保留所有值
        for (const item of this.typeList) {
          allValues.push(item.value)
        }
        // 用來儲存上一次的值,可以進行對比
        const oldVal = this.oldSearchJobType.length === 1 ? this.oldSearchJobType[0] : [];
        // 若是全部選擇
        if (val.includes('ALL_SELECT')) this.searchJobType = allValues;
        // 取消全部選中 上次有 當前沒有 表示取消全選
        if (oldVal.includes('ALL_SELECT') && !val.includes('ALL_SELECT')) this.searchJobType = [];
        // 點擊非全部選中 需要排除全部選中 以及 當前點擊的選項
        // 新老數據都有全部選中
        if (oldVal.includes('ALL_SELECT') && val.includes('ALL_SELECT')) {
          const index = val.indexOf('ALL_SELECT');
          val.splice(index, 1); // 排除全選選項
          this.searchJobType = val
        }
        // 全選未選 但是其他選項全部選上 則全選選上 上次和當前 都沒有全選
        if (!oldVal.includes('ALL_SELECT') && !val.includes('ALL_SELECT')) {
          if (val.length === allValues.length - 1) this.searchJobType = ['ALL_SELECT'].concat(val)
        }
        // 儲存當前最后的結果 作為下次的老數據
        this.oldSearchJobType[0] = this.searchJobType;
      },
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
 
  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM