<el-select
    v-model="searchJobType"
    multiple
    collapse-tags
    @change="changeSelect"
    placeholder="請(qǐng)選擇類型查詢">
    <el-option v-for="(type,ind) in typeList"
      :key=ind
      :label="type.label"
      :value="type.value">
    </el-option>
</el-select>

export default {
    data () {
        return {
          searchJobType: ['ALL_SELECT','TSINPUT', '01', '02', '03', '04', '05', '07', '08', '09', '11', '12'],
          oldSearchJobType: [],
          typeList: [
            {value: 'ALL_SELECT', label: '全部'},
            {value: 'TSINPUT', label: '時(shí)序數(shù)據(jù)采集任務(wù)'},
            {value: '01', label: 'RDBMS → HIVE全量'},
            {value: '02', label: 'RDBMS → HDFS全量'},
            {value: '03', label: 'RDBMS → HBASE全量'},
            {value: '04', label: 'HDFS → RDBMS'},
            {value: '05', label: 'HIVE  → RDBMS'},
            {value: '07', label: 'RDBMS → HIVE增量'},
            {value: '08', label: 'RDBMS → HBASE增量'},
            {value: '09', label: '文件 → RDBMS'},
            {value: '11', label: '數(shù)據(jù)對(duì)象 → 數(shù)據(jù)對(duì)象'},
            {value: '12', label: 'FTP服務(wù)器 → 文件系統(tǒng)'},
        ]
      }
    },
    methods:{
        changeSelect(val) {
        const allValues = [];
        // 保留所有值
        for (const item of this.typeList) {
          allValues.push(item.value)
        }
        // 用來儲(chǔ)存上一次的值，可以進(jìn)行對(duì)比
        const oldVal = this.oldSearchJobType.length === 1 ? this.oldSearchJobType[0] : [];
        // 若是全部選擇
        if (val.includes('ALL_SELECT')) this.searchJobType = allValues;
        // 取消全部選中 上次有 當(dāng)前沒有 表示取消全選
        if (oldVal.includes('ALL_SELECT') && !val.includes('ALL_SELECT')) this.searchJobType = [];
        // 點(diǎn)擊非全部選中 需要排除全部選中 以及 當(dāng)前點(diǎn)擊的選項(xiàng)
        // 新老數(shù)據(jù)都有全部選中
        if (oldVal.includes('ALL_SELECT') && val.includes('ALL_SELECT')) {
          const index = val.indexOf('ALL_SELECT');
          val.splice(index, 1); // 排除全選選項(xiàng)
          this.searchJobType = val
        }
        // 全選未選 但是其他選項(xiàng)全部選上 則全選選上 上次和當(dāng)前 都沒有全選
        if (!oldVal.includes('ALL_SELECT') && !val.includes('ALL_SELECT')) {
          if (val.length === allValues.length - 1) this.searchJobType = ['ALL_SELECT'].concat(val)
        }
        // 儲(chǔ)存當(dāng)前最后的結(jié)果 作為下次的老數(shù)據(jù)
        this.oldSearchJobType[0] = this.searchJobType;
      },
}

親測(cè)好用，需要的朋友們直接拿去吧~ 點(diǎn)擊查看原文
如果你也經(jīng)常使用element-ui 可持續(xù)關(guān)注 Element UI 入坑小結(jié)
如果本文對(duì)你有所幫助，感謝點(diǎn)一顆小心心，您的支持是我繼續(xù)創(chuàng)作的動(dòng)力！