vue的el-select标签全选（转）

Posted 2022-03-24 qcq0703

<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‘,‘TSINPUT‘, ‘01‘, ‘02‘, ‘03‘, ‘04‘, ‘05‘, ‘07‘, ‘08‘, ‘09‘, ‘11‘, ‘12‘],
        oldSearchJobType: [],
        typeList: [
          value: ‘ALL_SELECT‘, label: ‘全部‘,
          value: ‘TSINPUT‘, label: ‘时序数据采集任务‘,
          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: ‘数据对象 → 数据对象‘,
          value: ‘12‘, label: ‘FTP服务器 → 文件系统‘,
        ]
      
    ,
    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‘)

原文链接：https://www.cnblogs.com/zhenggaowei/p/9828364.html